在Chrome扩展程序内容脚本中使用`chrome.devtools.panels.create（）`

Question

我在内容脚本中有这个：

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

  });

然而，我收到此错误：

  

未捕获的TypeError：无法读取属性＆＃39;面板＆＃39;未定义的

我尝试添加＆＃34; devtools＆＃34;到我的manifest.json文件中的权限数组，但不允许这样做。

有没有办法从内容脚本中使用devtools API？如何在随机网页上动态地将面板添加到DevTools？

Answer 1

从documentation：

的内容脚本中使用它是不正确的

  

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

您需要创建单独的html文件，然后将其设置为devtools_page中的manifest媒体资源。之后，您可以在此html文件中加载脚本并从此处创建面板。

扩展的好例子，就是这样做 - React Dev Tools。