🧩 Plasmo Developers•2y ago

getInlineAnchor loops infinitely in React application

Hello, I am trying to add a new button to Twitter using getInlineAnchor, but I get an infinite loop and my browser crashes.

<div role="navigation">
    <div></div>
    <div></div>
    <div></div>
    here
</div>

<div role="navigation">
    <div></div>
    <div></div>
    <div></div>
    here
</div>

I want to mount a component at the end of a child element of such a tree, but using >*:last-child like document.querySelector('[role="navigation"]>*:last-child') would result in an infinite loop. I tried with other React apps and got the same situation, so I wonder if I'm specifying it the wrong way? Here is the actual code I used.

export const getInlineAnchor: PlasmoGetInlineAnchor = () => {
    console.log("call");
    return document.querySelector('header [role="navigation"]>*:last-child');
}

const CustomButton: FC<PlasmoCSUIProps> = () => {
    return <p>str</p>;
}
export default CustomButton;

export const getInlineAnchor: PlasmoGetInlineAnchor = () => {
    console.log("call");
    return document.querySelector('header [role="navigation"]>*:last-child');
}

const CustomButton: FC<PlasmoCSUIProps> = () => {
    return <p>str</p>;
}
export default CustomButton;

I would appreciate it if you could let me know.

2 Replies

lab•2y ago

You can grab the navigation element as anchor, and mount into it as a last child instead: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-dom-mounting

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.

rua.wolfOP•2y ago

Thanks! Resolved. It seems I misunderstood the role of the anchor.

Gaming

Programming

getInlineAnchor loops infinitely in React application