Using Content Script to Update DOM on active tab
Rterrell25 opened this issue · 1 comments
Rterrell25 commented
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 commented
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.
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: