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

【问题标题】：Proper way to inject React Component onto page in Chrome Extension?在 Chrome 扩展中将 React 组件注入页面的正确方法？
【发布时间】：2016-08-04 14:14:18
【问题描述】：

我正在制作一个 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);

【问题讨论】：

这有什么不好的？ ReactDOM.render 需要渲染到 document.body 以外的元素，因此您可以通过 DOM API 创建元素。对我来说似乎很简单。
我只是想确定没有一种更正式的方式来使用 React API 设置环境，而不是使用直接的 JS 生成容器。
嗨@user3661841，您发布的内容脚本是代码吗？我无法在内容脚本中导入，我想知道这段代码在你的应用程序中的哪个位置。
@Spothedog1 自从我搞砸了这件事已经有一段时间了，但如果我没记错的话，我在内容脚本中使用了 chrome.tabs.executeScript API 将脚本注入到页面上。我不确定这是否是正确的 API，因为他们对扩展的工作方式进行了一些更改。
@user3661841我明白了，感谢您的回复。对于阅读本文的任何人，我都关注了this blog。

标签： javascript html reactjs google-chrome-extension

【解决方案1】：

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

使用内容脚本 - 但这对 React 来说可能是一件令人头疼的事情（弹出 create-react-app 和管理 webpack）
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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

问题提到它是针对 React 扩展的，我不相信这个解决方案适用。