简介猫抓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.mp46.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 批量处理。这个习惯帮我节省了大量“等下载再转码”的时间也让抓素材这件事变得更有节奏感。说句实在话这类嗅探工具的边界很清楚它不生产资源也不解锁权限只是把你本来就应该看到、能拿到的媒体链接呈现出来。用好它核心还是“内容合法性”四个字——收集参考素材、找回自己的历史文件、整理公开渠道的资源这些都是非常正向的使用场景。如果反而用来对付付费订阅内容或者加密资源那不仅是浪费了工具的方便性还容易给自己惹麻烦。保持分寸它就是一个日常顺手的效率小工具能帮你省下很多零碎时间。本文还有配套的精品资源点击获取
猫抓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.mp46.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 批量处理。这个习惯帮我节省了大量“等下载再转码”的时间也让抓素材这件事变得更有节奏感。说句实在话这类嗅探工具的边界很清楚它不生产资源也不解锁权限只是把你本来就应该看到、能拿到的媒体链接呈现出来。用好它核心还是“内容合法性”四个字——收集参考素材、找回自己的历史文件、整理公开渠道的资源这些都是非常正向的使用场景。如果反而用来对付付费订阅内容或者加密资源那不仅是浪费了工具的方便性还容易给自己惹麻烦。保持分寸它就是一个日常顺手的效率小工具能帮你省下很多零碎时间。本文还有配套的精品资源点击获取
