Chrome Extension V3+React：Content Script无法运行求助

核心问题分析 #

仅保留console.log能正常输出，说明 Manifest 配置和 Content Script 注入逻辑没问题，问题出在 React 组件的挂载时机或 Webpack 打包适配性上——要么是组件挂载时目标页面 DOM 未就绪，要么是打包后的代码在 Chrome 扩展沙箱环境下存在兼容性冲突。

针对性解决步骤 #

1. 确保 React 组件在 DOM 就绪后挂载 #

Content Script 可能在页面 DOM 未完全加载时注入，直接执行 React 挂载会找不到有效节点。修改content/index.jsx：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Test from './test';

// 初始化 React 组件的逻辑
function initReactComponent() {
  // 创建一个独立挂载节点并插入页面
  const mountNode = document.createElement('div');
  mountNode.id = 'ext-react-mount';
  // 给节点加固定定位确保能看到
  mountNode.style.cssText = 'position:fixed;top:20px;left:20px;background:#fff;padding:10px;border:1px solid #000;z-index:99999';
  document.body.appendChild(mountNode);

  // 挂载 React 组件
  const root = ReactDOM.createRoot(mountNode);
  root.render(<Test />);
}

// 判断页面加载状态，确保 DOM 就绪后执行
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  initReactComponent();
} else {
  document.addEventListener('DOMContentLoaded', initReactComponent);
}

content/test.jsx保持简单的测试内容：

import React from 'react';

export default function Test() {
  return <div>Hello World from React Content Script</div>;
}

2. 调整 Webpack 配置适配扩展沙箱环境 #

Manifest V3 的 Content Script 运行在独立沙箱中，Webpack 默认配置可能引发冲突，修改配置文件：

const path = require('path');

module.exports = {
  entry: {
    content: './content/index.jsx',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    // 禁用全局变量污染，适配沙箱环境
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  // 禁用 eval 类型的 sourcemap，避免扩展环境报错
  devtool: 'source-map',
  // 禁止将 React 设为外部依赖，必须打包进 Content Script
  externals: {},
};

3. 验证打包结果 #

重新执行打包命令后，检查dist/content.js：

• 确保包含完整的 React 和 ReactDOM 代码（不要出现require('react')这类未打包的语句）
• 确认初始化逻辑被正确打包

最终验证 #

1. 重新加载扩展到 Chrome（扩展管理页面点击"重新加载"）
2. 打开目标页面，查看 Elements 面板是否存在id="ext-react-mount"的节点
3. 切换到页面的 Console 上下文（不要选扩展的背景页），确认无报错且组件正常渲染

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