基于WXT开发chrome插件教程(二):流量的抓取

admin 2024年2月22日18:47:11评论41 views字数 2449阅读8分9秒阅读模式

增加权限

要实现抓取网站的请求链接,需要考虑使用到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.     );

实现的效果如下:

基于WXT开发chrome插件教程(二):流量的抓取

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

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. }

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

原文始发于微信公众号(YY的黑板报):基于WXT开发chrome插件教程(二):流量的抓取

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2024年2月22日18:47:11
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   基于WXT开发chrome插件教程(二):流量的抓取https://cn-sec.com/archives/2516449.html

发表评论

匿名网友 填写信息