google-chrome-extension - Chrome 扩展：请求完成后如何从 devtools 获取当前选项卡的页面内容？

Question

我正在开发一个 chrome 扩展，以在请求完成时从 devtools 验证当前选项卡的页面内容。我只对以下类型的请求感兴趣：main_frame、sub_frame 和 xmlhttprequest。

可以这样做：

1. 在 background.js 中监听chrome.webRequest.onCompleted事件并过滤掉不感兴趣的请求
2. 与 contentScript.js 通信以获取页面内容
3. 将页面内容作为消息发送到 devtools

但是这样的情况会发生吗？

1. 在 background.js 中，请求 A 完成并向 contentScript.js 发送消息 M_A 以获取页面内容。
2. 请求 B 完成并且页面内容已更改。
3. 在 contentScript.js 中，接收到 M_A，然后...

所以我想找到一个更好的方法，比如把所有的逻辑都放在 devtools 中：

var requestFinishedHandler = function(request) {
    // do something here ...
}
chrome.devtools.network.onRequestFinished.addListener(requestFinishedHandler);

有什么建议吗？

Answer 1

有一个chrome.devtools.inspectedWindow.onResourceAdded。我在 DevTools Autosave 中使用它。它没有指定请求类型，例如 main_frame、sub_frame 和 xmlhttprequest。