Chrome扩展开发：React DevTools开发模式下无法显示的问题咨询

我之前开发Chrome扩展时也碰到过一模一样的情况——Redux DevTools正常工作，但React DevTools就是死活不出来，折腾了好一会儿才搞定，给你整理几个关键步骤：

1. 改用独立版React DevTools并启动 #

内嵌在Chrome DevTools里的旧版本对chrome-extension://协议的页面支持很差，推荐用独立的React DevTools：

• 不用全局安装也可以，直接在终端运行 npx react-devtools，启动独立的DevTools窗口（开发时先开这个）

2. 在React应用中手动添加连接代码 #

Chrome扩展的页面属于受限协议，React DevTools无法自动注入，得在你的应用入口文件（比如src/index.jsx）里加一段开发环境专属的连接逻辑：

if (process.env.NODE_ENV === 'development') {
  // 动态导入并连接React DevTools
  import('react-devtools').then(({ default: connectDevTools }) => {
    connectDevTools({
      host: 'localhost',
      port: 8097, // 这是React DevTools默认端口，不用修改
    });
  });
}

3. 调整Manifest的内容安全策略 #

根据你的Manifest版本做对应修改：

Manifest V3： #

在manifest.json里更新content_security_policy字段，允许WebSocket连接和开发环境必要的eval：

{
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval'; connect-src 'self' ws://localhost:8097;"
  }
}

Manifest V2： #

直接修改根节点的content_security_policy：

{
  "content_security_policy": "script-src 'self' 'unsafe-eval'; connect-src 'self' ws://localhost:8097;"
}

注意：'unsafe-eval'只在开发环境用，生产打包时一定要删掉，避免安全风险。

4. 最后检查两个关键点 #

• 确保你用的是开发版本的React（不是生产压缩版），React DevTools只识别开发环境的React包
• 确认你的Chrome扩展是在开发者模式下加载的，没有被Chrome的安全策略限制

做完这些后，重启你的扩展和React DevTools窗口，应该就能正常看到组件树了。

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