使用`chrome.devtools.panels.create()`在Chrome扩展内容脚本中

Question

我在content-script中有一个：

  chrome.devtools.panels.create('Suman Extension Page Controls',
  'icon.png',
  'devtools-panel.html',
  function (panel) {
    console.log('my devtools panel.');
  });

但是，我遇到了这个错误：

unturew typeError：无法阅读未定义的属性'面板'

我尝试在我的清单文件中的权限数组中添加" devtools"，但不允许。

有没有一种方法可以使用内容脚本中的DevTools API？如何在随机网页上动态添加面板？

Answer 1

从文档中使用它是不正确的：

chrome.devtools。* API模块仅适用于页面 加载在DevTools窗口中。内容脚本和其他扩展程序 页面没有这些API

您需要创建单独的html文件，然后将其设置为manifest中的devtools_page属性。之后，您可以将脚本加载到此HTML文件中，然后从这里创建面板。

扩展的好示例，这就是这样做的 - react dev工具。