在 Chrome 扩展中将 React 组件注入页面的正确方法？

Question

我正在制作一个 Chrome 扩展程序，我想使用内容脚本将 HTML 注入页面 DOM。 这很容易，但我还希望内容脚本是一个 React 组件，并且 JS 本身不需要与页面 JavaScript 上下文交互，这样就更简单了。 我有一种简单的方法可以将容器元素注入到我的 React 代码可以渲染到的 DOM 中，但我觉得它非常 hacky，所以我想知道 React 开发人员是否可以建议一种官方方式（谷歌不是特别对这个具体问题有用）。

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);

Answer 1

我发现大致有两种方法可以做到。 两者都涉及在<body>某处创建一个新元素并将ReactDom.render调用附加到它。

1. 使用内容脚本 - 但这对 React 来说可能是一个头疼的问题（弹出 create-react-app 和管理 webpack）
2. Injecting the code directly from the Background.js script when a tab is active. 为此，您可以使用chrome.tabs.executeScript 。 这里有一个简短的博客： https : //dev.to/anobjectisa/build-a-chrome-extension-using-reactjs-38o7

Answer 2

通常它被分成 2 个文件，一个 HTML 和一个 JS。 像这样的东西：

索引.html

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

应用程序.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"));

我不知道官方方法，但这是在create-react-app和大多数教程中找到的实现。

Answer 3

该解决方案基于： https://github.com/yosevu/react-content-script 。

---

App.js内部：

import React from 'react';

function App() {
  return (
    <>
      <h1>Hello World</h1>
    </>
  )
}

export default App;

内部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

---

结果：