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

现在，我相信我只需要查找要取消的路径。我已经记录了一些控制台，但是在理解每个请求的作用时已经迷失了。我取消的某些请求导致未加载任何内容，而另一些请求导致加载了标头但不可点击。我曾尝试与检查器一起查看网络活动，但没有太多使用该工具的经验。什么是解决此问题的好方法？

Answer 1

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

• [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(
  () => ({ redirectUrl: 'data:,' }),
  {
    urls: [
      'https://i.ytimg.com/vi/*',
      'https://yt*.ggpht.com/*',
    ],
    types: [
      'image',
    ],
  },
  ['blocking']
);