Injecting React via Content Scripts

[JhaAman]

Hey! I'm wondering if there's a tried and true way to inject content-scripts into the DOM using crxjs.

I tried this a few days ago and actually got something working:

However, no matter what I do, this no longer works. The way I did it was to use

document.querySelector(".FrSOzf")?.append(root);

instead of

document.body.append(root);

But it no longer renders at all. Is there a way to reliably get this type of injection done?

[JhaAman]

Got it working for a second just now, I'm thinking the issue is related to querySelector returning null at first because the CSS class isn't rendered at the beginning. Perhaps HMR reloads the querySelector later when everything is rendered, so it works.

The question is then, how can I get the querySelector to only run after all the DOM elements have loaded in? Or run similar to a useEffect, where it runs everytime new div elements are added/removed? Re: https://stackoverflow.com/questions/43147320/document-queryselector-doesnt-work-in-js-file

[jacksteamdev]

I think what you're looking for is a MutationObserver. I used it for a project that added buttons to Expedia flight search results. It got complicated fast.

Another less efficient alternative is to check the DOM on an interval. Just make sure you stop the interval when you've got what you want. querySelector is surprisingly expensive.

Resources

• javascript - Identify page finished loading content after page was already finished loading - Stack Overflow
• javascript - Performance of MutationObserver to detect nodes in entire DOM - Stack Overflow
• javascript - Observe mutations on a target node that doesn't exist yet - Stack Overflow

[williamyeny]

Hey @JhaAman, I know this is late but I implemented a MutationObserver for the purpose of mounting a React app. You might find it useful:

https://gist.github.com/williamyeny/a18e7184afa3974688af6ce64e50f61b

[nivethan-me]

Hi @williamyeny thank you for your gist, i got some idea from your code. but i'm wondering how to do this with crxjs plugin & React.
basically i want to insert a React component if the element is contentEditable. can you give any sample/info regarding this?

thank you in advance.