chrome.webRequest.onBeforeRequest导致网页的某些功能无法加载

Question

我正在写一个chrome扩展程序。 我希望它阻止en.wikipedia.org上的所有页面，但Main_Page除外。 我使用chrome.webRequest.onBeforeRequest来做到这一点。

这是我用于chrome扩展程序的背景脚本的代码：

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.url=="https://en.wikipedia.org/wiki/Main_Page") {
      return {cancel: false};
    } else {
      return {cancel: true};
    }
  },
  {urls: ["https://en.wikipedia.org/*"]},
  ["blocking"]);

此代码正确地阻止了除Main_Page之外的所有Wikipedia页面。

它的确显示Main_Page，但显示的是不带CSS的简化版本。

我曾与其他网站尝试这样做（即块“ https://www.reddit.com/ *”除了正是“ https://www.reddit.com/ ”），并在这些其他情况下的一些页面元素不能加载。

为什么会这样？ 我可以使用chrome.webRequest.onBeforeRequest并使网页正确显示吗？

Answer 1

以下示例说明了如何阻止对www.abc.com的所有请求：

  chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
      return {cancel: details.url.indexOf("://www.abc.com/") != -1};
    },
    {urls: ["<all_urls>"]},
    ["blocking"]);

由于此函数使用阻止事件处理程序，因此需要清单文件中的“ webRequest”和“ webRequestBlocking”权限。

以下示例以更有效的方式实现了相同的目标，因为不需要以www.abc.com为目标的请求无需传递给扩展名：

 chrome.webRequest.onBeforeRequest.addListener(
    function(details) { return {cancel: true}; },
    {urls: ["*://www.abc.com/*"]},
    ["blocking"]);

更多详细信息： https : //developer.chrome.com/extensions/webRequest

Answer 2

如果站点使用的是资源的子路径，而不是单独的子域，则您的URL模式将破坏所有此类资源，例如Wikipedia的CSS。

通过指定types过滤器，只需阻止顶部URL：

chrome.webRequest.onBeforeRequest.addListener(
  info => ({
    cancel: !info.url.startsWith('https://en.wikipedia.org/wiki/Main_Page'),
  }),
  {
    urls: ['https://en.wikipedia.org/*'],
    types: ['main_frame', 'sub_frame'],
  },
  ['blocking']
);