猫抓CatCatch浏览器插件：网页媒体嗅探与资源抓取完全指南

简介：猫抓（CatCatch）是一款面向Chrome、Edge等Chromium系浏览器的开源视频嗅探与下载扩展，适合需要抓取网页中M3U8、MP4、FLV等流媒体资源的前端开发者、运维人员及视频处理爱好者。资源包共74个文件，528KB，以JavaScript脚本为主（29个js），覆盖核心解析、后台通信、内容注入等模块；另含界面相关的HTML/CSS、图标PNG及配置文档，整体工程结构完整，便于二次开发。压缩包内含cat-catch-master主工程，代码按解析引擎、平台适配、UI渲染、下载调度等模块划分，并内置多语言与Firefox适配文件。目前已有248人学习浏览，适合希望研究浏览器扩展机制、掌握视频资源嗅探原理或直接部署该插件的读者。通过源码可学习Manifest V3权限配置、M3U8合并策略、请求头模拟及断点续传等实现思路，快速上手自定义下载规则。

1. 猫抓（CatCatch）到底是干嘛的——先从我的一次“被逼疯”说起

前阵子帮朋友做一个产品宣传页，对方发来一个参考站点，说里面有一段视频素材，放在首页会很有质感。我打开页面看了看，效果确实不错，但整个视频藏得很深——右键没有任何下载选项，打开开发者工具翻网络面板，里面全是各种接口请求，找了半天也没定位到真正的视频地址。折腾了大概半小时，我装上猫抓（CatCatch）这个谷歌插件，点开图标，资源列表里直接躺着一条 MP4 文件，点一下就开始下载了。那一刻我才真正意识到，这类媒体嗅探工具的价值不在于代码多复杂，而在于它恰好卡在你最需要的地方。

猫抓本质上是一款浏览器媒体嗅探扩展，主要运行在谷歌浏览器上，同时也兼容大多数 Chromium 内核的浏览器，比如 Edge、百分浏览器、360极速这类。它做的事情很纯粹：分析当前标签页里所有的网络请求，从中筛选出图片、音频、视频等媒体文件，然后在插件面板里生成一个清晰可见的资源列表，让你不需要翻源码、不需要敲命令，就能直接拿到媒体文件的原始链接，甚至一键下载到本地。

什么人适合用这个插件？我自己的经验是分三类。第一类是前端开发者和产品经理，经常需要找参考图、占位视频、临时配音，又不想为了一个素材专门去开付费网站会员；第二类是剪辑师和自媒体运营，平时要整理视频封面、背景音乐，或者需要从自己上传过的平台页面里找回原始文件，猫抓能省掉很多“重新下载”的麻烦；第三类就是普通用户，在网页上看到一张喜欢的图片或者一段想收藏的音频，却发现右键菜单被禁用了，这时候猫抓可以直接绕开限制，把资源暴露出来。

下面我按自己的使用习惯，从安装配置、核心功能、实际场景到问题排查，完整走一遍。文章里涉及的操作我都实打实跑过，踩过的坑和对应解法也一并写出来，希望能帮你少走弯路。

2. 从“嗅探”到“抓取”：猫抓的工作原理拆解

2.1 浏览器扩展为什么能抓到网页资源

很多第一次用的人会好奇，为什么一个浏览器插件能“看见”页面背后的资源？其实原理不难理解。现代浏览器在处理网页时，会发出大量的网络请求，包括页面本身、图片、接口数据、视频分片、音频流等等。这些请求默认是“跑在浏览器内部的”，普通用户看不到，但浏览器扩展可以通过官方提供的扩展 API 去监听这些请求。

猫抓就是在这一步做文章的。它注册了一个网络监听器，每当页面发出新的请求，它就会把请求的 URL 拿过来做一轮判断。判断的依据很简单：看 URL 的后缀名或者响应的 Content-Type 是不是常见的媒体格式，比如 .mp4、.mp3、.png、.jpg、.webp，以及流媒体常见的 .m3u8 和 .ts。如果符合条件，就把这条记录塞进插件的资源列表里，并标注类型和大小。

用一个生活化的类比来说，页面加载时网络面板就像一条传送带，上面跑着各种包裹。普通用户只能看到最终堆好的货架（也就是渲染出来的网页），而猫抓相当于在传送带旁边装了一个分拣机器人，只要看到“视频”或“音频”标签的包裹，就单独挑出来放在旁边给你看。这就是“嗅探”的整个逻辑。

