Chrome extension: Block page items before access

问题

I am trying to do block items on a webpage but I want to do that, before they are loaded. So, e.g., I could use

chrome.webRequest.onBeforeRequest.addListener(...);

And redirect/cancel the request. But i want to inspect the actual content of the request. What I am doing right now, is starting a XMLHttpRequest to load the url/object myself, inspect the content, and block it if necessary. However, the main problem is that in fact, not many objects are blocked. This means, that each object is loaded twice: Once for "my inspection" and once, after I said "okay, you may load it".

How can I intercept the loading process, so that I can inspect it on the fly and pass on the data bytes if they are allowed?

Hope you understand my question, thanks :-)

Example of how I do it right now:

function shall_be_blocked(info){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", file, false);
  //... #load the file and inspect the bytes
  if (xhr.responseText=="block it") {
     return true;
  }
  return false;
}

chrome.webRequest.onBeforeRequest.addListener(
  function(info) {
    ret = shall_be_blocked(info);
    if (ret ...){return {cancel:true};}//loads the file once, as it is getting blocked
    return {};//loads the file twice
  },
  {},["blocking"]
);

回答1:

You can use ServiceWorker to read original Response before returning content of original Response or new content.

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js").then(function(reg) {
    console.log("register", reg);
  }).catch(function(err) {
    console.log("err", err);
  });
}

self.addEventListener("fetch", function(event) {
  if (event.request.url == "/path/to/fetched/resource/") {
    console.log("fetch", event);
    event.respondWith(
      fetch(event.request).then(function(response) {
        return response.text()
          .then(function(text) {
            if (text === "abc123") {
              return new Response("def456")
            } else {
              return new Response(text)
            }
          })
      })
    );
  }
});

plnkr https://plnkr.co/edit/MXGSZN1i3quvZhkI7fqe?p=preview

See What happens when you read a response?

回答2:

I believe you can use arraybuffers to read the content in real-time.

Here's an example of loading a file / page into a buffer;

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

This is a piece of code found on the XMLHttpRequest documentation page. Link.

回答3:

I was able to achieve what i was trying to do. The solution does not necessarily need extensions anymore, but to setup a proxy this might be useful. Afterwards, the solution (for the specified problem above) is as follows:

Use a chrome extension to use a proxy, in this case, localhost
Setup a proxyscript, e.g. using python, to route all traffic (and maybe install certificates, so HTTPs traffic may be analyzed as well)
=> Man-in-the-middle established, analyze traffic and modify if needed

Yes, this is not really a solution to the problem of making a chrome extension do this somehow, but it is not possible yet (see https://bugs.chromium.org/p/chromium/issues/detail?id=104058).

Best regards, mutilis

来源：https://stackoverflow.com/questions/41281291/chrome-extension-block-page-items-before-access

标签

javascript

google-chrome

block