使用 webRequest API 可以让插件监控 Chrome 的网络请求,甚至重定向请求。
如图,我们可以替换掉原有图片。
- 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"]
)
最后,打开页面 即可看见效果。