我正在制作一个 Chrome 扩展，我想使用内容脚本将 HTML 注入(inject)到页面 DOM 中。这很简单，但我还希望内容脚本是一个 React 组件，而 JS 本身不需要与页面 JavaScript 上下文交互，这样就更简单了。我有一种简单的方法可以将容器元素注入(inject)到我的 React 代码可以呈现的 DOM 中，但我觉得它非常笨拙，所以我想知道是否有 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);
最佳答案
我发现大致有两种方法可以做到这一点。两者都涉及在 <body> 中的某处创建一个新元素。并附上 ReactDom.render调用它。
- 使用内容脚本 - 但这可能会让 React 头疼(弹出 create-react-app 和管理 webpack)
- 在选项卡处于事件状态时直接从 Background.js 脚本中注入(inject)代码。为此，您可以使用
chrome.tabs.executeScript.这里有一个简短的博客:https://dev.to/anobjectisa/build-a-chrome-extension-using-reactjs-38o7
关于javascript - 将 React Component 注入(inject) Chrome 扩展页面的正确方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36599147/