在开发Chrome扩展程序时，Chrome React Devtools没有显示出来。

Question

我正在调试我的Chrome扩展弹出页面，并在以下 URI 中打开它： chrome-extension://keekhfjbmbpmlgpfljclblgbjchoencn/popup.html

该页面使用了ReactJS，但React开发工具没有显示。 这是设计上的问题吗？

- Huan

---

很确定 Chrome 扩展无法在其他扩展的页面上运行。 - pvg

Answer 1

您可以使用React Dev Tools，但是由于CSP限制，您需要使用独立版本在浏览器扩展中工作。请在控制台中运行以下命令：

$ npm install -g react-devtools

并将其添加到您的manifest.json中

"content_security_policy": "connect-src ws://localhost:8097"

现在运行 react-devtools
不要忘记重新加载您的扩展程序。

P.S.
如果您不想全局安装 react-devtools，则可以从您的项目中运行 npm install --save-dev react-devtools，然后添加到 package.json 中。

"scripts": {
   "react-devtools": "react-devtools"
}

执行 npm run react-devtools

- Moti Korets

---

开发工具仍然显示“等待React连接...”。看起来你必须以某种方式在扩展中加载它的脚本，但是将其添加到“content_scripts [*] .js”的开头会在使用Chrome安装时出现“无法为内容脚本加载javascript''”的错误。 - Nick McCurdy

看起来你又遇到了问题。请提出一个新的问题，并提供最小可重现的示例。 - Moti Korets

我通过直接导入 react-devtools 成功使其工作。https://www.npmjs.com/package/react-devtools#usage-with-react-dom - Nick McCurdy

对于使用manifest v3的扩展，这种方法看起来是什么样子的？ - siva

Answer 2

React开发工具需要在您的页面中注入内容脚本以检查React组件。为此，它们在其清单中声明与任何具有允许方案的URL匹配的模式，这些方案包括（来自文档https://developer.chrome.com/extensions/match_patterns）：

http、https、file、ftp 换句话说：React Developer Tools无法在扩展程序页面中运行。

- Felipe T.

Answer 3

以下是我采取的步骤，使其与清单v3兼容：

• 本地安装： npm i -D react-devtools
• 将 "react-devtools": "react-devtools" 添加到 package.json 脚本中
• 在调用 render 的文件顶部导入该包： import 'react-devtools'
• 最后一步是使用 npm run react-devtools 打开 Devtools

- Dattaya