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），仅供参考
企业数字化 ERP 产品动态
相关推荐
Windows游戏编程大师源码新编：DirectX老工程Win11移植指南 简介：《Windows游戏编程大师技巧（第二版）》随书光盘中的源码包，面向想真正动手实践经典游戏开发技术的读者，尤其适合刚学完Windows编程基础、希望以完整例子快速理解游戏循环、位图动画、输入响应等核心环节的初学者。… · 2026/9/25 2:07:12
GCN交通流量预测源码实战：从原理到调参避坑 简介：这份资源是面向机器学习初学者与高校学生的GCN图神经网络交通流量预测完整项目源码，适合用作Python课程设计、期末大作业或入门图神经网络的实战案例。压缩包共16个文件，约33.61MB，以py源码为主，涵盖GCN、GAT、Ch… · 2026/9/25 2:07:12
华为性格测试通关指南：拆解测评底层逻辑与安全作答策略 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 2:07:12
urql populateExchange 深度指南：用 @populate 指令自动填充 Mutation 查询字段 前端 【免费下载链接】urql The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow. 项目地址： https://gitcode.com/gh_mirrors/ur/urql 点击查看 免费下载 populateExchange 是 urql 生态中… · 2026/9/25 3:32:21
全域智能管控平台权限管理：RBAC模型落地与安全管控实践 聊到权限管理，很多人第一反应就是"给谁开通什么功能"，似乎建个用户列表再打个勾就完事了。但真正做过安防平台、物联网管控平台或者企业内部中台的人都会明白，权限管理从来不是界面交互问题，而是整个系统的安全底座。尤… · 2026/9/25 3:32:21
SSM+MySQL轻型卡车零部件销售平台：从架构设计到部署避坑指南 简介：这是一份基于Java SSM框架与MySQL数据库的轻型卡车零部件销售平台项目资料包，主要面向正在完成毕业设计或课程设计的计算机专业学生，以及希望熟悉SSM单体项目完整开发流程的Java学习者。平台实现了配件分类展示、订单管理、检修信息登记… · 2026/9/25 3:32:21
国密nginx搭建全攻略：从GmSSL编译到SM2双证书部署 最近几年做政企项目、金融类系统的朋友，基本都会碰到同一个需求：客户要求网站全链路支持国密算法，浏览器访问不再走传统的RSA体系，而是用SM2做密钥协商、SM3做摘要、SM4做数据加密。这时候你的第一反应大概率是“把nginx的ssl证书… · 2026/9/25 3:32:15
创维E900V22D刷机全攻略：S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战：从Mosquitto到EMQX /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37
