Mount and unmount Content Script UI with MutationObserver

[hexpl0it]

For my extension I need to mount my app immediately after a precise div. However, this div is not immediately available when the page is loaded.

To do this I used MutationObserver:

import ReactDOM from "react-dom/client";
import Toolbar from "./components/Toolbar";
import { useEffect } from "react";

function waitForElm(selector) {
  return new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver((mutations) => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
}

export default defineContentScript({
  main(ctx) {
    const ui = createIntegratedUi(ctx, {
      position: "inline",
      onMount: async (container) => {
        const elm = await waitForElm('[class^="ToolbarContainer__StyledHeader"]');
        const rootNode = document.createElement("div");
        elm.insertAdjacentElement("afterend", rootNode);
        const root = ReactDOM.createRoot(rootNode);
        root.render(<Toolbar />);
        return root;
      },
      onRemove: (root) => {
        root.unmount();
      },
    });

    ui.mount()
  },
});

However, this div can be removed following certain actions on the page. I would need to reassemble my component as soon as this div reappears. How can I do this?

[aklinker1]

You'll want to use the awaited element as the anchor tag, and use the append option to append your UI using insertAdjacentElement.

Something like this would work. I typed this up in github comments, so it probably isn't valid JS, and I haven't tested it. But hopefully it gives you a better idea of what you're looking for.

let anchor;
const ui  = createIntegratedUi(ctx, {
  position: "inline",
  anchor: () => anchor,
  append: (anchor, root) => anchor.insertAdjacentElement("afterend", root),
  onMount: async (container) => {
    const root = ReactDOM.createRoot(container);
    root.render(<Toolbar />);
    return root;
  },
  onRemove: (root) => {
    root.unmount();
  },
});
watchDomChanges(ctx, '[class^="ToolbarContainer__StyledHeader"]', {
  onAdd: (newAnchor) => {
    anchor = newAnchor;
    ui.mount();
  },
  onRemove: () => {
    ui.remove();
  },
});

function watchDomChanges(ctx, selector, callbacks) {
  const addMountListener = () => {
    const observer = new MutationObserver((mutations) => {
      const el = document.querySelector(selector)
      if (el) {
        observer.disconnect();
        unwatchCtx();
        callbacks.onAdd(el);
        addRemoveListener(el);
      }
    });
    const unwatchCtx = ctx.onInvalidated(observer.disconnect);
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  };
  const addRemoveListener = (el) => {
    const observer = new MutationObserver((mutations) => {
      if (mutations[0].removedNodes.includes(el)) {
        observer.disconnect();
        unwatchCtx();
        callbacks.onRemoved();
        addMountListener();
      }
    });
    const unwatchCtx = ctx.onInvalidated(observer.disconnect);
    observer.observe(el);
  };
  
  const initialEl = document.querySelector(selector);
  if (initialEl) {
    callbacks.onAdd(initialEl);
    addRemoveListener(initialEl);
  } else {
    addMountListener();
  }
}

[aklinker1]

@hexpl0it If you get something that works, I'd like to add auto-mounting/unmounting to WXT, if you would like to contribute your implementation.

[tesths]

Thank you very much for this issue. I have recently encountered a similar problem.
I want to inject content script above a specific div on the website after it has loaded.
I have tried the methods, which are effective. Thanks for @aklinker1 .
I wonder if there are other methods that can achieve similar functions? Maybe similar effects can be achieved without using an anchor?