2.2 页面里哪些资源能抓到、哪些抓不到

知道原理之后，你就很容易理解猫抓的能力边界了。凡是页面直接通过 HTTP 请求加载的媒体文件，理论上都可以被嗅探到。这包括你直接看到的 MP4 视频、MP3 音频、各种格式的图片，以及部分用 HLS 协议播放的流媒体视频。

但也有几种情况是猫抓无能为力的。第一种是加密媒体，某些视频平台使用了 Widevine 或其他 DRM 加密方案，视频数据本身是加密的，猫抓能嗅探到请求，但拿到的东西只是一堆无法播放的密文，这种基本可以放弃。第二种是采用 WebSocket 或二进制帧传输的实时流，这类数据不走常规的 HTTP 文件请求，扩展很难拦截。第三种是全部走 JavaScript 动态生成但已经渲染进 Canvas 的内容，比如某些在线设计工具里的画布，那已经不是传统意义上的媒体文件了。

明白这些边界很重要。很多人装了插件以后到处试，遇到抓不下来的内容就开始怀疑插件坏了，其实不是插件的问题，而是页面本身的播放机制决定了他抓不到。我自己的原则是：猫抓解决的是“看得见但下载不了”的问题，解决不了“被加密保护”的问题。

3. 装好猫抓并让它跑起来：安装与配置全程记录

3.1 应用商店安装的正确姿势

安装猫抓最省事的方式当然是从 Chrome 网上应用店直接装。打开扩展商店页面，搜索 CatCatch 或者猫抓，确认开发者信息无误后点“添加到 Chrome”，浏览器会自动完成下载和启用。装完之后，工具栏会出现一个猫爪形状的图标。

这里想提醒一句：Chrome 应用商店里偶尔会出现同名但属于其他开发者的扩展，装之前看一下评分、评论数以及最近更新时间。猫抓这个项目本身已经比较成熟，评分和用户量都很可观，优先认准用户评价比较好的那个版本。装好之后建议点一下扩展图标，确认弹出来的界面是中文、界面干净的版本，避免装到套壳带广告的仿冒品。

装完以后，建议顺手做两件事。第一件事：右键点击工具栏里的猫抓图标，选择“固定到工具栏”。否则图标会被藏在扩展菜单里，每次使用都要多点一步，很影响效率。第二件事：进入插件的设置页，把“自动嗅探”或“开启自动捕获”这个开关保持打开状态。这个开关的作用是让猫抓在浏览每个页面时自动开始监听网络请求，如果关掉了，你就得手动在插件面板里点“开始嗅探”，容易漏掉页面加载早期的资源。

3.2 手动安装与离线部署的完整步骤

有些情况下你没法直接访问应用商店，比如公司内网环境、浏览器版本过旧，或者你想用一个固定的离线版本。这时候就需要手动安装。下面是我实际操作过的步骤：

第一步，先从可靠的来源下载扩展的 .crx 文件或者解压后的文件夹。猫抓的官方发布渠道是 GitHub Releases 页面，下载压缩包后解压到一个固定目录。

第二步，打开谷歌浏览器的扩展管理页，地址栏输入chrome://extensions回车。右上角打开“开发者模式”开关。

第三步，如果下载的是 .crx 文件，直接把文件拖进扩展管理页面，浏览器会弹窗询问是否添加，确认即可。如果下载的是解压后的文件夹，点击左上角“加载已解压的扩展程序”，选中那整个文件夹。

第四步，浏览器可能提示“不支持此类扩展”或“请停用开发者模式下的扩展”，这是因为 Chrome 对于未上架商店的扩展有安全限制。应对方法有两个：一是直接用解压文件夹加载，通常更稳妥；二是在加载时保证扩展目录里的manifest.json文件版本和浏览器兼容。

手动安装的重点是保留好解压目录，不要删掉，否则扩展会失效。而且浏览器每次启动可能弹一次“请停用以开发者模式运行的扩展程序”提示，影响不大，点“取消”就好。

3.3 设置项里值得调的几个参数

猫抓的设置面板不算复杂，但有几个参数需要按自己的习惯调一下。

