webRequest - 监控网络请求

使用 webRequest API 可以让插件监控 Chrome 的网络请求，甚至重定向请求。

如图，我们可以替换掉原有图片。

配置

见 manifest.json

• webRequest: 开启 webRequest

• webRequestBlocking: 让 webRequest 可以 block 网络请求

需要注意的是，使用 webRequest 的时候，background 不能设置 "persistent": false，因为它需要时刻监控。

还有，webRequest 不能替换 https 资源 !

开发

// background.js
chrome.webRequest.onBeforeRequest.addListener(
  function (details) {
    const url = details.url;

    if (url === 'http://n.sinaimg.cn/news/1_img/upload/7b577cec/576/w778h598/20180820/lSSg-hhxaafy9194151.jpg') {
      console.log(22)
      return {
        redirectUrl: 'https://github.com/welearnmore/chrome-extension-book/raw/master/doc/images/logo_google_developers.png'
      }
    }

    return {cancel: false}
  },
  {urls: ["<all_urls>"]},
  ["blocking"]
)

最后，打开页面 即可看见效果。