Chrome 扩展程序：在访问之前阻止页面项目答案

【问题标题】：Chrome extension: Block page items before accessChrome 扩展程序：在访问之前阻止页面项目
【发布时间】：2017-01-08 08:22:25
【问题描述】：

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

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

【问题讨论】：

您是否尝试过使用ServiceWorker？

标签： javascript google-chrome block

【解决方案1】：

您可以使用ServiceWorker阅读原版Response，然后再返回原版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)
            }
          })
      })
    );
  }
});

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

见What happens when you read a response?

【讨论】：

很遗憾，这不适用于扩展。扩展页面由 serviceWorker 监控，但不是所有访问的网站。如果够了，这个答案非常好，但不是为了监控访问过的网站的扩展:(
@mutilis 你能描述“但不是所有访问过的网站”吗？并在问题中包含或创建所有相关javascript 使用的要点gist.github.com？
我的意思是，扩展程序使用的页面受到监控，但 serviceWorker 不会审查其他网站（例如我的标签）。所以这对我的问题不起作用。但是，如果您查看示例扩展：developer.chrome.com/extensions/examples/extensions/…，它演示了一种重定向请求的方法。我想要做的是取消：如果请求加载某些内容，则为真/假。例如，如果加载的图片包含某个字节数组，则它应该被取消。我能做的是：......（下一条评论）
............. 1.) 自己加载对象（同步） 2.) 检查内容 3.) 如果没问题，允许请求完成（这将再次加载对象）==> 巨大的开销，因为每个允许的对象被加载两次。我的具体问题：我想加载对象-一次-并在检查后将其传递给请求。或者只是删除它，如果它包含某个字节数组：/总而言之：-同步=>很糟糕-加载两次=>很糟糕
该链接用于下载 zip 本身，而不是扩展示例页面。必须至少读取一次内容才能处理数据。您可以使用ReadableStream 读取所有内容一次，在读取检查条件期间，在阅读器关闭时通过结果，或者不将结果作为Response

【解决方案2】：

相信你可以使用arraybuffers来实时读取内容。

这是一个将文件/页面加载到缓冲区的示例；

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

这是在XMLHttpRequest 文档页面上找到的一段代码。 Link.

【讨论】：

我自己知道怎么加载对象，但是想拦截chrome的加载过程。所以 Chrome 会加载一个 javascript，例如，我想看看它，如果没问题，我想说 chrome “是的，你可以显示/使用它。但如果它不好，我想阻止它。我只找到了我的问题中看到的方式（这是加载每个“允许”对象-两次-，这是问题）
这段代码不正是这样做的吗？我还没有尝试过，但似乎这会在加载时返回一个缓冲区。另一种选择是制作 1 个端点，该端点返回没有内容的被阻止项目，以及有内容的未阻止项目？这样，您将只有 1 个调用并且所有调用都驻留在服务器上（如果您使用 PHP，它还可以节省在服务器上引导应用程序）。
但它实际上是在请求文件/页面本身。我希望用户上网，当他想加载页面时，我想拦截加载。所以 onload 函数看起来不错，但我不想启动 XMLHttpRequest，用户应该这样做。应该是这样的：用户访问google.de。 (...) 网站加载 somescript.js -> 扩展查看字节 -> 如果允许则 pass_on() 否则 block_it()
那么如何将文件加载到内存中（到变量或其他东西中）一次，然后检查是否允许（查看字节），然后如果可以将其注入页面。尽管如此，从我所看到的情况来看，您想在下载文件之前检查文件的大小（因为一些节省带宽的浏览器插件？）在这种情况下，我不确定您是否可以使用 XMLHttpRequest .. 您可以使用TCP 连接，请求文件，读取标头，如果标头正常，则继续。我认为仅使用插件/浏览器内进行此操作将非常困难...

【解决方案3】：

我能够实现我想要做的事情。该解决方案不再需要扩展，但要设置代理，这可能很有用。之后，解决方案（针对上面指定的问题）如下：

使用 chrome 扩展来使用代理，在本例中为 localhost
设置代理脚本，例如使用 python 来路由所有流量（并且可能安装证书，因此也可以分析 HTTPs 流量）
=> 建立中间人，分析流量并根据需要进行修改

是的，这并不能真正解决让 chrome 扩展以某种方式执行此操作的问题，但目前还不可能（请参阅 https://bugs.chromium.org/p/chromium/issues/detail?id=104058）。

最好的问候，多肉

【讨论】：