使用开发工具的Chrome扩展程序保存Har文件

Question

以下是我想做的事情。

我希望在使用 Google Chrome 时保存所有 HTTP（内容+请求+响应）。我找到了一种方法，可以在“开发者工具”中使用网络工具手动下载全部内容。

现在我想要自动化整个过程，以免进行任何手动操作。我认为，我们可以通过编写一个简单的 Chrome 扩展来实现这一目标，使用devtools.network API。

chrome.devtools.network.onRequestFinished.addListener(
    function(request) {
    //dosomething
});

但是我在这里有点迷惑，因为我以前从未进行过Chrome扩展开发。我制作了一个简单的manifest.json文件：

{
     "manifest_version": 2,
     "name": "My extension",
     "version" : "1.0",
     "background": {
         "scripts": ["devtools.js"],
         "persistent": true
     },
     "devtools_page": "devtools.html",
     "browser_action": {
         "default_title": "Get it",
         "default_icon" : "icon.png"
     }
}

我把第一个代码片段复制粘贴到devtools.js中，但是出现了错误：

network没有定义

我是否在正确的轨道上？如果是，我的代码有什么问题吗？

- user4804389

---

“Is giving me errors” 不是一个好的描述。 - Xan

当我尝试加载扩展时，它会显示“未定义网络”。请问您能告诉我在哪里精确添加这行代码chrome.devtools.network.onRequestFinished.addListener()吗？ - user4804389

Answer 1

根据“扩展DevTools”，chrome.devtools.* API模块仅适用于在DevTools窗口内加载的页面。内容脚本和其他扩展页面没有这些API。因此，API仅在DevTools窗口的生命周期内可用。所以只有在打开devtools.html时才能使用它，而不能在后台使用。

---

另外，您可以使用chrome.debugger API，该API只要DevTools未开启即可工作。请注意，它是一个文档很少的低级API。

鉴于你的其他问题，你的目标是自动化处理，使用debugger API可能是更好的选择（因为据我所知，没有自动打开带有DevTools的页面的方法）。 debugger API可以复制DevTools的操作，但一次只能连接一个页面 - 出于这个原因，如果调用DevTools，则debugger将停止工作。 编辑：自Chrome 63开始，Chrome支持多个调试器客户端，使得同时附加Dev Tools和chrome.debugger成为可能。

- Xan

---

你好，能否请您详细说明一下devTool窗口是什么意思？比如说只有在我打开了dev tool选项并在另一个窗口中加载页面时才能使用。如果是这样的话，我可以接受。 - user4804389

请阅读顶部链接的文章。任何可见页面都可以附加一个 Dev 工具窗口。您的页面 devtools.html 将作为选项卡嵌入其中。您只能在该页面中使用 API，并且它只会在 Dev 工具打开时收集事件。 - Xan

@Xan 我们可以使用调试器来捕获HAR吗？ - pvnarula