在Chrome扩展内容脚本中使用`chrome.devtools.panels.create（）` [英] Use `chrome.devtools.panels.create()` in Chrome Extension content script

问题描述

  chrome.devtools.panels.create（'Suman Extension Page Controls' ，
'icon.png'，
'devtools-panel.html'，
 function（panel）{
 console.log（'devtools panel。'）; 
 
}）; 
  

然而，我得到这个错误：

未捕获的类型错误：无法读取未定义的属性'面板'

我尝试将devtools权限数组在我的manifest.json文件中，但这是不允许的。

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

解决方案

从内容脚本中使用它不正确文档：

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

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

扩展的很好的例子，这是 - React Dev Tools 。

I have this in a content-script:

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

  });

however, I get this error:

Uncaught TypeError: Cannot read property 'panels' of undefined

I tried adding "devtools" to the permissions array in my manifest.json file, but that's not allowed.

Is there a way to use the devtools API from a content script? How do I dynamically add panels to DevTools on a random webpage?

解决方案

It's incorrect to use it from the content scripts, from the documentation:

The chrome.devtools.* API modules are available only to the pages loaded within the DevTools window. Content scripts and other extension pages do not have these APIs

You need to create separate html file, then set it to the devtools_page property in your manifest. And after that, you can load your scripts in this html file and create panel from here.

Good example of extension, which is does this - React Dev Tools.

这篇关于在Chrome扩展内容脚本中使用`chrome.devtools.panels.create（）`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！