VideoDownloadHelper拆解Chrome Manifest V3扩展架构全解析【免费下载链接】VideoDownloadHelperChrome Extension to Help Download Video for Some Video Sites.项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelperVideoDownloadHelperSimple Video Download Helper是一个轻量级的 Chrome 视频下载扩展一键嗅探当前网页中的视频直链并通过浏览器下载管理器保存视频。本文以它为例完整拆解一套 Manifest V3 扩展的架构从 manifest.json 声明、Service Worker 背景脚本到内容脚本动态注入和页面解析引擎帮你快速读懂 MV3 视频下载工具的开发套路。先看目录一个 MV3 扩展由什么组成整个扩展位于 video-url-parser/ 目录去掉测试和翻译后核心结构非常克制文件/目录职责manifest.jsonMV3 声明文件权限、背景脚本、快捷键main.html工具栏 Popup 弹窗页面js/background.js三合一角色Service Worker 注入器 内容脚本js/getPagesSource.js内容脚本入口抓取页面并发起解析js/parsevideo.js核心解析引擎 ParseVideojs/video.jsPopup 内 UI 逻辑与下载触发webpack.config.js把内容脚本打包为 dist.min.jstest/Mocha Chai 单测与页面快照逐行读懂 manifest.jsonMV3 扩展的身份证manifest.json 是 Chrome 认识扩展的唯一入口关键字段如下manifest_version: 3—— 声明使用 MV3这是与 MV2 最大的分水岭background.service_worker指向js/background.js且type: module支持 ES Moduleaction.default_popup指向main.html点击工具栏图标弹出界面permissions申请activeTab、storage、scripting、downloads、contextMenushost_permissions只声明了两个 API 域名manifest.json#L39commands定义快捷键AltShiftV直接打开弹窗content_scripts匹配所有 http/https 页面并排除 youtube.commanifest.json#L44-L50background: { service_worker: js/background.js, type: module }权限最小化是 MV3 扩展的最佳实践activeTab只在用户主动点击扩展时才授予页面访问权host_permissions仅覆盖两个 Worker 后端而不是https://*/*这种全域名声明。background.js 的三合一MV3 Service Worker 的正确打开方式MV2 的持久后台页面在 MV3 中被按需唤醒、可被回收的 Service Worker取代。这个项目里最有趣的架构决策是让 js/background.js 一份文件身兼三职Service Worker工具栏角标计数chrome.action.setBadgeText、右键菜单创建与点击处理Popup 注入器打开弹窗时动态向当前页注入解析脚本内容脚本manifest 的content_scripts也声明了它在页面上下文中运行区分我现在运行在哪个环境的技巧就是检查window是否存在Service Worker 没有window→ 运行角标与菜单逻辑background.js#L81Popup 里有window和chrome.scripting→ 执行动态注入background.js#L39-L48内容脚本里chrome.tabs不可用 → 相关调用前有保护判断避免抛错 MV3 新手最常踩的坑把 MV2 写法直接搬过来在 Service Worker 里使用window、或期望后台脚本常驻内存。记住Worker 随时会被杀逻辑必须幂等可重入。为什么用动态注入而不是静态 content_scriptsmanifest 中content_scripts声明的其实是background.js本身而真正的解析逻辑在 js/getPagesSource.js由 webpack.config.js 打包为dist.min.js。打开弹窗时通过chrome.scripting.executeScript注入chrome.scripting.executeScript({ target: { tabId: tab.id }, files: [./js/jquery-3.4.1.min.js, ./dist/dist.min.js] });这样做的收益解析脚本只在用户主动点击扩展时加载不污染平时浏览的每个页面同时天然依赖activeTab权限完成授权——这正是 MV3 推荐的用户手势授权模式。一次点击的完整数据流把上面的模块串起来点击图标 → 下载视频的完整链路是点击工具栏图标 → Popup 加载 main.html 并执行background.jsPopup 通过activeTab拿到当前标签页chrome.scripting.executeScript注入dist.min.jsgetPagesSource.js 取到document.documentElement.outerHTML交给ParseVideo解析解析结果经chrome.runtime.sendMessage发回 Service Worker顺手刷新角标计数Popup 内 js/video.js 渲染结果列表点击下载调用chrome.downloads.download发起下载语言、暗色模式等设置写入chrome.storage.sync跨设备同步整个流程零运行时依赖、无本地服务器所有解析都在浏览器内完成。ParseVideo 引擎先精确后兜底的多级策略js/parsevideo.js 是扩展的大脑。Parse()入口parsevideo.js#L23-L82先提取域名命中就交给专用处理器微博、Dailymotion、Vimeo、TED 等 9 个站点未命中则按固定顺序执行 6 级通用兜底顺序兜底策略说明1video_url字段页面内嵌 JSON 中的video_url: ...2mp4 JSON 片段mp4,url:https://...模式3og:videometa页面头部社交分享标签4video src标签标准 HTML5 视频标签5source子标签video/audio的多源声明6任意媒体直链.mp4/.webm/.m3u8等后缀兜底每级提取的结果都要经过ValidURL校验与去重拿到合法结果立即返回。这种专用处理器优先 多级通用兜底的设计让扩展对没写处理器的陌生网站也保有一定命中率。项目还为每级策略配了单测和页面快照如 test/data/dailymotion-x2bu0q2.html配合npm test可以验证站点改版后解析是否仍然有效。构建、测试与加载到 Chrome开发工具链声明在 video-url-parser/package.jsonwebpack 负责构建Mocha/Chai 负责测试ESLint Prettier 负责代码规范。cd video-url-parser npm install npm run build # 生成 dist/dist.min.js npm test # 运行单测构建完成后打开chrome://extensions开启开发者模式点击加载已解压的扩展程序选择video-url-parser/目录即可试用——这也是学习 MV3 扩展架构最快的方式装上一个边用边对照源码。总结从这个项目能学到的 MV3 架构清单✅background.service_worker取代持久后台页type: module支持模块化✅activeTab 用户手势 chrome.scripting.executeScript实现按需动态注入✅ 用typeof window区分 Service Worker / Popup / 内容脚本三种运行环境✅ 权限最小化host_permissions只声明真正要访问的域名✅ Worker 会被回收菜单创建等初始化逻辑在onInstalled和每次启动时都做background.js#L158-L162✅ 解析逻辑零依赖 单测覆盖站点改版可快速回归验证从 manifest 声明到 Service Worker、从动态注入到多级解析兜底VideoDownloadHelper 用不到 2000 行核心代码演示了一个 MV3 视频嗅探扩展的完整骨架是入门 Chrome 扩展架构一个相当精炼的范本。【免费下载链接】VideoDownloadHelperChrome Extension to Help Download Video for Some Video Sites.项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考