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

IT技术 javascript html reactjs google-chrome-extension
2021-05-13 14:02:40

我正在制作一个 Chrome 扩展程序，我想使用内容脚本将 HTML 注入到页面 DOM 中。这很简单，但我也希望内容脚本是一个 React 组件，并且 JS 本身不需要与页面 JavaScript 上下文进行交互，因此这让它变得更简单。我有一种简单的方法可以将容器元素注入到我的 React 代码可以呈现的 DOM 中，但我觉得它非常笨拙，所以我想知道 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);
2个回答

我发现大致有两种方法可以做到。两者都涉及在 中的某处创建一个新元素<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

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

其它你可能感兴趣的问题
上一篇如何使用现有的已登录 Chrome 用户配置文件正确设置 VS Code 以在 chrome 中进行调试？ 下一篇具有绝对位置的嵌套可触摸