第一个是“保存目录”。如果用来批量下载素材，强烈建议在浏览器下载设置里指定一个专门的文件夹，比如F:\catcatch，避免素材和日常下载文件混在一起，找起来费劲。

第二个是“最大捕获数量”。默认值如果太低，打开一个图片很多的长页面时，列表可能只显示前几十条，后面的就漏了。我一般调到 500 以上，反正是本地列表，不占什么开销。

第三个是“自动下载”开关。这个我不建议全局打开，因为有些页面会一次性嗅探出几十个文件，全自动下载会瞬间塞满磁盘。我通常保持关闭，手动勾选，需要批量的时候再临时打开。

第四个是“文件类型过滤”。配置里可以勾选默认显示哪些类型，我只留了视频、音频、图片这三类，像字体文件、文档压缩包这些非核心资源就不让它出现在主列表里，界面会清爽很多。

4. 核心功能实操：从普通页面抓取资源的完整流程

4.1 资源列表怎么看、怎么读

打开任意一个包含媒体文件的网页，点一下工具栏的猫抓图标，插件面板会弹出当前页面的捕获列表。列表上方通常会有类型筛选按钮，分“全部”“图片”“音频”“视频”这几类。每一行记录会显示文件名、文件大小、资源 URL，以及一个下载按钮和一个复制按钮。

要注意的是，列表是动态刷新的。比如一个视频页面，刚打开时你可能只看到一条.m3u8的索引文件，等播放进度往前走了，才会陆续出现.ts分片。所以正确的操作顺序是：先打开页面并触发媒体加载，再点开猫抓面板看列表，最后针对目标文件操作。

下载的时候有几个细节值得留意。猫抓默认调用浏览器的下载机制，所以下载记录会出现在浏览器的下载管理器里。下载完成后，右键下载记录可以“在文件夹中显示”，直接定位到文件。如果你想保存的是资源链接而不是文件本身，可以点复制按钮，把 URL 贴到迅雷、IDM 等下载工具里用多线程下载，速度往往比浏览器自带的下载快不少。

4.2 过滤器、排序与后台行为的正确玩法

猫抓的列表看起来简单，但配合过滤和排序能玩出很多花样。我常用的一个方式是：在长图站收集素材时，点开插件面板，切到“图片”标签，然后把列表按大小排序。这样就能快速筛出页面里那些高分辨率的大图，把它们挑出来批量下载，小图标、按钮背景图自然就被过滤掉了。

再比如收集背景音乐的时候，切到“音频”标签，按文件名排序，把页面里所有.mp3文件统一勾选下载。配合前面设置的专门保存目录，一个页面的音频素材十几秒就能整理完，比手动在元素面板里一条条找 URL 高效得多。

后台行为方面，猫抓还有一个“在新标签页打开”的选项。如果你不想让插件面板一直悬浮在当前页面上，可以点面板右上角的弹出窗口按钮，把捕获列表放到独立的窗口里。这样你就可以一边正常浏览页面触发资源加载，一边在独立窗口里盯列表变化，互不干扰。这个功能在调试视频播放器时特别好用——你可以同时操作播放器进度条和观察新出现的分片请求。

4.3 视频分片（m3u8）处理的实操经验

在视频站点上使用猫抓，最常遇到的其实不是单个 MP4 文件，而是一堆.m3u8索引文件和.ts视频分片。遇到这种情况，新手容易犯的错误是直接把第一个.ts分片下载下来，结果发现只有几秒钟的内容。

正确做法是优先找.m3u8文件。这个文件本质上是一个播放列表，里面记录了所有视频分片的 URL 和顺序。猫抓抓到.m3u8文件后，虽然不能直接把它作为一个视频文件保存，但你可以把它的 URL 复制出来，交给支持 HLS 下载的工具去处理。比如电脑上装了 IDM 或者 FFmpeg，就能通过这个链接把所有分片拉下来并合并成一个完整的 MP4 文件。命令行大致是这样：

ffmpeg -i "https://example.com/path/to/playlist.m3u8" -c copy output.mp4

当然，如果站点播放的是单文件 MP4，猫抓面板里直接就能看到一条完整的记录，不用这么麻烦。区分方式是看文件后缀：.m3u8是索引文件，.mp4、.webm是完整的媒体容器文件，.ts是切片文件。我个人遇到.m3u8时很少用猫抓直接下载，都是复制链接走 FFmpeg，遇到加密的 m3u8（包含#EXT-X-KEY标签）那还需要单独处理密钥，这里先不展开，后面问题排查部分再细说。

