Web前端►Extension►WebExtension

browser.webRequest.onBeforeSendHeaders

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/03/06/browser-webRequest-onBeforeSendHeaders/

摘要

本文主要讲述了：

  1. 触发时机
  2. 许可配置
  3. 监听网络请求
  4. 取消网络请求
  5. 重定向网络请求
  6. 修改网络请求头
  7. Chrome

正文

触发时机

在发送任何数据之前，在所有请求头全部可用之后触发

许可配置

  • webRequest
  • host

监听网络请求

示例：监听通往*://*.baidu.com/*和*://*.bing.com/*的所有网络请求

1
2
3
4
5
6
7
function callback(requestDetails) {
  console.log(requestDetails);
}

browser.webRequest.onBeforeSendHeaders.addListener(callback, {
  urls: ['*://*.baidu.com/*', '*://*.bing.com/*'],
});

示例：监听通往*://*.baidu.com/*的所有图片请求

1
2
3
4
5
6
7
8
function callback(requestDetails) {
  console.log(requestDetails);
}

browser.webRequest.onBeforeSendHeaders.addListener(callback, {
  urls: ['*://*.baidu.com/*'],
  types: ['image'],
});

取消网络请求

取消网络请求需要额外申请webRequestBlocking许可

示例：同步取消通往*://*.baidu.com/*的所有网络请求

1
2
3
4
5
6
7
8
9
10
11
12
function callback(requestDetails) {
  console.log(requestDetails);
  return {
    cancel: true,
  };
}

browser.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking']
);

示例：异步取消通往*://*.baidu.com/*的所有网络请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function callback(requestDetails) {
  console.log(requestDetails);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        cancel: true,
      });
    }, 3e3);
  });
}

browser.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking']
);

重定向网络请求

重定向网络请求需要额外申请webRequestBlocking许可

示例：同步重定向通往*://*.baidu.com/*的所有网络请求

1
2
3
4
5
6
7
8
9
10
11
12
function callback(requestDetails) {
  console.log(requestDetails);
  return {
    redirectUrl: 'https://bing.com',
  };
}

browser.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking']
);

示例：异步重定向通往*://*.baidu.com/*的所有网络请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function callback(requestDetails) {
  console.log(requestDetails);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        redirectUrl: 'https://bing.com',
      });
    }, 3e3);
  });
}

browser.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking']
);

通过配置web_accessible_resources字段，可以将外部网络请求重定向到扩展内的资源。

示例：将通往*://*.baidu.com/*的所有网络请求重定向到扩展内的popup/index.html。

1
2
3
{
  "web_accessible_resources": ["popup/index.html"]
}
1
2
3
4
5
6
7
8
9
10
11
12
function callback(requestDetails) {
  console.log(requestDetails);
  return {
    redirectUrl: browser.runtime.getURL('popup/index.html'),
  };
}

browser.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking']
);

修改网络请求头

修改网络请求头需要额外申请webRequestBlocking许可

示例：同步修改网络请求头

注：仅影响User-Agent请求头，不影响navigator.userAgent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function callback(requestDetails) {
  console.log(requestDetails);
  for (const item of requestDetails.requestHeaders) {
    if (item.name.toLowerCase() === 'user-agent') {
      item.value =
        'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/12.0 Mobile/15A372 Safari/604.1';
    }
  }
  return {
    requestHeaders: requestDetails.requestHeaders,
  };
}

browser.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking', 'requestHeaders']
);

示例：异步修改网络请求头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function callback(requestDetails) {
  console.log(requestDetails);
  for (const item of requestDetails.requestHeaders) {
    if (item.name.toLowerCase() === 'user-agent') {
      item.value =
        'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/12.0 Mobile/15A372 Safari/604.1';
    }
  }
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        requestHeaders: requestDetails.requestHeaders,
      });
    }, 3e3);
  });
}

browser.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking', 'requestHeaders']
);

Chrome

注意：

  1. 从 Chrome 72 版本开始，若要读取、修改或移除Accept-Language、Accept-Encoding、Referer、Cookie请求头，必须在extraInfoSpec中配置extraHeaders

示例：移除Cookie请求头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function callback(requestDetails) {
  const headers = [];
  requestDetails.requestHeaders.forEach(function (item) {
    const headerName = item.name.toLowerCase();
    if (headerName !== 'cookie') {
      headers.push(item);
    }
  });
  return {
    requestHeaders: headers,
  };
}

chrome.webRequest.onBeforeSendHeaders.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking', 'requestHeaders', 'extraHeaders']
);

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/03/06/browser-webRequest-onBeforeSendHeaders/

本文对你有帮助？请支持我

支付宝
微信