get request and response body from Chrome API onCompleted method

Question

How to record request and response body, chrome API onCompleted method is giving to record response header. How to do without opening developer tool?

I am developing a Chrome extension where I should capture total request and response. Currently, for the response, I'm able to capture response headers alone, is there a way to capture the entire response body? I have looked all the Chrome APIs and include onComplete method it is giving the option to capture response header only. Also, I want to capture this response body without opening the developer tools.

function recordData() {
  chrome.webRequest.onCompleted.addListener(function(recordStatus) {
    console.log("Recording Data" + recordStatus);
  }, {
    urls: ["http://*/*", "https://*/*"]
  }, ["responseHeaders"]);
}

Answer 1

I use a simple way to control this. Based on field requestId of both request and response.

Create a global Map, when event request header arrive, put it into the map with key requestId. remember to remove it from the map when finished, or your background page may crash as Out of Memory.

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

Answer 2

I'm looking for the same thing, at the moment I see that it is only possible with other browsers like Firefox.

webRequest.filterResponseData()

Answer 3

You are using the wrong webRequest.

The onCompleted listener fires at the very end (it’s the very last one) so it’s only useful to monitor when there’s a "sneaky" URL change without a page-refresh, as happens when watching different U-tube videos.

But if what you want (as I understand you) is to catch the Request and Response headers exchanged between a server and the browser, then you have to use these two listeners:

var Log1='';  // Let's save all REQUEST headers in this string.


chrome.webRequest.onBeforeSendHeaders.addListener(function(details){

 Log1 = details.requestId +' - '+ details.method +' - '+ details.frameId +' - '+ details.type +' - '+ details.url +'<br>'+ Log1;

},{urls:['<all_urls>']},['blocking','requestHeaders']);




var Log2='';  // Let's save all RESPONSE headers in this string.


chrome.webRequest.onHeadersReceived.addListener(function(details){

 let D=details.responseHeaders;

 for(var i=0; i<D.length; i++){

  Log2 = D[i].name +' - '+ D[i].value + '<br>' + Log2;

 }

},{urls:['<all_urls>']},['blocking','responseHeaders']);

NB: In the first listener I'm only saving the interesting parts but you can always use a loop to catch everything like in the listener below.

Catching everything means that you get a repeat of the User Agent and all other repetitive boring headers.

I know I'm late on the scene for your needs but maybe someone else needs all this.