如何在React开发的Chrome扩展中通过内容脚本插入JSX至DOM？

1. 调整Create React App打包配置 #

Create React App默认打包输出适配单页应用，我们需要修改配置生成可被内容脚本引用的独立JS模块，这里用react-app-rewired和customize-cra避免eject项目：

• 安装依赖：

npm install react-app-rewired customize-cra --save-dev

• 在项目根目录创建config-overrides.js：

const { override, adjustWorkbox, setWebpackPublicPath } = require('customize-cra');

module.exports = override(
  // 禁用Service Worker（扩展不需要）
  adjustWorkbox(wb => Object.assign(wb, { exclude: (wb.exclude || []).concat('index.html') })),
  // 设置相对公共路径，适配扩展文件结构
  setWebpackPublicPath('')
);

• 修改package.json的脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

2. 修改React组件导出逻辑 #

修改Test.jsx，导出可直接调用的渲染函数：

import React from 'react';
import ReactDOM from 'react-dom/client';

function Test() {
  return <p>text</p>;
}

// 导出渲染函数，接收DOM容器作为参数
export function renderTest(container) {
  const root = ReactDOM.createRoot(container);
  root.render(<Test />);
}

export default Test;

3. 调整入口文件index.js #

避免默认的自动渲染逻辑，仅导出渲染函数：

import { renderTest } from './Test';
export { renderTest };

4. 打包项目 #

执行打包命令生成编译后的组件代码：

npm run build

打包完成后，build/static/js/下会生成类似main.xxx.js的文件，这就是我们需要的React组件代码。

5. 更新manifest.json #

将打包后的文件复制到扩展目录，修改manifest配置：

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.1",
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content-script.js", "static/js/main.xxx.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["static/js/main.xxx.js"],
      "matches": ["http://*/*", "https://*/*"]
    }
  ]
}

注意：将main.xxx.js替换为你打包后实际的文件名。

6. 编写内容脚本content-script.js #

创建内容脚本，负责创建React容器并触发组件渲染：

// 创建React根容器并添加到页面
const reactContainer = document.createElement('div');
reactContainer.id = 'my-extension-root';
reactContainer.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 9999;';
document.body.appendChild(reactContainer);

// 等待组件代码加载完成后渲染
window.addEventListener('load', () => {
  if (window.renderTest) {
    window.renderTest(reactContainer);
  }
});

7. 加载扩展到Chrome #

1. 打开Chrome扩展管理页面（chrome://extensions/）
2. 开启「开发者模式」
3. 点击「加载已解压的扩展程序」，选择你的扩展目录

内容的提问来源于stack exchange，提问作者Bruno