Menu
I am making a Chrome Extension and I want to inject HTML into the page DOM using the content scripts. That is easy, but I also want the content script to be a React component and the JS itself does not need to interact with the page JavaScript context, so that makes it simpler. I have a simple way to inject a container element into the DOM that my React code can render to, but I feel like it is very hacky and so I was wondering if there was an official way that React developers could suggest (Google was not particularly useful on this specific matter).
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return <h1>App was injected.</h1>
}
};
let container = document.createElement('div');
container.setAttribute("id", "app-wrapper");
document.body.appendChild($el);
ReactDOM.render(
<App/>, container);
634
I've found there's broadly two ways to do it. Both involve creating a new element somewhere in the <body> and attaching the ReactDom.render call to it.
chrome.tabs.executeScript. There is a short blog on it here: https://dev.to/anobjectisa/build-a-chrome-extension-using-reactjs-38o7
194
This solution is based on: https://github.com/yosevu/react-content-script .
Inside App.js:
import React from 'react';
function App() {
return (
<>
<h1>Hello World</h1>
</>
)
}
export default App;
Inside content.js:
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App'
const body = document.querySelector('body')
const app = document.createElement('div')
app.id = 'react-root'
if (body) {
body.prepend(app)
}
const container = document.getElementById('react-root');
const root = createRoot(container);
root.render(<App/>) // Render react component
Result:
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
