🧩 Plasmo Developers•16mo ago

How to Observe and Render a list of root containers

I want to implement a Linkedin comment assistant. Each time user clicks Comment section, I want to add a RootContainer to (newly created DIV). There may be many DIVs, so render should continuously observe DOM changes and create new Container. I tried to implement getInlineAnchorList() and custom render, but its not working. any ideas/direction I need to go?

1 Reply

vincentveganOP•16mo ago

I came up with this code, that works fine

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
    document.querySelectorAll(`.comments-comment-texteditor .comments-comment-box__button-group`)

export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer
    },
  ) => {
    const rootContainer = await createRootContainer(anchor)
    const root = createRoot(rootContainer)
    root.render(
        <Anchor/>
    )
  }

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
    document.querySelectorAll(`.comments-comment-texteditor .comments-comment-box__button-group`)

export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer
    },
  ) => {
    const rootContainer = await createRootContainer(anchor)
    const root = createRoot(rootContainer)
    root.render(
        <Anchor/>
    )
  }

But I dont want to use shadow DOM, so I tried to implement getRootContainer(), but no matter what I do, render() function is being called in a loop.
Also Im gettins this console warning [Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event.

export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer // This creates the default root container
    }: (PlasmoCSUIProps & { createRootContainer?: (p?: PlasmoCSUIAnchor) => Async<Element> })) => {

    debugger;
    let rootContainer = anchor.element.parentElement.querySelector(`[rendered]`);
    if (!rootContainer) {
        rootContainer = document.createElement("div");
        rootContainer.setAttribute('rendered', 'true');
        anchor.element.parentElement.prepend(rootContainer);
        const root = createRoot(rootContainer) // Any root
        root.render(
            <AnchorOverlay anchor={anchor} />
        )
    }
  }

export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer // This creates the default root container
    }: (PlasmoCSUIProps & { createRootContainer?: (p?: PlasmoCSUIAnchor) => Async<Element> })) => {

    debugger;
    let rootContainer = anchor.element.parentElement.querySelector(`[rendered]`);
    if (!rootContainer) {
        rootContainer = document.createElement("div");
        rootContainer.setAttribute('rendered', 'true');
        anchor.element.parentElement.prepend(rootContainer);
        const root = createRoot(rootContainer) // Any root
        root.render(
            <AnchorOverlay anchor={anchor} />
        )
    }
  }

What Im missing here?

Gaming

Programming

How to Observe and Render a list of root containers