在Chrome扩展程序中将React Component注入页面的正确方法？

Question

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

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

通常它被分成 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大多数教程中找到的实现。