Use `chrome.devtools.panels.create()` in Chrome Extension content script

Question

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?

Answer 1

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.