How to inject custom components to content scripts?

[edmund-io]

Hi there, I am currently trying to do some DOM manipulation / display custom components within www.example.com.

I know that in order to modify the DOM elements within a certain domain the work would need to be done within the src/pages/Content directory, but I'm struggling to figure out how would I go about injecting custom React components into there. Is this even a possible thing to do or do I have the wrong idea about Chrome's content scripts?

Thank you!

[DavidNaak]

I wasn't able to figure out how to do it with this repo, but you can do it like this:

You put this in your content script (example for youtube)

async function injectReactApp() {
  try {
    const youtubeElement = await waitForElm(
      "#secondary.style-scope.ytd-watch-flexy"
    );

    let app = document.getElementById("myReactApp");

    if (app) {
      app.remove();
    }

    app = document.createElement("div");
    app.id = "myReactApp";

    // Append the new div to the YouTube page.
    youtubeElement.insertAdjacentElement("afterbegin", app);

    // Use ReactDOM.render to render your React application into the new div.
    ReactDOM.render(<App fetchData={fetchData} />, app);
  } catch (error) {
    console.log("Error:", error);
  }
}

window.onload = () => {
  if (window.location.hostname === "www.youtube.com") {
    if (
      window.location.search !== "" &&
      window.location.search.includes("v=")
    ) {
      injectReactApp();
    }
    
}

But you will have to figure out how to put the contentScript in your webpack config