javascript - Chrome 扩展 : Block page items before access

Question

我正在尝试在网页上阻止项目，但我想在加载之前这样做。所以，例如，我可以使用

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

并重定向/取消请求。但我想检查请求的实际内容。我现在正在做的是启动 XMLHttpRequest 自己加载 url/对象，检查内容，并在必要时阻止它。但是，主要的问题是实际上并没有多少对象被阻塞。这意味着，每个对象被加载两次:一次用于“我的检查”，一次在我说“好的，你可以加载它”之后。

我如何拦截加载过程，以便我可以动态检查它并在允许的情况下传递数据字节？

希望你能理解我的问题，谢谢:-)

我现在如何做的例子:

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

Answer 1

在返回原始Response内容或新内容之前，您可以使用ServiceWorker读取原始Response。

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

参见 What happens when you read a response?