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

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.