如何添加react devtools用于铬扩展开发？

Question

我是插入一个反应组件到一个网页-一切似乎都很好，但我无法使反应开发工具工作。

在网上阅读后，这似乎是由以下原因造成的：

1. React注入一个脚本，它没有所需的权限
2. 扩展不能与每一个链接通信。

我尝试过的事情：

• 检查REACT_DEVTOOLS_GLOBAL_HOOK是否存在于窗口对象上，当通过浏览器锁定对象时它是否存在于窗口上，但当我试图从扩展中获取它时，检查它是否存在于窗口上。
• 我尝试通过以下操作提供任何所需的权限：

"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中，afaik不可能使用远程脚本(尽管文档建议使用不同的脚本)。

您可以做的是将来自独立devtools的脚本包含在您的扩展文件中。

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

一旦你这样做了，devtools将显示在独立的应用程序。