javascript - Chrome extension: Block page items before access - Stack Overflow

admin管理员组

文章数量:1332890

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"]
);

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"]
);

• javascript
• google-chrome
• block

Share Improve this question Follow asked Dec 22, 2016 at 10:44 mutilismutilis 57333 silver badges1818 bronze badges 1

• Have you tried using ServiceWorker? – guest271314 Commented Dec 29, 2016 at 22:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +25

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?

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.

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/p/chromium/issues/detail?id=104058).

Best regards, mutilis

本文标签： javascriptChrome extension Block page items before accessStack Overflow