Chrome扩展程序：使用chrome.webRequest修改与cURL请求的`--data` arg等效的HTTP请求

Question

Diving into my first chrome extension, and trying to figure out how to modify some data in http requests.

I'm using the documentation here: https://developer.chrome.com/extensions/webRequest

I was able to setup the extension to listen for requests, but am not able to access the data I want.

When I'm in the chrome dev tools, on the Network tab, I right click the particular request I'm trying to modify and copy as cURL. The data I want to modify shows up after --data . I want to access this and change an integer value one of the parameters is set to.

I'm not sure what the equivalent is with these http requests, but I've tried the following:

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    var bkg = chrome.extension.getBackgroundPage();
    bkg.console.log("onBeforeRequest");
    bkg.console.log(JSON.stringify(details));
    blockingResponse = {};

    return blockingResponse;
  },
  {urls: [/*URL*/]},
  ['requestBody','blocking']
);

I can find the request with the url that I am looking at in the Network tab of the dev tools, so I'll be able to parse that and make sure I'm only modifying the requests that I want to, but printing the details doesn't show the data that I actually want to modify. Any idea how to obtain the HTTP request equivalent of the --data argument of a cURL request? And, well, modify it.

Edit: Here's the progress I've made.

When I log those details, I get ..."requestBody":{"raw":[{"bytes":{}}]},...

However, if I change onBeforeRequest to:

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    var bkg = chrome.extension.getBackgroundPage();
    bkg.console.log("onBeforeRequest");
    bkg.console.log(JSON.stringify(details));
    var encodedData = getBase64FromArrayBuffer(details.requestBody.raw[0].bytes);
    bkg.console.log("unencoded data: " + details.requestBody.raw[0].bytes);
    bkg.console.log("encodedData: " + encodedData);
    blockingResponse = {};

    return blockingResponse;
  },
  {urls: ["*://*.facebook.com/*"], types: ["xmlhttprequest"]},
  ['requestBody','blocking']
);

function getBase64FromArrayBuffer(responseData) {
    var uInt8Array = new Uint8Array(responseData);
    var i = uInt8Array.length;
    var binaryString = new Array(i);
    while (i--)
    {
      binaryString[i] = String.fromCharCode(uInt8Array[i]);
    }
    var data = binaryString.join('');

    var base64 = window.btoa(data);

    return base64;
}

The encoded data exists, showing a long string of chars, though it's gibberish. Does this mean that I won't be able to access this data and modify it? Or is there a way to decode this data?

Answer 1

The chrome.webRequest API does allow you to access POST data. It does not, however, allow you to modify the POST data.

You are able to modify some of the header info, but not the POST data.

It appears the ability to modify POST data was intended, but a dev at Google who was working on it got moved to something else, and sat on the bug/feature request for two years afterwards, and just released it so someone else could pick it up a few months ago. If this is a feature that interests you, head to https://bugs.chromium.org/p/chromium/issues/detail?id=91191# and star this bug (requires gmail account), and perhaps some renewed interest will lead to someone completing the functionality.