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。像这样：

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和大多数教程中找到的实现。

Answer 2

我发现大致有两种方法可以做到。两者都涉及在 <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

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

2 个答案: