browser.webRequest.onBeforeRequest

本文作者: jsweibo

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

摘要

本文主要讲述了：

触发时机
许可配置
监听网络请求
取消网络请求
重定向网络请求

正文

触发时机

在请求头可用之前触发。

许可配置

webRequest
host

监听网络请求

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

function callback(requestDetails) {
  console.log(requestDetails);
}

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

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

function callback(requestDetails) {
  console.log(requestDetails);
}

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

示例：监听指定标签页的所有网络请求

注：即使是 iframe 中的网络请求也能监听

function callback(requestDetails) {
  console.log(requestDetails);
}

browser.contextMenus.create({
  title: 'Start',
  onclick(info, tab) {
    tabId = tab.id;
    browser.webRequest.onBeforeRequest.addListener(callback, {
      tabId: tabId,
      urls: ['<all_urls>'],
    });
  },
});

取消网络请求

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

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

function callback(requestDetails) {
  console.log(requestDetails);
  return {
    cancel: true,
  };
}

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

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

function callback(requestDetails) {
  console.log(requestDetails);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        cancel: true,
      });
    }, 3e3);
  });
}

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

重定向网络请求

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

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

function callback(requestDetails) {
  console.log(requestDetails);
  return {
    redirectUrl: 'https://bing.com',
  };
}

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

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

function callback(requestDetails) {
  console.log(requestDetails);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        redirectUrl: 'https://bing.com',
      });
    }, 3e3);
  });
}

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

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

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

1
2
3

{
  "web_accessible_resources": ["popup/index.html"]
}

function callback(requestDetails) {
  console.log(requestDetails);
  return {
    redirectUrl: browser.runtime.getURL('popup/index.html'),
  };
}

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