Chrome 阻止加载部分页面的扩展

Question

我正在开发一个 Chrome 扩展程序，它通过删除主页上的推荐视频来简化 YouTube 的主页。视频缩略图需要很长时间才能加载，所以我想找到一种方法来取消这些请求。到目前为止，我有以下

manifest.json 包括

"background": { 
  "persistent": true, 
  "scripts": ["background.js"] 
},
"permissions": [
  "webRequest", 
  "webRequestBlocking", 
  "*://www.youtube.com/"
]

background.js

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

现在，我相信我只需要找到要取消的路径。我已经在控制台上记录了一些，但在理解每个请求的作用时却迷失了方向。我取消的一些请求导致没有任何内容被加载，而其他请求导致 header 被加载但不可点击。我试过用 inspector 查看网络 activity，但没有太多使用该工具的经验。解决这个问题的好方法是什么？

Answer 1

在 devtools 元素检查器中，您可以检查缩略图以查看其 URL，然后在打开网络检查器的情况下重新加载页面并查看类似的 URLs:

https://i.ytimg.com/vi/* - 缩略图
https://yt*.ggpht.com/* - 用户头像

* 是变化部分的占位符。

要阻止这些 URL，您需要将它们添加到 manifest.json:

"permissions": [
  "webRequest", 
  "webRequestBlocking", 
  "*://www.youtube.com/",
  "https://i.ytimg.com/vi/*",
  "https://yt*.ggpht.com/*"
]

因为你只想阻止图像，所以只为这种类型的请求注册侦听器是有意义的，这样它就不会不必要地执行，对于 URL 模式也是如此。为避免向控制台发送有关网络请求被阻止的消息，您可以重定向到虚拟数据 URI。

chrome.webRequest.onBeforeRequest.addListener(
  info => info.initiator === 'https://www.youtube.com' && { redirectUrl: 'data:,' },
  {
    urls: [
      'https://i.ytimg.com/vi/*',
      'https://yt*.ggpht.com/*',
    ],
    types: [
      'image',
    ],
  },
  ['blocking']
);

Chrome 阻止加载部分页面的扩展

Chrome extension that prevents parts of a page from being loaded

javascript

debugging

httpwebrequest

httprequest

google-chrome-extension