深入浅出：chrome.webrequest的使用方法

小蓝 • 2024-12-16 13:37 • 编程

一、什么是chrome.webrequest

chrome.webrequest API是Chrome扩展中提供的一个功能强大的网络请求处理接口，通过它可以拦截、修改甚至阻止Web页面的网络请求，同时支持对WebSocket、HTTP2等通讯协议进行拦截和修改。该API提供了多种事件监听器和过滤器，能够有效地拦截和修改网络请求，是开发Chrome扩展时不可或缺的一部分。

二、chrome.webrequest的事件监听器

chrome.webrequest事件监听器是指在特定网络请求事件发生时执行的回调函数，它们可以对网络请求进行拦截、修改等操作。chrome.webrequest API提供了多个可用的事件监听器，包括：

1. onBeforeRequest

该事件监听器在发送网络请求之前触发，允许拦截网络请求并决定是否继续发送。可以使用参数中提供的details对象来操作请求细节，如修改请求头信息、取消请求等。

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    // 取消所有网络请求
    return {cancel: true};
  },
  // 过滤规则
  {urls: [""]},
  // 过滤器类型
  ["blocking"]
);

2. onBeforeSendHeaders

该事件监听器在发送网络请求前触发，可用于修改请求的HTTP头信息，如添加、删除或修改请求头字段。

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    // 添加自定义请求头信息
    details.requestHeaders.push({name: "Authorization", value: "Bearer token"});
    return {requestHeaders: details.requestHeaders};
  },
  // 过滤规则
  {urls: [""]},
  // 过滤器类型
  ["blocking", "requestHeaders"]
);

3. onSendHeaders

该事件监听器在HTTP请求头信息发送后触发，可以用于检查或修改HTTP请求头信息。

chrome.webRequest.onSendHeaders.addListener(
  function(details) {
    // 检查请求头信息
    console.log(details.requestHeaders);
  },
  // 过滤规则
  {urls: [""]},
  // 过滤器类型
  ["requestHeaders"]
);

4. onHeadersReceived

该事件监听器在HTTP响应头信息接收时触发，可用于检查或修改HTTP响应头信息。

chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    // 检查响应头信息
    console.log(details.responseHeaders);
    return {responseHeaders: details.responseHeaders};
  },
  // 过滤规则
  {urls: [""]},
  // 过滤器类型
  ["responseHeaders"]
);

5. onAuthRequired

该事件监听器在需要进行认证时触发，例如需要进行基本身份验证等。可以用于取消操作或者通过传递用户名和密码等信息进行认证。

chrome.webRequest.onAuthRequired.addListener(
  function(details, callbackFn) {
    // 取消授权
    return {cancel: true};
  },
  // 过滤规则
  {urls: [""]},
  // 过滤器类型
  ["blocking"]
);

三、chrome.webrequest的过滤器

chrome.webrequest API提供了多种过滤器，这些过滤器用于指定使用哪些事件监听器、监听哪些网络请求。常用的过滤器有以下三种：

1. urls

urls过滤器指定需要监听的网络请求的URL，支持用通配符*代表任意字符。

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    // 取消所有以http://开头的网络请求
    return {cancel: true};
  },
  // 过滤规则
  {urls: ["http://*"]},
  // 过滤器类型
  ["blocking"]
);

2. types

types过滤器指定监听请求的类型，例如main_frame、sub_frame、stylesheet、script、image等。使用该过滤器需要结合urls过滤器一起使用。

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    // 取消所有脚本类型的网络请求
    return {cancel: true};
  },
  // 过滤规则
  {urls: [""], types: ["script"]},
  // 过滤器类型
  ["blocking"]
);

3. tabId

tabId过滤器指定监听所在的标签页ID。

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    // 取消当前标签页的所有网络请求
    return {cancel: true};
  },
  // 过滤规则
  {urls: [""], tabId: currentTabId},
  // 过滤器类型
  ["blocking"]
);

四、chrome.webrequest的限制

由于chrome.webrequest API可以直接对网络请求进行拦截和修改，因此在使用时需要注意其对浏览器和页面性能的影响。在使用时应尽可能精准地指定过滤规则，避免不必要的操作，同时使用缓存等优化方式减少不必要的网络请求。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270445.html