为什么我要做 FlowPick刷网、找素材、存资料总会撞上几个让人抓狂的瞬间网页上的精美配图右键检查全是混淆过的代码翻半天找不到原图地址想存一段教学视频打开开发者工具F12Network 面板里一片.m3u8、.ts、.m4s切片看不懂也拼不起来现有的嗅探工具要么界面像上世纪的产物还弹窗广告满天飞要么核心功能锁在付费墙后面还有些会偷偷把你的下载链接传回服务器。我是个挺轴的独立开发者受不了这种割裂的体验。网页资源本来就摆在那儿下载它不该是一门技术活。于是我自己动手写了 FlowPick——一款驻留在浏览器里、能自动嗅探媒体资源并直接下载合并的工具。这篇文章不讲情怀讲清楚它到底能干什么以及背后的实现是怎么做的。一、媒体资源嗅探不用再翻 F12FlowPick 的核心能力是驻留在浏览器后台自动、精准地捕获网页里隐藏的流媒体和静态资源。关键在于它工作在网络层而不是 DOM 层。浏览器扩展有个webRequestAPI可以监听当前标签页发出的每一个 HTTP 请求。播放器一发 M3U8 请求扩展就能截获——不需要你去翻 Network 面板也不依赖页面 DOM 结构。FlowPick 会扫描每个请求的Content-Type和 URL 特征命中下面这些就记录下来application/x-mpegurl→ HLS 流application/dashxml→ DASH 流video/*→ 直链视频音频、图片同理这里有个细节折腾了我一会儿。M3U8 分两种Master Playlist 是目录列出所有可用画质每个指向一个 Media PlaylistMedia 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 APIChrome/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 视频能跑半小时体验不可接受。它到底解决了什么消除技术门槛。传统的 M3U8 视频要用 FFmpeg 命令行合并-bsf:a aac_adtstoasc这种参数大多数人看一眼就劝退了。FlowPick 把这条流水线封装进一个按钮普通人也能下。净化工具环境。同类扩展鱼龙混杂。FlowPick 无广告、无多余权限索取、完全开源界面按现代浏览器设计语言来做不糊弄。告别散落的素材。批处理 分类嗅探把原本要反复查找、复制链接的流程浓缩进一个扩展面板对内容创作者、设计师、素材收集党提升明显。写在最后FlowPick 已经在 GitHub 完全开源扩展也上了三个浏览器商店Chrome 网上应用店、Edge 加载项、Firefox 附加组件。作为独立项目它首先是我对自己日常痛点的一次清算也希望能帮到同样被网页下载折腾的人。欢迎下载体验有问题在评论区或 GitHub Issue 里提看到都会回。如果你也厌倦了网页下载的繁琐不妨让 FlowPick 常驻你的浏览器。
![[DeepAgents:LangChain的Harness-04]TodoListMiddleware的任务拆解与状态流转](http://pic.xiahunao.cn/yaotu/[DeepAgents:LangChain的Harness-04]TodoListMiddleware的任务拆解与状态流转)
