[TOC] ## 概述 通過[webRequest](https://developer.chrome.com/extensions/webRequest)系列API可以對HTTP請求進行任性地修改、定制，下面是`webRequest`的幾個生命周期：  加入權限 ``` //manifest.json { // 權限申請 "permissions": [ "webRequest", // web請求 "webRequestBlocking", // 阻塞式web請求 "storage", // 插件本地存儲 "http://*/*", // 可以通過executeScript或者insertCSS訪問的網站 "https://*/*" // 可以通過executeScript或者insertCSS訪問的網站 ], } ``` ## 示例 ``` // background.js // 是否顯示圖片 var showImage; chrome.storage.sync.get({showImage: true}, function(items) { showImage = items.showImage; }); // web請求監聽，最后一個參數表示阻塞式，需單獨聲明權限：webRequestBlocking chrome.webRequest.onBeforeRequest.addListener(details => { // cancel 表示取消本次請求 if(!showImage && details.type == 'image') return {cancel: true}; // 簡單的音視頻檢測 // 大部分網站視頻的type并不是media，且視頻做了防下載處理，所以這里僅僅是為了演示效果，無實際意義 if(details.type == 'media') { chrome.notifications.create(null, { type: 'basic', iconUrl: 'img/icon.png', title: '檢測到音視頻', message: '音視頻地址：' + details.url, }); } }, {urls: ["<all_urls>"]}, ["blocking"]); ``` 其他示例 ``` // 每次請求前觸發，可以拿到 requestBody 數據，同時可以對本次請求作出干預修改 chrome.webRequest.onBeforeRequest.addListener(details => { console.log('onBeforeRequest', details); }, {urls: ['<all_urls>']}, ['blocking', 'extraHeaders', 'requestBody']); // 發送header之前觸發，可以拿到請求headers，也可以添加、修改、刪除headers // 但使用有一定限制，一些特殊頭部可能拿不到或者存在特殊情況，詳見官網文檔 chrome.webRequest.onBeforeSendHeaders.addListener(details => { console.log('onBeforeSendHeaders', details); }, {urls: ['<all_urls>']}, ['blocking', 'extraHeaders', 'requestHeaders']); // 開始響應觸發，可以拿到服務端返回的headers chrome.webRequest.onResponseStarted.addListener(details => { console.log('onResponseStarted', details); }, {urls: ['<all_urls>']}, ['extraHeaders', 'responseHeaders']); // 請求完成觸發，能拿到的數據和onResponseStarted一樣，注意無法拿到responseBody chrome.webRequest.onCompleted.addListener(details => { console.log('onCompleted', details); }, {urls: ['<all_urls>']}, ['extraHeaders', 'responseHeaders']); ```