4.4 跨页面捕获与会话保留技巧

猫抓的资源列表是跟当前标签页绑定的。你从 A 页面切换到 B 页面，列表就会跟着变成 B 页面的资源。但如果你在 A 页面加载了一份很久的音频，切走之前忘了下载，再切回来时列表可能已经被刷新了。

解决办法有两种。一种是开着独立弹出窗口，这个窗口不会因为页面切换而清空。另一种是抓紧时间下载，因为列表刷新并不代表历史记录立刻消失，有时候还有一些时间窗口，但为了保险起见，建议对当前页面资源“看上就存”，不要攒着。

猫抓近期版本还支持跨标签页的历史记录回溯。你可以点开设置里的“历史记录”或“最近捕获”入口，查看之前访问过的页面的捕获记录。这个功能对找回意外丢失的资源特别有用。不过历史记录保存在本机，如果你清理了浏览器缓存或者扩展数据，记录也会跟着清除，所以重要资源还是尽早下载下来。

5. 我在真实项目里用猫抓的几个场景

5.1 前端开发：快速收集落地页的媒体素材

做前端页面的时候，我最头疼的就是“参考图找到了但下载不了”。客户发来一个竞品网站说“首页这个 banner 感觉挺好的，照着这个风格改一版”，结果你打开那个网站，banner 图片居然是背景图，右键菜单干干净净，甚至图片都被切成好几块，直接右键保存只能拿到一个小碎片。

猫抓在这种场景下太好用了。打开竞品页面，点插件图标，切到图片标签，所有图片资源都在列表里。按文件大小排个序，最大的那张往往就是主视觉 banner。把它下载下来，放进自己的素材库，再结合 PS 或者稿定这些工具做二次创作，整个流程不到两分钟。

另外一个高频场景是取视频背景。不少网站首页会放一段自动播放的短视频当背景，这些视频通常也是 MP4 文件。直接嗅探下载，然后放到自己的演示 demo 里做同样效果，省去了去视频素材站找素材的环节。

5.2 内容创作：整理封面图、背景音乐和字幕文件

做自媒体的朋友应该深有体会，同一个视频可能需要在多个平台分发，每个平台的封面尺寸要求还不一样。有时候你之前做的封面原文件没了，只剩下平台页面上压缩过的版本。这时候猫抓就能派上用场——打开你作品的发布页面，点插件，把封面原图重新抓回来，省得重新做一张。

背景音乐的收集也是一个场景。很多创作者会在参考视频里听到一首很契合主题的背景音乐，网页播放器加载时，音频文件会被请求一次，猫抓这会捕捉到。虽然不一定能直接拿到无损音质，但对于前期定调和参考来说完全够用。

如果你的视频带字幕，也可以通过猫抓拿到.srt或.vtt字幕文件。这个操作在整理课程资料、做双语对照时特别方便。抓到字幕文件后，用文本编辑器打开，就能批量替换或排版。

5.3 找回自己上传过的设计文件

这个问题我自己遇到过一次：早期做设计练习时，在某素材平台上传了一套 PNG 图标，然而本地硬盘格式化后文件全没了。当时我以为只能重新做，后来突然想到那个平台页面上展示过高清预览图，于是装上猫抓打开自己的作品主页，把所有预览图完整抓了一遍。虽然精度和原始工程文件有差距，但至少保住了大部分视觉内容，省去了重画的痛苦。

类似的操作也适用于公众号配图、知乎回答里的图片等场景。只要是你自己上传过的内容、或者公开发布的素材，用猫抓拿回原图，本质上是找自己的历史资源，并不涉及什么版权风险。当然，抓取别人的付费素材用于商业项目，那就有问题了，这个一定要守住底线。

6. 常见问题与排查实录：亲测有效的解决方案

6.1 页面上明明有视频，插件却什么都没抓到

这个是我收到过最多的反馈。原因通常出在以下几个方面，我按出现频率排一下：

第一，页面的视频是延迟加载的，猫抓监听的时间太早。解决方法：先把页面往下滚动、让视频进入可视区域，或者直接点击播放按钮，然后再打开猫抓面板。第二，插件图标是灰色的，说明在当前页面上没有启用权限。解决方法：点击图标，在弹窗里确认“在此站点启用”或“允许访问此网站”。第三，视频走的是加密链路，猫抓嗅探到了请求但无法解析。这种就只能换思路，比如直接在页面源码里找视频 ID，再去对应平台接口拿流地址。

