在开发Chrome扩展程序时，Chrome React Devtools不会显示

Question

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

此页面正在使用reactjs，但反应devtools未显示。 它是按设计的吗？

Answer 1

您可以使用React Dev Tools，但您必须使用standalone version才能使用浏览器扩展（因为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

Answer 2

React Dev Tools需要在您的页面中注入内容脚本以检查您的反应组件。要做到这一点，他们在清单中声明匹配任何url的模式与允许的方案，这些是（来自文档https://developer.chrome.com/extensions/match_patterns）：

http，https，file，ftp

换句话说：React Developer Tools无法在扩展页面中运行。