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

用于读取 HTTP 响应的 Chrome 扩展程序

答案告诉了如何获取 响应头并显示在另一个页面中。但响应对象中没有正文信息（请参阅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)来关闭丑陋的提示。

抱歉，可能没有帮助... ^ ^

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

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

第一种方式是：

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

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

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

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

如果有帮助，我会展示我完成的代码。我添加了下划线来获取请求 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"}

但是我直接在后台开发工具中调试，它得到了第二个正确的主体。

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 不是完美的解决方案，有人可以提供帮助吗？谢谢。