19

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);
user3661841
  • 428
  • 3
  • 13
  • 2
    What's hacky about it? `ReactDOM.render` requires an element to render to other than `document.body`, so you create the element via DOM API. Seems pretty straightforward to me. – Pavlo Apr 13 '16 at 13:02
  • I just wanted to be sure that there was not a more official way of setting up the environment using the React API as opposed to generating the container with straight JS. – user3661841 Apr 13 '16 at 13:25
  • Hi @user3661841 , is the code you posted your content script? I can't import in the content script, I was wondering where in your app this code lived. – Spothedog1 Jul 26 '20 at 17:30
  • @Spothedog1 its been a while since I messed with this, but if I am remembering correctly, I used the chrome.tabs.executeScript API in the content script to inject the script onto the page. I am not sure if that is the correct API anymore since they have made some changes to how the extensions work. – user3661841 Jul 29 '20 at 14:37
  • 1
    @user3661841I figured it out thanks for replying. For anyone reading this I followed [this blog](https://blog.usejournal.com/making-an-interactive-chrome-extension-with-react-524483d7aa5d). – Spothedog1 Jul 29 '20 at 23:28

3 Answers3

3

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.

  1. Using content scripts - but this can be a headache for React (ejecting create-react-app and managing webpack)
  2. Injecting the code directly from the Background.js script when a tab is active. To do this you can use chrome.tabs.executeScript. There is a short blog on it here: https://dev.to/anobjectisa/build-a-chrome-extension-using-reactjs-38o7
Wide Awake
  • 1,339
  • 1
  • 11
  • 18
3

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:

enter image description here

hahahumble
  • 86
  • 3
-1

Usually it's split into 2 files, one HTML and one JS. Something like this:

index.html

<head>
  <script src="path/to/bundle.js"></script>
</head>
<body>
  <div id="app-wrapper" />
</body>

App.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return <h1>App was injected.</h1>
  }
};

ReactDOM.render(
  <App/>, document.getElementById("app-wrapper"));

I don't know about an official way, but this is the implementation found in create-react-app and most of tutorials around.

Thiago Loddi
  • 2,212
  • 4
  • 21
  • 35