如何为 chrome 扩展开发添加 react-devtools？

Question

我正在将一个反应组件插入 web 页面 - 一切似乎都运行良好，但我无法让反应开发工具工作。

在网上阅读后，似乎这可能是由以下原因引起的：

1. React devtools 注入了一个脚本，但它没有所需的权限
2. 扩展无法与每个人通信

我尝试过的事情：

• 检查 window object 上是否存在 REACT_DEVTOOLS_GLOBAL_HOOK，当我尝试从我的扩展程序中获取它时，它存在于 window 上

• 我尝试通过执行以下操作来授予任何必需的权限：

"content_security_policy": "connect-src ws://localhost:8097", // to my manifest
// and
"script-src http://localhost:8097"
//and 
"content_security_policy": "script-src 'self' http://localhost:8097; object-src 'self'",

这会给我一个值无效的错误 - 所以我去了一个清单 v2。 那确实修复了该错误，然后我能够运行

yarn add react-devtools
yarn react-devtools

这导致 devtools 弹出（不是通过 chrome 扩展，而是从我的控制台） - 但是这是空的，上面没有显示任何组件。

我怀疑这些组件实际上是如何被拾取的，因为现在我正在使用 querySelector 将组件添加到页面主体，这会导致问题吗？

这是我的代码的样子：

import 'react-devtools'

import React from 'react';
import { render } from 'react-dom';
import Index from './components/index'

render(<App />, window.document.querySelector('body'));

Answer 1

在清单 v3 中，不可能使用远程脚本（即使文档另有建议）。

您可以做的是将独立开发工具中的脚本包含在扩展文件中。

因此，不要像文档描述的那样包括： <script src="http://localhost:8097"></script> ，而是在浏览器中打开 url，将 JS 作为文件保存在 chrome 扩展文件夹中，然后包含该文件. 例如<script src="/react-devtools.js"></script> 。

完成后，devtools 将显示在独立应用程序中。