基于WXT开发chrome插件教程（二）：流量的抓取

增加权限

要实现抓取网站的请求链接，需要考虑使用到chrome.webRequestAPI，具体可参见：[[https://developer.chrome.com/docs/extensions/reference/api/webRequest?hl=zh-cn]]
为了使用这个API，需要声明使用webRequest权限，在原生框架中需要在manifest.json中进行定义，在WXT框架中需要修改wxt.config.ts文件，如

export default defineConfig({
    manifest: { 
        permissions: ['webRequest'], 
    }, 
});

增加后重新编译运行，在编译产生的manifest.json可以看到权限已经完成了添加

"permissions": [
    "webRequest",
    "tabs",
    "scripting"
],

注：
从 Manifest V3 开始，大多数扩展程序都不再提供 "webRequestBlocking" 权限。请考虑使用 "declarativeNetRequest"，它支持使用 declarativeNetRequest API。除了 "webRequestBlocking" 之外，webRequest API 保持不变，仍可正常使用。符合政策的扩展程序可以继续使用 "webRequestBlocking"。
这个也可以实现对流量的修改，需要增加相应的权限，并且可以更加细化不同网站的修改策略，引入了规则文件
首先依然是增加权限：

manifest: {
    "permissions": [
        "declarativeNetRequest",
        "declarativeNetRequestWithHostAccess",
        "declarativeNetRequestFeedback"
    ],
    "host_permissions": ["<all_urls>"],
}

定义一些json格式的规则，这些规则会匹配所有的网络请求，并遵从这些规则做相应处理。匹配规则有静态规则和动态规则两种。
规则文件形式如下：

1. [
2.   {
3.     "id": 1,
4.     "priority": 1,
5.     "action": { "type": "allowAllRequests"}, //允许所有请求
6.     "condition": {
7.       "urlFilter": "*", //抓取所有请求
9.       "resourceTypes": ["xmlhttprequest"],//只抓取XHR请求
10.     }
11.   }
12. ]

对关键的配置进行解释如下：

• action：

• type是必填参数，参数只有："block"（拦截请求）, "redirect"（重定向请求）, "allow"（允许请求）, "upgradeScheme"（升级请求）, "modifyHeaders"（修改请求头）, 或"allowAllRequests"（允许所有请求）。

• redirect：选填，只有操作类型为redirect时才可填，描述应该如何执行重定向

• condition：

• domains：匹配域名列表，如省略则匹配所有域名的请求

• requestMethods：http匹配请求方法（"get"、"post"等）列表，如省略则匹配所有请求方法。

• resourceTypes：匹配资源类型（"main_frame"、""xmlhttprequest"等）列表，如省略则匹配所有请求类型。

• urlFilter：匹配网络请求的url

抓取请求链接

这里仍然使用webRequest对流量进行抓取获取浏览器的访问请求，其实模拟的是和devtool中的网络功能
下面采用API来实现：获取请求访问前的url地址，通过console打印出来
代码很简单，监听请求，然后把url打印出来：

1. browser.webRequest.onBeforeRequest.addListener(
2.       (details) => {
3.         console.log(details.url);
4.         return { cancel: false };
5.       },
6.       { urls: ["<all_urls>"] },
7.       ["requestBody"]
8.     );

实现的效果如下：

在控制台中可以获取到流量了，为了后续的请求修改，增加流量类型的判断，并且将打印函数单独出来，将代码修改下：

1.     browser.webRequest.onBeforeRequest.addListener(
2.       // (details) => {
3.       //   console.log(details.url);
4.       //   return { cancel: false };
5.       // },
6.       (details) => XSSCan(details),
7.       { 
8.         urls: ["<all_urls>"],
9.         types:["xmlhttprequest","main_frame","sub_frame",]
10.       },
11.       ["requestBody"]
12.     );
13.  });

15. function XSSCan(details: any){
16.   console.log(details.url)
17. }

此时就会减少很多资源类型的连接干扰。