Chrome extension: Block page items before access

Question

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(

Answer 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?