没有通过 chrome.devtools 扩展输出到控制台

Question

我正在尝试按照 https://betterprogramming.pub/chrome-extension-intercepting-and-reading-the-body-of-http-requests-dd9ebdf2348b 创建一个开发工具面板以获取响应网站上的特定发布请求。我从本文第二部分中的说明开始，创建一个基本的开发工具面板（似乎可以工作）。接下来，我在 https://developer.chrome.com/docs/extensions/reference/api/devtools/network#type-Request 上讨论了 devtools.network API。我决定尝试使用 getHAR() 函数获取网络请求（https://developer.chrome.com/docs/extensions/reference/api/devtools/network#method-getHAR）。

这是manifest.json：

{
  "manifest_version": 3,
  "name": "Extension",
  "version": "1.0",
  "description": "Description",
  "devtools_page": "devtools.html"
}

devtools.html：

<script src="devtools.js"></script>

devtools.js：

chrome.devtools.panels.create("MyPanel", null, 'panel.html');

面板.html：

<html>
    <body>
        <script src="panel.js"></script>
    </body>
</html>

面板.js：

  chrome.devtools.network.getHAR(
   function (harLog) {

    console.log('my output');
    console.log(harLog);

  }
);

如果我在打开 devtools 窗口的情况下访问 https://developer.mozilla.org/en-US/docs/Web/API/setTimeout 并重新加载页面，我在控制台中看不到扩展程序的输出，也没有chrome://extensions 处出现错误。我做错了什么？

Answer 1

我假设您没有查看 DevTools 本身的控制台。这就是您要登录的地方。您的代码在 DevTools 窗口内运行，而不是在扩展背景页面内运行，也不在主网站内运行。

将 DevTools 作为 未固定窗口 打开，然后在 DevTools 窗口中按 Ctrl+Shift+I 打开 另一个 针对其他 DevTools（而不是网站）的 DevTools 窗口。