Chrome 扩展 - 如何获取 HTTP 响应正文？

Question

这似乎是一个难题（或不可能？？）。 我想在观看 Chrome 扩展后台脚本下获取并阅读由浏览器中的 HTTP 请求引起的 HTTP 响应。 我们可以通过这种方式获取HTTP Request Body

chrome.webRequest.onBeforeRequest.addListener(function(data){
    // data contains request_body
},{'urls':[]},['requestBody']);

我还检查了这些 stackoverflows

• Chrome extensions - Other ways to read response bodies than chrome.devtools.network?
• Chrome extension to read HTTP response

有没有什么巧妙的方法在 Chrome 扩展中获取 HTTP 响应体？

Answer 1

如果有帮助的话，我会展示我完成的代码。我加了下划线来获取请求的url，谢谢

//background.js
import _, { map } from 'underscore';

var currentTab;
var version = "1.0";

chrome.tabs.onActivated.addListener(activeTab => {
    currentTab&&chrome.debugger.detach({tabId:currentTab.tabId});
    currentTab = activeTab;
    chrome.debugger.attach({ //debug at current tab
        tabId: currentTab.tabId
    }, version, onAttach.bind(null, currentTab.tabId));
});

function onAttach(tabId) {
    chrome.debugger.sendCommand({ //first enable the Network
        tabId: tabId
    }, "Network.enable");
    chrome.debugger.onEvent.addListener(allEventHandler);
}

function allEventHandler(debuggeeId, message, params) {
    if (currentTab.tabId !== debuggeeId.tabId) {
        return;
    }
    if (message === "Network.responseReceived") { //response return
        chrome.debugger.sendCommand({
            tabId: debuggeeId.tabId
        }, "Network.getResponseBody", {
            "requestId": params.requestId
            //use underscore to add callback a more argument, passing params down to callback
        }, _.partial(function(response,params) {
            // you get the response body here!
            console.log(response.body,params.response.url);
            // you can close the debugger tips by:
            // chrome.debugger.detach(debuggeeId);
        },_,params));
    }
}

我还发现 chrome.debugger.sendCommand 中存在错误。如果我有两个具有相同 URI 但参数不同的请求。如：

• 请求 1:https://www.example.com/orders-api/search?limit=15&offer=0
• 请求 2:https://www.example.com/orders-api/search?limit=85&offer=15

第二个不会得到正确的responseBody，它会显示：

Chrome Extension: "Unchecked runtime.lastError: {"code":-32000,"message":"No resource with given identifier found"}

但是我直接在后台devtools中调试，它得到了第二个正确的body。

chrome.debugger.sendCommand({tabId:2},"Network.getResponseBody",{requestId:"6932.574"},function(response){console.log(response.body)})

所以tabId和requestId没有问题。 然后我用 setTimeout 包裹 chrome.debugger.sendCommand，它会正确获取第一个和第二个 responseBody。

if (message === "Network.responseReceived") { //response return            
console.log(params.response.url,debuggeeId.tabId,params.requestId)
        setTimeout(()=>{
            chrome.debugger.sendCommand({
                tabId: debuggeeId.tabId
            }, "Network.getResponseBody", {
                "requestId": params.requestId
                //use underscore to add callback a more argument, passing params down to callback
            }, _.partial(function(response,params,debuggeeId) {
                // you get the response body here!
                console.log(response.body,params.response.url);
                // you can close the debugger tips by:
                // chrome.debugger.detach(debuggeeId);
            },_,params,debuggeeId));
        },800)
    
}

我认为 setTimeout 不是完美的解决方案，有人可以提供帮助吗？ 谢谢。

Answer 2

现在在 Chrome 开发者工具扩展中有一个方法，示例代码可以在这里看到：blog post。

简而言之，这是对他的示例代码的改编：

chrome.devtools.network.onRequestFinished.addListener(request => {
  request.getContent((body) => {
    if (request.request && request.request.url) {
      if (request.request.url.includes('facebook.com')) {

         //continue with custom code
         var bodyObj = JSON.parse(body);//etc.
      }
}
});
});

Answer 3

我找不到比这个 anwser 更好的方法。

Chrome extension to read HTTP response

答案告诉了如何获取响应标题并显示在另一个页面中。但是响应 obj 中没有正文信息（请参阅event-responseReceived）。如果您想在没有其他页面的情况下获得响应body，试试这个。

var currentTab;
var version = "1.0";

chrome.tabs.query( //get current Tab
    {
        currentWindow: true,
        active: true
    },
    function(tabArray) {
        currentTab = tabArray[0];
        chrome.debugger.attach({ //debug at current tab
            tabId: currentTab.id
        }, version, onAttach.bind(null, currentTab.id));
    }
)


function onAttach(tabId) {

    chrome.debugger.sendCommand({ //first enable the Network
        tabId: tabId
    }, "Network.enable");

    chrome.debugger.onEvent.addListener(allEventHandler);

}


function allEventHandler(debuggeeId, message, params) {

    if (currentTab.id != debuggeeId.tabId) {
        return;
    }

    if (message == "Network.responseReceived") { //response return 
        chrome.debugger.sendCommand({
            tabId: debuggeeId.tabId
        }, "Network.getResponseBody", {
            "requestId": params.requestId
        }, function(response) {
            // you get the response body here!
            // you can close the debugger tips by:
            chrome.debugger.detach(debuggeeId);
        });
    }

}

我认为它对我来说已经足够有用了，你可以使用chrome.debugger.detach(debuggeeId)来关闭丑陋的提示。

对不起，也许没有帮助... ^ ^

Answer 4

这绝对不是 Chrome 扩展生态系统开箱即用的东西。但是，我可以找到几种方法来解决这个问题，但它们都有自己的缺点。

第一种方式是：

1. 使用内容脚本注入我们自己的自定义脚本。
2. 使用自定义脚本扩展 XHR 的原生方法以读取响应。
3. 将响应添加到隐藏（不是display: none）元素内的网页DOM。
4. 使用内容脚本读取隐藏的响应。

第二种方法是创建一个DevTools扩展，这是唯一提供API来读取每个请求的扩展。

我在博客here.中详细记录了这两种方法

如果您遇到任何问题，请告诉我！ :)