Using the webRequest API allows the plugin to monitor Chrome web requests and even redirect them.


As shown, we can replace the original picture.

configuration

See the manifest. Json

  • WebRequest: open the webRequest
  • WebRequestBlocking: Enables webRequest to block web requests

It’s important to note that when you use webRequest,
backgroundCannot set
"persistent": falseBecause it needs
Constantly monitor.


Also, webRequest cannot replace HTTPS resources!


The development of

// 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"]
)
Copy the code

Finally, open the page to see the effect.

We’ve been working on the Chrome Extension Development Mini-Book. Check out the full version:

Welearnmore. Gitbook. IO/chrome – exte…