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

Question

这似乎是困难的问题(或不可能？).我想通过观看Chrome扩展程序后台脚本来获取并阅读由浏览器中的HTTP请求引起的HTTP响应.我们可以通过这种方式获得HTTP Request Body

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

我还检查了这些stackoverflows

• Chrome扩展程序 - 阅读响应正文的其他方法,而不是chrome.devtools.network？
• Chrome扩展程序可读取HTTP响应

有没有聪明的方法来获取Chrome扩展中的HTTP响应体？

Answer 1

我找不到比这更好的方式了.

Chrome扩展程序可读取HTTP响应

anwser告诉如何获取 响应标头并显示在另一个页面中.但是响应obj中没有正文信息(请参阅event-responseReceived).如果你想获得 没有其他页面的响应主体,试试这个.

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)用来关闭丑陋的小费.

抱歉,mabye没有帮助...... ^ ^

Answer 2

要获取 XHR响应正文，您可以按照此答案中的说明进行操作。

要获取 FETCH响应正文，您可以查看本文中的解决方案 3以及此答案。两者都无需使用 chrome.debugger 即可获取响应正文。

简而言之，您需要使用与 XHR 请求相同的方法将以下函数从内容脚本注入到页面中。

const constantMock = window.fetch;
 window.fetch = function() {
    return new Promise((resolve, reject) => {
        constantMock.apply(this, arguments)
            .then((response) => {
                if (response) {
                    response.clone().json() //the response body is a readablestream, which can only be read once. That's why we make a clone here and work with the clone
                    .then( (json) => {
                        console.log(json);
                        //Do whatever you want with the json
                        resolve(response);
                    })
                    .catch((error) => {
                        console.log(error);
                        reject(response);
                    })
                }
                else {
                    console.log(arguments);
                    console.log('Undefined Response!');
                    reject(response);
                }
            })
            .catch((error) => {
                console.log(error);
                reject(response);
            })
    })
}

如果response.clone().json()不起作用，你可以尝试response.clone().text()

Answer 3

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

第一种方式是：

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

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

我已在此处的博客文章中详细记录了这两种方法。

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

Answer 4

现在在 Chrome 开发者工具扩展中有一种方法，示例代码可以在这里看到：博客文章。

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

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.
      }
}
});
});