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

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

我正在向网页中插入一个 React 组件 - 一切似乎都运行良好，但我无法让 React 开发工具正常工作。

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

1. React devtools 注入了一个脚本，但它没有所需的权限
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'));