🧩 Plasmo Developers•2mo ago

Custom MutationObserver

Hello, Thank you for this great framework! I am trying to have a custom MutationObserver, however the doc mentionned it without giving an example, can someone explains how to do it please? https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer Thanks!

Plasmo Docs

Life Cycle of Plasmo CSUI – Plasmo

Plasmo's CSUI orchestrates a lifecycle dedicated to mounting and unmounting your React, Vue, or Svelte components in a content script.

6 Replies

Sam•2mo ago

If you're talking about a CSUI component I created my own observer by returning a promise from getInlineAnchor. I haven't tested this code but it should work and at least get you going.

const getInlineAnchor:
  | PlasmoGetInlineAnchor
  | (() => Promise<Element | undefined>) = async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(document.getElementById('exampleId'));
    }, 1000);
  });
};

const getInlineAnchor:
  | PlasmoGetInlineAnchor
  | (() => Promise<Element | undefined>) = async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(document.getElementById('exampleId'));
    }, 1000);
  });
};

That will return a promise which causes Plasmo to wait. In this case it'll wait 1 second then look for that selector. If it returns a valid element then Plasmo mounts the component. If I want to just stop the built in obserer you can just not resolve the promise.

TikaïOP•2mo ago

looks gucci, thanks a lot!

YAGPDB.xyz•2mo ago

Gave +1 Rep to @Sam (current: #11 - 3)

Arcane•2mo ago

@Tikaï has reached level 1. GG!

TikaïOP•2mo ago

Hum I am using getInlineAnchorList, any idea of how to do it with a list?

Sam•2mo ago

I would assume the promise needs to return either undefined or an array of elements.

Gaming

Programming

Custom MutationObserver