Javascript 如何为chrome扩展开发添加react开发工具？

我正在网页中插入一个react组件——一切似乎都很好，但我无法让react开发工具正常工作

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

React devtools注入脚本，但它没有所需的权限

扩展无法与eachover通信

我尝试过的事情：

• 检查窗口对象上是否存在REACT_DEVTOOLS_GLOBAL_钩子，当通过浏览器定位时，钩子是否存在于窗口中，但当我尝试从扩展中获取钩子时，钩子是否存在于窗口中

• 我已尝试通过以下操作授予任何所需权限：

这会给我一个值无效的错误-因此我转到清单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'));

导入“反应开发工具”
从“React”导入React；
从'react dom'导入{render}；
从“./components/Index”导入索引
render（，window.document.querySelector（'body'）；

import 'react-devtools'

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

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