网络请求监控扩展：不再错过任何请求！

2023-10-24 02:15:36

前言：扩展程序概览

在深入了解 webRequest API 之前，我们先来简单了解一下 Chrome 扩展程序。Chrome 扩展程序是一种小型软件，可以添加到 Chrome 浏览器中，以自定义浏览体验。扩展程序可以执行各种任务，例如拦截网络请求、修改网页内容、添加新的工具栏按钮等。

webRequest API 简介

webRequest API 是一个提供对 Chrome 网络请求的低级别访问的 API。它允许扩展程序监听、修改和重定向请求。webRequest API 非常强大，但它也比较复杂。在使用它之前，您需要了解一些基本概念。

请求阶段： webRequest API 将请求分为几个阶段，包括 onBeforeRequest、onBeforeSendHeaders、onSendHeaders、onHeadersReceived、onResponseStarted、onCompleted 和 onErrorOccurred。这些阶段代表了请求的各个步骤，从发出请求到收到响应。
请求对象： webRequest API 提供了一个 webRequest.Request 对象，用于表示请求。该对象包含有关请求的所有信息，包括 URL、请求头和请求正文。
响应对象： webRequest API 还提供了一个 webRequest.Response 对象，用于表示响应。该对象包含有关响应的所有信息，包括状态代码、响应头和响应正文。

创建网络请求监控扩展

现在，我们已经了解了 webRequest API 的基础知识，让我们开始创建自己的网络请求监控扩展。

1. 创建扩展程序清单文件

首先，我们需要创建一个扩展程序清单文件（manifest.json）。该文件告诉 Chrome 扩展程序的基本信息，包括名称、版本、权限等。

{
  "name": "Network Request Monitor",
  "version": "1.0",
  "description": "Monitor network requests in Chrome.",
  "permissions": [
    "webRequest",
    "webRequestBlocking"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

2. 创建扩展程序脚本文件

接下来，我们需要创建一个扩展程序脚本文件（background.js）。该文件包含扩展程序的业务逻辑。

// 监听所有网络请求
chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    console.log(details.url);
  },
  {urls: ["<all_urls>"]},
  ["blocking"]
);