6.2 抓到的链接可以打开，但下载的文件无法播放

一种常见情况是下载的是.m3u8索引文件，这个文件本身不是视频，你用播放器直接打开当然播放不了。解决方案就是我们前面说的，用 FFmpeg 或者专门的 HLS 下载工具处理。另一种情况是抓到的文件其实是“分段请求”的一部分，单条.ts分片只有几秒钟，自然没法当完整视频用。这种情况要回到列表里优先选择.m3u8，或者找后缀是.mp4的记录。

还有一种情况比较隐蔽：某些站点用防盗链机制，文件下载到本地后因为缺少请求头信息，播放器无法正常解码。解决办法是用带 Referer 或 User-Agent 头的下载工具，比如 IDM、curl 手动加头部命令，而不是直接用浏览器默认下载。

curl -o video.mp4 -H "Referer: https://example.com" -H "User-Agent: Mozilla/5.0" "https://example.com/video.mp4"

6.3 猫抓和其他扩展冲突，导致按钮失灵

浏览器同时装了很多扩展时，偶发问题确实会出现。常见的表现是：猫抓图标能点开，但列表永远为空，或者点击下载没反应。排查思路很简单，先禁用其他媒体类或网络类扩展，刷新页面再试。我遇到过一次和“广告拦截类”扩展的冲突，广告拦截会把部分媒体请求给过滤掉，导致猫抓什么都没看到。

另外一个容易忽略的点是浏览器的“安全下载”模式。Chrome 对未知来源的下载会弹确认窗口，如果浏览器版本比较新，下载弹窗可能被自动拦截，造成“点了下载按钮却没反应”的错觉。解决办法是留意浏览器窗口右下角是否有拦截提示，手动允许即可。

6.4 批量下载时文件重名，导致后续文件被覆盖

批量下载图片时，如果页面里多张图的文件名相同（不同目录下同名），浏览器下载时通常会变成xxx (1).jpg、xxx (2).jpg，一般问题不大。但如果文件名完全相同且浏览器合并到同一个目录，就有可能出现覆盖。对策是下载前把时间颗粒调高，或者干脆用专门的下载工具接管，让它在文件名后面加时间戳，这样能有效避免覆盖。

6.5 插件更新后列表界面变了，功能找不到了

浏览器扩展经常自动更新，猫抓也会隔段时间更新一次版本。有次我更新后发现原来的“历史记录”按钮被挪到了二级菜单，一时间没找到。这种情况不一定是 bug，建议更新后去设置页看一眼 changelog 或者界面变化说明，多数新版本只是调整了入口位置。

7. 最后再分享一个自己常用的工作流

这篇文章写到这里，核心功能和使用细节基本都过了一遍。最后想再分享一套我个人比较习惯的素材收集工作流，算是一个完整的串联示范。

我平时在电脑上建了一个固定目录E:\MediaPicker，里面再分三个子目录：images、audio、video。装好猫抓后，我在浏览器设置里把默认下载目录指到E:\MediaPicker\downloads，然后在猫抓设置里开启“下载完成后打开文件夹”的选项。这样每次抓取素材后，我都能立刻在资源管理器里看到结果，直接移动归档到对应的子目录。

遇到 m3u8 视频流的时候，我通常不经过浏览器下载，而是把链接复制到一个固定的文本文件里，攒到几个后一起用 FFmpeg 批量处理。这个习惯帮我节省了大量“等下载再转码”的时间，也让抓素材这件事变得更有节奏感。

说句实在话，这类嗅探工具的边界很清楚：它不生产资源，也不解锁权限，只是把你本来就应该看到、能拿到的媒体链接呈现出来。用好它，核心还是“内容合法性”四个字——收集参考素材、找回自己的历史文件、整理公开渠道的资源，这些都是非常正向的使用场景。如果反而用来对付付费订阅内容或者加密资源，那不仅是浪费了工具的方便性，还容易给自己惹麻烦。保持分寸，它就是一个日常顺手的效率小工具，能帮你省下很多零碎时间。

本文还有配套的精品资源，点击获取