Cat-Catch 猫抓：浏览器资源嗅探与 M3U8 流媒体下载的完整实现路径

Cat-Catch 猫抓浏览器资源嗅探与 M3U8 流媒体下载的完整实现路径【免费下载链接】cat-catch猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch猫抓 Cat-Catch 解决的是网页里的视频资源浏览器右键菜单拿不到的问题。它是一款浏览器资源嗅探扩展从列出当前页面加载了哪些音视频这个朴素痛点出发做成了支持 M3U8、MPD 解析合并、缓存捕获、WebRTC 录制的流媒体处理工具——与只弹出一个链接列表的同类嗅探器相比它把拿到资源之后的处理管线作为了一等公民。本文将从架构、功能实现、工程实践三个维度展开。核心架构一条从 webRequest 到下载器的数据流 猫抓的运行形态是 Manifest V3 扩展manifest.json 中声明了service_worker背景脚本、全 URL 的host_permissions以及一个document_start注入所有 iframe 的内容脚本。整体数据流可以拆成四段捕获js/background.js 挂了两个 webRequest 监听——onSendHeaders在请求发出前拿到请求头onResponseStarted在浏览器收到第一个字节时拿到响应头。注释里写得很直白用后者是保证有更多信息判断资源类型。过滤核心函数findMedia依次判断全局开关、屏蔽名单、OPTIONS 请求、发起方是否为特殊页面再用 js/init.js 中定义的默认扩展名表mp4/ts/m3u8…和 MIME 类型表video/*、application/vnd.apple.mpegurl…过滤用户还能加自定义正则做提取或屏蔽。缓存命中的资源按 tabId 写入内存cacheData每页上限 9999 条超出即清空该页缓存由chrome.alarms定时写入存储popup 页面从存储读取渲染。消费资源列表页popup/sidePanel触发下载器、M3U8 解析器、深度搜索等后续功能。架构上最值得看的一处是 Service Worker 保活。MV3 的后台脚本空闲 5 分钟会被浏览器终止而嗅探功能要求它一直活着收请求。项目在 js/background.js 头部用了三层手段// 保活组合拳空监听 Port 心跳 定时 API 调用 chrome.webNavigation.onBeforeNavigate.addListener(function () { return; }); chrome.webNavigation.onHistoryStateUpdated.addListener(function () { return; }); chrome.runtime.onConnect.addListener(function (Port) { if (chrome.runtime.lastError || Port.name ! HeartBeat) return; Port.postMessage(HeartBeat); // 4分10秒后主动断开这条Port留给下次重连 const interval setInterval(function () { clearInterval(interval); Port.disconnect(); }, 250000); Port.onDisconnect.addListener(function () { interval clearInterval(interval); }); }); setInterval(chrome.runtime.getPlatformInfo, 25 * 1000); // 每25秒调一次API自唤醒心跳 Port 由 popup 页面每 30 秒发起一次见 js/popup.js断开后 5 分钟内自动重连。这个机制的容错还体现在findMedia开头SW 被杀后重新唤醒时全局变量尚未初始化它会setTimeout500ms 重试而不是丢弃请求。再看几个关键取舍依据代码与 CHANGELOG选择原因多为项目文档未明确说明的推断决策点采用方案备选方案取舍理由可溯源处嗅探数据存放storage.sessionstorage.localCHANGELOG 2.5.3 写明减少 IO 错误导致扩展无法使用代价是要求 Chrome 104低版本回退 local请求捕获时机onSendHeaders onResponseStartedonBeforeRequest代码注释说明后者能拿到响应头便于按 MIME 类型判断资源保活方式Port 心跳 25s 定时 API仅靠 alarms 定时唤醒alarms 有粒度限制且唤醒后状态需重建Port 连接本身即阻止 SW 休眠注入脚本与扩展逻辑分离独立目录页面注入全部写在 background注入脚本运行在页面上下文如 WebRTC 录制无法直接用扩展 API功能纵切M3U8 合并下载与 WebRTC 录制 M3U8 解析器把切片拉回来拼成完整文件用户场景前端或运维人员在页面里看到.m3u8播放地址但直接打开只是一个播放列表文本几百个.ts切片散落在 CDN 上部分还带EXT-X-BYTERANGE标签——多个切片共用同一个 URL仅字节范围不同。普通下载工具在这里就无能为力了。项目如何介入js/m3u8.js2356 行全项目最大的单文件用 hls.js 解析播放列表支持嵌套 m3u8、HEVC/H265 预览、密钥识别与验证把片段交给 js/m3u8.downloader.js 中的Downloader类。这是一个小型线程池默认 6 线程并发CHANGELOG 2.4.7 记录最大下载线程调整为 6每个片段带index和AbortController失败切片记入errorIndexes供重试2.7.1 增加自动重试。下载完成的数据经sequentialPush按 index 顺序推给合并管线——并发负责速度顺序推送保证拼接正确。对 BYTERANGE 片段的处理就是在请求头里补一个 Range// m3u8.downloader.js字节范围片段用 Range 头定位节选 if (fragment.byteRange fragment.byteRange.length 2) { options.headers { ...options.headers, Range: bytes${fragment.byteRange[0]}-${fragment.byteRange[1] - 1} }; } fetch(fragment.url, options).then(response { const reader response.body.getReader(); // 流式读取可写 fileStream 边下边存否则按块缓存 const { value, done } await reader.read(); fragment.fileStream ? fragment.fileStream.write(new Uint8Array(value)) : chunks.push(value); });此外下载器支持管线式处理use(fn)注册步骤可插入解密、mux.js 转 MP4、发送 aria2 RPC/MQTT/在线 ffmpeg 等输出CHANGELOG 2.7.0 提到数据预处理切片剔除图片数据就是其中一类管线步骤。边界与代价整套解析依赖 hls.js 对播放列表的兼容性结构过于畸形或 DRM 加密深度定制的流项目未承诺能处理从缓存读取 m3u8 解决一次性 URL 问题2.7.0也说明带时效签名的链接需要配合缓存捕获使用。项目文档未给出下载吞吐的基准数据。WebRTC 录制脚本拦截页面上看不见的流用户场景在线课程、视频会议、部分直播站点用 WebRTC 推流页面上没有一个可保存的媒体 URL右键视频另存为无效开发者工具里也只能看到 PeerConnection 而不是文件。项目如何介入catch-script/webrtc.js 是一个页面注入脚本由扩展更多功能菜单触发。它用 closed 模式的 Shadow DOM 把整个录制面板视频/音轨选择、编码格式、码率、起止按钮挂进页面既避开站点样式污染也避免被页面 JS 意外操作。核心录制基于MediaRecorder枚举 PeerConnection 上选中的音视频轨按浏览器支持的 mimeType如video/webm;codecsvp9,opus建立录制支持1 小时保存一次分片落盘防止长录制丢数据。// webrtc.js面板挂进 closed Shadow DOM节选 const divShadow document.createElement(div); const shadowRoot divShadow.attachShadow({ mode: closed }); shadowRoot.appendChild(CatCatch); document.getElementsByTagName(html)[0].appendChild(divShadow);边界与代价前提是页面真正把流跑在可枚举的 RTCPeerConnection 上且浏览器对 WebM/Opus 的编码支持决定成片格式Firefox 下录制脚本在 CHANGELOG 中反复出现修复记录2.6.6、2.6.9稳定性弱于 Chromium 系。录制质量受所选码率上限约束16 Mbps 之外的场景不适用。工程实践观察构建流程项目用 justfile 组织任务链validate → prepare → build-crx / build-zip → release配合crx3工具打 CRX/ZIP 包还有基于 inotifywait 的dev-watch任务做文件变更自动重建。没有打包器、没有 TypeScript源码目录即发布目录——这对一个全原生 JS 的扩展来说是最短路径代价是没有模块作用域隔离全局命名如G、cacheData靠约定维护。依赖管理第三方库全部 vendor 进 lib/ 目录hls.js、mux.js、mpd-parser、StreamSaver.js、MQTT.js、jQuery扩展运行不依赖任何 CDNlib/third-party-libraries.md 登记了来源。这规避了 MV3 对外部远程代码的限制也让离线环境可用代价是升级靠手动替换文件并在 CHANGELOG 里记录如 2.4.6更新 mux m3u8-decrypt mpd-parser 版本。代码组织与 i18n目录边界清晰——js/放扩展上下文脚本background、popup、下载器catch-script/放页面注入脚本缓存捕获、深度搜索、录制两者通过window.postMessage通信。多语言方面 _locales/) 有 10 种语言tools/sync-locales.js 以 en 为基准同步其余语言包翻译更新靠社区 PRCHANGELOG 中频繁出现致谢。测试方面仓库内未见自动化测试套件质量保障主要靠 CHANGELOG 中高密度且带 issue 编号的修复记录如 #528、#531、#610来体现。使用场景与生态位场景一你在调试一个 HLS 点播页面想拿到可离线播放的 MP4 而不是散落的切片——打开 popup 页面点 m3u8 资源进入解析器选码率、定下载范围支持HH:MM:SS时间格式合并后经 mux.js 转封装直接得到完整文件。场景二你要归档一节走 WebRTC 的线上课程——常规嗅探抓不到流地址注入录制脚本选轨、设码率、定时分盘保存是少数能覆盖此场景的开源扩展方案。同类工具对比与常见的视频下载助手类扩展相比后者的侧重是列出网络请求链接、快速保存直链文件猫抓的重心在流协议处理——m3u8/mpd 合并、密钥验证、ffmpeg 转码、aria2/MQTT 外发——功能面更宽但学习成本也更高。运行环境要求Chromium 内核 93manifest 中minimum_chrome_version: 93README 明确要体验完整功能请使用 104 版本以上Firefox 为独立构建manifest.firefox.jsonMV2 模式Edge Android 亦可安装。已知局限浏览器版本门槛明确Chromium 低于 93 无法加载需回退旧版扩展storage.session、侧边栏sidePanel等能力要求 104/114 以上CHANGELOG 2.6.3 记录过 Chromium 114 以下缺 sidePanel 导致扩展不可用的问题。Firefox 是降级形态无侧边栏脚本注入类功能深度搜索、缓存捕获、WebRTC 录制要求 Firefox 128且录制、aria2 RPC 等功能历史上多次出现 Firefox 专项修复表现不如 Chromium 系稳定。部分核心功能自标测试WebRTC 录制、嵌套在线 ffmpeg 等条目在 CHANGELOG 中带(测试)标记行为可能随版本变化在线 ffmpeg 转码依赖第三方站点可用性。使用边界README 免责章节明确本扩展仅供下载用户拥有版权或已获授权的内容且项目提供站点 Opt-Out 流程js/init.js 内置了避免抓取列表。收尾建议猫抓的价值在于它不止看到资源而是把 M3U8/MPD 合并、WebRTC 录制这些嗅探器普遍止步的环节做成了完整管线且全部数据本地处理、GPL-3.0 开源可审计。如果你的场景是把网页视频变成可存档的完整文件尤其是 HLS 流和 WebRTC 流它值得装上试一遍如果你只需要偶尔存一个直链视频或者需要服务器端无人值守的批量下载它偏重了轻量的链接列表工具或专用下载器会更省事。【免费下载链接】cat-catch猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考