Using Content Script to Update DOM on active tab

[Rterrell25]

I am attempting to use the built-in content script to update the dom on the active tab I am currently viewing. The issue I am running into is that the content scripts are updating the extension itself instead of the active Tab's DOM. Is there a specific way to use the content scripts so that I can inject JS into the active tab? Or are there any resources I can take a look at.

[vontell]

Here is an example that I have created.
In my contentScript folder, I have an index.js file that manipulates the dom, and then renders a react component in the DOM.

contentScript/index.js:

export function attachButtonSwitchers() {
  //Code to manipulate the DOM, such as:
  const buttonContainer = document.createElement("div")
  buttonContainer.style.display = 'inline'
  buttonContainer.appendChild(...);
  chatHeader.parentNode.replaceChild(buttonContainer, chatHeader)
}

// Code to render an element in some div that I created and tagged
```js
export function mountReactPogger() {
  ReactDOM.render(
      <React.StrictMode>
        <Pogchat />
      </React.StrictMode>,
      document.getElementById("pogchat-container")
  );
}

My react component is then in this file, inside of the contentScript folder.

The final result is that I get, in my case, a modified twitch chat: