webRequest

通过webRequest系列API可以对HTTP请求进行任性地修改、定制，下面是webRequest的几个生命周期：

webRequest - 图1

这里通过beforeRequest来简单演示一下它的冰山一角：

  1. //manifest.json
  2. {
  3.  // 权限申请
  4.  "permissions":
  5.  [
  6.  "webRequest", // web请求
  7.  "webRequestBlocking", // 阻塞式web请求
  8.  "storage", // 插件本地存储
  9.  "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
  10.  "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
  11.  ],
  12. }
  15. // background.js
  16. // 是否显示图片
  17. var showImage;
  18. chrome.storage.sync.get({showImage: true}, function(items) {
  19.  showImage = items.showImage;
  20. });
  21. // web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking
  22. chrome.webRequest.onBeforeRequest.addListener(details => {
  23.  // cancel 表示取消本次请求
  24.  if(!showImage && details.type == 'image') return {cancel: true};
  25.  // 简单的音视频检测
  26.  // 大部分网站视频的type并不是media，且视频做了防下载处理，所以这里仅仅是为了演示效果，无实际意义
  27.  if(details.type == 'media') {
  28.  chrome.notifications.create(null, {
  29.  type: 'basic',
  30.  iconUrl: 'img/icon.png',
  31.  title: '检测到音视频',
  32.  message: '音视频地址：' + details.url,
  33.  });
  34.  }
  35. }, {urls: ["<all_urls>"]}, ["blocking"]);

几个可能经常用到的事件使用示例：

  1. // 每次请求前触发，可以拿到 requestBody 数据，同时可以对本次请求作出干预修改
  2. chrome.webRequest.onBeforeRequest.addListener(details => {
  3.  console.log('onBeforeRequest', details);
  4. }, {urls: ['<all_urls>']}, ['blocking', 'extraHeaders', 'requestBody']);
  6. // 发送header之前触发，可以拿到请求headers，也可以添加、修改、删除headers
  7. // 但使用有一定限制，一些特殊头部可能拿不到或者存在特殊情况，详见官网文档
  8. chrome.webRequest.onBeforeSendHeaders.addListener(details => {
  9.  console.log('onBeforeSendHeaders', details);
  10. }, {urls: ['<all_urls>']}, ['blocking', 'extraHeaders', 'requestHeaders']);
  12. // 开始响应触发，可以拿到服务端返回的headers
  13. chrome.webRequest.onResponseStarted.addListener(details => {
  14.  console.log('onResponseStarted', details);
  15. }, {urls: ['<all_urls>']}, ['extraHeaders', 'responseHeaders']);
  17. // 请求完成触发，能拿到的数据和onResponseStarted一样，注意无法拿到responseBody
  18. chrome.webRequest.onCompleted.addListener(details => {
  19.  console.log('onCompleted', details);
  20. }, {urls: ['<all_urls>']}, ['extraHeaders', 'responseHeaders']);

上面示例中提到，使用webRequestAPI是无法拿到responseBody的，想要拿到的话只能采取一些变通方法，例如：

  1. 重写XmlHttpRequest和fetch，增加自定义拦截事件，缺点是实现方式可能有点脏，重写不好的话可能影响正常页面；
  2. devtools的chrome.devtools.network.onRequestFinishedAPI可以拿到返回的body，缺点是必须打开开发者面板；
  3. 使用chrome.debugger.sendCommand发送Network.getResponseBody命令来获取body内容，缺点也很明显，会有一个恼人的提示：

webRequest - 图2

上述几种方法的实现方式这个链接基本上都有，可以参考下：https://stackoverflow.com/questions/18534771/chrome-extension-how-to-get-http-response-body