Chrome 请求过滤扩展实现

引子

接着 Chrome 扩展 : 入门，接下来开始实现一开始自己的想法：网络请求过滤。简单的说就是监听某个网站的所有请求，把想要的请求在扩展插件中展示出来。扩展名为 Capture Request 。

• Origin
• My GitHub

需求具体化

上面的想法比较模糊，为了达到这个目的，结合文档的示例，要做的有：

1. 扩展要有对应的图标及提示。
2. 点击工具栏扩展图标，打开一个新的 Tab 页面，用来展示请求的相关信息。
3. 扩展监听处于激活 Tab 的网站请求，可以配置过滤监听的网址。
4. 对监听的请求，支持根据 url 筛选并导出。

有些功能不方便直接在文档找到，这个时候，建议在 Chrome 商店找一个开源扩展，根据效果看里面用的一些 API ，然后找到对应文档。这里参考了 FeHelper 里面的一些实现。需要注意到是 FeHelper 开发基于 manifest_version 版本为 2 ，以下开发扩展基于的版本是推荐的版本为 3 ，完整代码见 Capture Request 。

实现

图标相关信息配置

按照入门里面介绍的信息，图标可能出现的地方有工具栏、扩展管理页、权限警告和 favicon 上，在 manifest.json 中配置的下面相关字段：

{
   
  "name": "Capture Request",
  "description": "Capture Request",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
   
    "default_icon": {
   
      "16": "xxx.png",
      "32": "xxx.png",
    }
  },
  "icons":{
   
    "16": "xxx.png",
    "32": "xxx.png",
  }
}

什么尺寸图标用在什么地方的详细说明在这里，文档上推荐用 PNG 的图片格式。按照这个来，发现有的图标太小了会看起来明显模糊，也可以用比较大的尺寸，Chrome 会自己把图片压缩到需要的尺寸。

点击扩展打开新 Tab 页面

在入门里面点击扩展的展现形式是打开了一个弹窗，在文档 Design the user interface 中介绍的形式有 Popup 、Tooltip、Omnibox、Context menu、Override pages ，最有可能就是 Override pages ，但试了一下发现没有效果，于是去看别人的实现，发现可以通过监听点击图标事件打开新 Tab 。

但看似可以直接用的 API ，实际上还有下面几点要考虑：

1. 在哪里监听这事件？
2. 什么时候监听这个事件？
3. 怎么打开新 Tab ?
4. 是否需要权限，如果需要，涉及那些权限？

在