阻止加载网页部分内容的 Chrome 扩展程序

Question

我正在开发一个Chrome扩展程序，该扩展程序通过删除主页上的推荐视频来简化YouTube的主页。视频缩略图需要很长时间才能加载，因此我想找到一种方法来取消这些请求。到目前为止，我有以下几点manifest.json includes"background": {   "persistent": true,   "scripts": ["background.js"] },"permissions": [  "webRequest",   "webRequestBlocking",   "*://www.youtube.com/"]背景.jschrome.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/*- 用户头像

*是可变部分的占位符。

为了能够阻止这些网址，您需要将它们添加到清单.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']

);