当前位置：首页 > news >正文

为了优雅地下载网页视频，我顺手写了个开源扩展：FlowPick 诞生记

news 2026/7/4 3:22:24

为什么我要做 FlowPick

刷网、找素材、存资料，总会撞上几个让人抓狂的瞬间：

网页上的精美配图，右键检查全是混淆过的代码，翻半天找不到原图地址；

想存一段教学视频，打开开发者工具（F12），Network 面板里一片.m3u8、.ts、.m4s切片，看不懂也拼不起来；

现有的嗅探工具，要么界面像上世纪的产物还弹窗广告满天飞，要么核心功能锁在付费墙后面，还有些会偷偷把你的下载链接传回服务器。

我是个挺轴的独立开发者，受不了这种割裂的体验。网页资源本来就摆在那儿，下载它不该是一门"技术活"。于是我自己动手写了 FlowPick——一款驻留在浏览器里、能自动嗅探媒体资源并直接下载合并的工具。

这篇文章不讲情怀，讲清楚它到底能干什么，以及背后的实现是怎么做的。

一、媒体资源嗅探：不用再翻 F12

FlowPick 的核心能力，是驻留在浏览器后台，自动、精准地捕获网页里隐藏的流媒体和静态资源。

关键在于：它工作在网络层而不是 DOM 层。浏览器扩展有个webRequestAPI，可以监听当前标签页发出的每一个 HTTP 请求。播放器一发 M3U8 请求，扩展就能截获——不需要你去翻 Network 面板，也不依赖页面 DOM 结构。

FlowPick 会扫描每个请求的Content-Type和 URL 特征，命中下面这些就记录下来：

application/x-mpegurl→ HLS 流
application/dash+xml→ DASH 流
video/*→ 直链视频
音频、图片同理

这里有个细节折腾了我一会儿。M3U8 分两种：Master Playlist 是目录，列出所有可用画质，每个指向一个 Media Playlist；Media Playlist 才是真正的切片清单。最初我把两种都列出来了，用户看到一堆条目，不知道选哪个。后来改成：识别到 Master Playlist 时，自动解析出里面的画质选项，只展示 1080P / 720P / 480P 这种人能看懂的分辨率列表，不暴露原始 URL 层级。

顺带说一句：很多人以为 FlowPick 能下 RTMP，其实下不了。RTMP 不是 HTTP 协议，webRequest嗅探不到。FlowPick 能处理的是 HLS、DASH 和直链，这三类已经覆盖了绝大多数网页视频。

二、下载前先预览：告别盲选 URL

很多嗅探工具只甩给你一串冷冰冰的 URL，你根本不知道哪条才是想要的那个视频。

FlowPick 内置了媒体预览。嗅探到的资源，在扩展面板里可以直接点开预览——视频能播、图片能看、音频能听，确认是想要的再下载，不浪费带宽和时间。

这个功能听起来简单，做起来要处理不少格式差异。比如 HLS 的预览不能直接拿 M3U8 URL 塞给<video>标签（部分浏览器原生支持，但跨域和加密的处理不一致），所以 FlowPick 内部是先解析出最高画质的 Media Playlist，再用扩展的权限带上页面 Cookie 去请求切片，解密（如果有 AES-128）后拼成一个临时 Blob 喂给播放器。

三、批量下载与资源过滤

一个素材网页往往几十张图、好几段视频，一个个点下载是折磨。

FlowPick 支持批量模式。配合内置的类型过滤器（视频 / 图片 / 音频），一键勾选所需内容，可以自定义命名规则，批量导出。面对同一命名冲突时，不会覆盖已有文件，而是自动追加编号（file.png、file1.png、file2.png）——这是踩过坑后加的规则，早期版本覆盖过用户的素材，被自己骂过。

下载并发这块也值得说一下。切片不是等大小的，视频开头和结尾的切片往往小、中间的大。如果简单地把 200 个切片均分给 4 个并发任务，很可能一个任务卡在一堆大切片上，另外三个早就闲着了。FlowPick 用的是共享计数器方案：每个任务做完当前切片，立刻去抢下一个，不管大小，天然做到动态负载均衡，总完成时间接近理论最优。并发数默认 2，最多 8——再高某些 CDN 会触发限速或 429，反而更慢。

四、纯前端处理：数据不离开你的浏览器

这是 FlowPick 最核心的设计取舍，也是它能保证隐私的根本。

所有的切片下载、AES-128 解密、TS→MP4 重封装、文件合并，全在浏览器本地完成，不经过任何第三方服务器。你的下载链接、Cookie、文件内容，FlowPick 的服务器一律看不到——事实上 FlowPick 根本没有处理媒体数据的服务器。

具体用了哪些浏览器能力：

文件写入——三层降级策略。浏览器 JS 没有直接访问文件系统的权限。最简单的办法是把所有数据凑成一个 Blob 触发下载，但 Blob 要把整个文件加载进内存，超过 1.5GB Chrome 就会卡死。FlowPick 优先用 File System Access API（Chrome/Edge 86+），拿到文件句柄后通过WritableStream持续写盘，内存里同时只有当前写入的那一块，和文件总大小无关；Firefox / Safari 不支持 FSA，降级到 StreamSaver.js；都不行才用 Blob 模式（带 1.5GB 硬限制）。运行时自动检测，用户无感。

TS→MP4 重封装——两条路。HLS 切片是 TS 格式，直接拼接出来的文件 VLC 能播，但 Windows 播放器、剪映、B 站上传都不认。FlowPick 做的是**重封装（remux）**而不是重编码——只改容器，不改编码，不损失质量。普通 HLS 走自研的TSToMP4Muxer，纯 JS 逐包解析 188 字节的 TS 包、实时写成 MP4 的 Box 结构，边下边写，内存占用和文件大小解耦；DASH 音视频合并、或边缘格式，走 FFmpeg WASM。两条路按场景自动选。

AES-128 解密——Web Crypto API。HLS 的加密信息写在 M3U8 的#EXT-X-KEY标签里，FlowPick 解析出 Key URI 和 IV，请求密钥（带页面 Cookie，所以需要登录才能看的课也能下），再用浏览器原生的crypto.subtle做 AES-128-CBC 解密，底层有硬件加速，几毫秒一个切片。

需要诚实说明的边界：Widevine / PlayReady / FairPlay 这类 DRM，密钥在硬件或系统层，JS 访问不到，FlowPick 做不了，Netflix、Disney+ 这类平台不在设计范围内；视频转码（比如下载时压成 720P）也不支持——浏览器里重编码太慢，1GB 视频能跑半小时，体验不可接受。