在 Chrome 擴展中將 React 組件注入頁面的正確方法？
[英]Proper way to inject React Component onto page in Chrome Extension?
問題描述
我正在制作一個 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);
3 個解決方案
解決方案1
1 2021-01-08 14:42:43
我發現大致有兩種方法可以做到。 兩者都涉及在<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
0 2019-09-02 19:21:03
通常它被分成 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和大多數教程中找到的實現。
解決方案3
0 2022-09-05 06:40:23
該解決方案基於： https://github.com/yosevu/react-content-script 。
App.js內部：
import React from 'react';
function App() {
return (
<>
<h1>Hello World</h1>
</>
)
}
export default App;
內部content.js ：
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App'
const body = document.querySelector('body')
const app = document.createElement('div')
app.id = 'react-root'
if (body) {
body.prepend(app)
}
const container = document.getElementById('react-root');
const root = createRoot(container);
root.render(<App/>) // Render react component
結果：
Chrome 擴展將側邊欄注入頁面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.