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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18534771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 12:18:35  来源:igfitidea点击:

Chrome Extension - How to get HTTP Response Body?

javascriptgoogle-chrome-extension

提问by otiai10

It seems to be difficult problem (or impossible??). I want to get and read HTTP Response, caused by HTTP Request in browser, under watching Chrome Extension background script. We can get HTTP Request Body in this way

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

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

I also checked these stackoverflows

我还检查了这些 stackoverflows

Is there any clever way to get HTTP Response Body in Chrome Extension?

有没有什么聪明的方法可以在 Chrome 扩展中获取 HTTP 响应正文?

采纳答案by liyangready

I can't find better way then this anwser.

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

Chrome extension to read HTTP response

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

The answer told how to get response headersand display in another page.But there is no body info in the response obj(see event-responseReceived). If you want to get response bodywithout another page, try this.

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

}

I think it's useful enough for me and you can use chrome.debugger.detach(debuggeeId)to close the ugly tip.

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

sorry, mabye not helpful... ^ ^

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

回答by Tarun Dugar

This is definitely something that is not provided out of the box by the Chrome Extension ecosystem. But, I could find a couple of ways to get around this but both come with their own set of drawbacks.

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

The first wayis:

一种方式是:

  1. Use a content script to inject our own custom script.
  2. Use the custom script to extend XHR's native methods to read the response.
  3. Add the response to the web page's DOM inside a hidden (not display: none) element.
  4. Use the content script to read the hidden response.
  1. 使用内容脚本注入我们自己的自定义脚本。
  2. 使用自定义脚本扩展 XHR 的本机方法以读取响应。
  3. 将响应添加到隐藏(非display: none)元素内的网页 DOM 。
  4. 使用内容脚本读取隐藏的响应。

The second wayis to create a DevTools extensionwhich is the only extension that provides an API to read each request.

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

I have penned down both the methods in a detailed manner in a blog post here.

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

Let me know if you face any issues! :)

如果您遇到任何问题,请告诉我!:)

回答by JohnP2

There is now a way in a Chrome Developer Tools extension, and sample code can be seen here: blog post.

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

In short, here is an adaptation of his sample code:

简而言之,这是对他的示例代码的改编:

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