网页资源嗅探工具终极上手指南：跟着猫抓Cat-Catch完成一次视频离线缓存
项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 猫抓Cat-Catch是一款开源的网页资源嗅探工具，它的核心本事只有一件：把网页里藏着的视频、音频、图片等资源一件件揪出来，让你一键离线保存。这篇文章不打算堆砌功能清单，而是带你跟着一次"想缓存学习视频却下载不动"的真实经历，把这款扩展从原理、安装到进阶玩法完整走一遍。
一、痛点开场：为什么你的浏览器"看不见"视频在哪
你一定遇到过这种场景：刷到一个干货满满的课程视频，想离线缓存到本地慢慢看，可页面右键没有下载入口，抓包工具又太硬核，最后只能对着屏幕干瞪眼。问题出在哪？因为现代网页里的资源从来不是"躺在"页面上的，而是由 JavaScript 动态请求回来的——视频文件可能被切成几百个小碎片，也可能经过加密处理，浏览器自己并不负责"告诉你它下载了啥"。
猫抓Cat-Catch 解决的正是这个信息差。它像一个蹲守在浏览器后门的"资源侦探"，把每一个进出的网络请求都登记在案，再从中筛出值得下载的媒体文件交给你处理。它不侵入任何服务端，也不触碰网站数据，一切判断都在你的浏览器本地完成，这也是它敢标榜"轻量且安全"的底气。
二、它凭什么能"看见"资源：三层侦察原理拆解
要理解猫抓为什么好用，先得知道它是怎么"看见"资源的。归纳起来，它的侦察手段分三层：
2.1 第一层：给浏览器的请求通道装"窃听器"
页面发起下载动作，无非走两条路：XMLHttpRequest 和 Fetch API。猫抓在页面加载早期就通过 catch-script/catch.js 里的 CatCatcher 类重写了这两套原生接口——你可以理解为在电话线上并联了一个录音机：请求正常发出，但内容会被顺手抄录一份用于分析。它还会根据 MIME 类型（video/、audio/、image/*）和文件扩展名做初步筛选，普通请求直接放行，只有"嫌疑资源"才进入候选名单。
// 捕获开关与媒体名单（简化示意）
this.enable = true; // 是否开启嗅探
this.catchMedia = []; // 已经捕获到的媒体列表
2.2 第二层：盯住 MediaSource，专治流媒体
如今很多视频网站走的是 MSE（Media Source Extensions）路线，视频不是整段下载，而是以分片形式持续喂给播放器。猫抓对 MediaSource 相关方法做了代理，等于在"水管"的每一节接头都放了传感器，流进来的每一个分片都被记录。这一层是它能识别 HLS、DASH 这类分段流的关键。
2.3 第三层：iframe 里的"漏网之鱼"也不放过
视频常被嵌在 iframe 子页面里，有些站点还给 iframe 加了 sandbox 属性，导致脚本无法深入。猫抓在 catch.js 里专门处理了这种情况：它会克隆并替换带 sandbox 的 iframe 节点，同时用 MutationObserver 持续监听新增节点，保证后加入页面的播放器也能被及时"盯上"。
三、装进浏览器，三条路径任选
猫抓的安装方式有三条，按使用场景对号入座即可：
| 安装方式 | 适合人群 | 操作要点 |
|---|---|---|
| 应用商店安装 | 绝大多数普通用户 | 官方商店搜索 "cat-catch"，点安装即用，自动更新 |
| 源码加载 | 开发者、想改代码的人 | 需开启浏览器开发者模式，加载解压目录 |
| CRX 离线包 | 内网环境、批量部署 | 下载 crx 文件拖入扩展管理页 |
三条路径的具体操作都不复杂：
- 商店安装：Chrome Web Store、Edge 加载项均有官方上架版本；Firefox 附加组件也可用，但访问需注意网络环境。
- 源码安装：先把仓库克隆到本地（
git clone https://gitcode.com/GitHub_Trending/ca/cat-catch），再到扩展管理页打开"开发者模式"，点击"加载已解压的扩展程序"选中项目目录即可。 - CRX 部署：从 Releases 页面右键另存为 crx 文件，然后拖进扩展管理页面，适合没有外网、需要统一分发内网的团队。
有一点要提醒你：这个项目是开源的，市面上已经出现不少"伪猫抓"——把广告代码塞进原版再重新上架的山寨扩展。认准官方发布渠道安装，别贪图来路不明的安装包。
四、第一次实战：从点击图标到文件落盘
装好之后，打开任意一个带视频的网页，点击工具栏里的猫抓图标，弹出的就是这个工具的"指挥中心"。
这个弹出面板（popup.html）的核心信息一目了然：
- 顶部标签区分"当前页面"和"其他页面"，跨页面资源也能统一管理；
- 中间的媒体列表展示每个资源的文件名、大小、类型，点击任意一条还能看到分辨率、时长等详情；
- 底部一排按钮负责"收尾"：下载所选、复制链接、全选、清空，一应俱全。
一个很实用的能力是"预览"：下载前先点播放按钮确认内容，避免下错文件。配合"模拟手机"功能，你还能让页面以移动端 UA 重新加载，很多在 PC 端"藏得深"的资源在移动版页面反而会乖乖现身。
日常使用的完整动线其实只有四步：打开页面 → 点击图标看列表 → 勾选目标 → 下载。整个流程不超过十秒，完全不需要碰开发者工具。
五、啃下流媒体硬骨头：m3u8 与 DASH 的完整处理链路
如果嗅探到的只是普通 mp4，那属于"简单模式"。真正的挑战是流媒体：视频被切成几十上百个 ts 分片，外加一份 m3u8 播放清单，直接下载只会得到一堆碎片。猫抓为此内置了专门的解析页（js/m3u8.js 驱动），把整条链路打通。
整条处理链路可以概括为五步：
- 获取清单：从嗅探结果或网络面板里拿到 .m3u8 地址，粘贴进解析页；
- 自动解析：工具读取清单，列出全部 ts 分片、时长与分辨率；
- 密钥处理：遇到 AES-128 加密的流，支持自动识别密钥，也允许手动填入；
- 分片下载：可调下载线程数，多线程并发把分片拉回本地；
- 合并输出：将碎片合并成完整视频文件，支持重试机制应对网络抖动。
同理，MPEG-DASH 格式由项目集成的 lib/mpd-parser.min.js 负责解析，原理类似：读取 MPD 清单、按码率挑选最优轨道、分段拉取合并。遇到复杂的加密流，猫抓还预留了 FFmpeg 集成通道，可以把任务丢给 FFmpeg 处理，适合需要自定义合并参数的高级玩家。
六、让工具服从你的规矩：自定义规则与性能调优
默认的匹配规则已经覆盖绝大多数场景，但总有"不按套路出牌"的站点。猫抓在设置页（options.html）里提供了自定义空间：
- 自定义扩展名：为特定类型资源追加识别规则；
- 自定义正则：用正则表达式精准匹配 URL 特征，比如只捕获某个域名下的资源；
- 屏蔽名单：把不想捕获的站点加进黑名单，减少干扰。
// 自定义匹配规则示例：只认指定格式的视频
const customPatterns = {
video: /\.(mp4|webm|mkv|flv)$/i,
audio: /\.(mp3|aac|flac|ogg)$/i
};
性能方面有几个顺手就能做的调优点：
- 下载线程数按带宽调节：带宽大可以调高并发，网速一般就调低，避免占满上行；
- 历史记录勤清理：长时间挂着嗅探，捕获列表会越积越长，定期清空可防止内存缓慢上涨；
- 善用快捷键：项目内置了多条命令快捷键，比如一键开启/暂停捕获、触发自动下载、快速唤起 m3u8 解析页，高频操作完全可以键盘搞定。
七、翻车现场：五个高频问题的排查手册
用得多了总会遇到状况，这里把最常见的几类问题整理成排查思路：
| 现象 | 大概率原因 | 建议动作 |
|---|---|---|
| 页面有视频但列表为空 | 页面还没完全加载 | 刷新页面等资源加载完再点图标 |
| 某些站始终嗅探不到 | 站点用了特殊加密或防嗅探 | 尝试"模拟手机"或深搜功能 |
| 下载到一半失败 | 网络波动或分片过期 | 调低线程数，开启重试 |
| m3u8 解析报错 | 清单地址失效或需要特定请求头 | 重新获取地址，必要时手动补 Referer |
| 扩展完全不工作 | 版本过旧或权限异常 | 检查 Chromium 内核是否 93+，确认权限已授予 |
特别提示一条兼容性知识：1.0.17 版本之后，猫抓要求 Chromium 内核 93 以上；想体验完整功能，建议内核版本 104 以上。如果你在用很老的浏览器，不妨先用旧版本过渡。
八、隐私底线与开源生态：为什么它可以放心装
最后聊聊很多人关心的隐私问题。猫抓在隐私政策里写得很直白：所有捕获信息都在本地存储处理，不发送到任何远程服务器，代码里也不含跟踪器。你可以打开扩展管理页查看它申请的权限——集中在 tabs、webRequest、downloads 这些"干活必需"的权限上，没有越界索取。
从生态角度看，这个项目还有几个值得称道的地方：
- 多语言支持：
_locales目录下已内置十余种语言的翻译文件，国际化做得相当完整； - 开放协作：项目采用 GPL-3.0 许可（2.0 版本起），欢迎开发者提交代码、完善文档、补充翻译；
- 版权自律：项目明确尊重站点版权，如果你不希望自己的网站被嗅探，可以通过仓库 Issue 提交"Opt-Out"申请，你的域名会被加入避免抓取列表。
作为使用者，也请守住一条底线：只下载自己拥有版权或已获授权的内容。工具本身是中立的，怎么用它，取决于你的判断。
从"看不见资源"到"一键落盘"，猫抓Cat-Catch 把网页资源嗅探这件技术活变成了点几下鼠标的日常操作。无论是离线缓存学习资料，还是研究流媒体协议，它都是值得留在浏览器里的趁手工具。现在就去装一个，打开你最常访问的视频页面，看看它到底能"嗅"出多少惊喜。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
