10分钟搭好VideoDownloadHelper本地开发环境：npm、webpack构建与加载Unpacked完整教程-平芜编程栈

10分钟搭好VideoDownloadHelper本地开发环境：npm、webpack构建与加载Unpacked完整教程

【免费下载链接】VideoDownloadHelperChrome Extension to Help Download Video for Some Video Sites.项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper

VideoDownloadHelper（Simple Video Download Helper）是一款轻量的 Chrome 浏览器视频下载助手扩展，能自动嗅探页面上的视频、音频与图片直链并一键下载。想二次开发它？本教程带你从克隆仓库、npm 安装依赖、webpack 构建，到最终在浏览器中加载 Unpacked 扩展，全程约 10 分钟即可完成本地开发环境搭建。

开发环境准备：Node.js 18+ 与克隆仓库 🧰

整个项目只有一个硬性要求：Node.js >= 18（见 video-url-parser/package.json 中的engines字段）。先确认版本：

node -v

然后克隆仓库：

git clone https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper cd VideoDownloadHelper

项目结构速览：真正的扩展代码全部位于video-url-parser/目录，仓库根目录的 package.json 只是把 npm 脚本"转发"到子项目，因此在根目录或video-url-parser/内执行命令效果完全相同。核心文件包括：

manifest.json：Manifest V3 扩展清单
js/getPagesSource.js：内容脚本入口，负责视频 URL 嗅探
webpack.config.js：构建配置
CONTRIBUTING.md：官方开发规范文档

一键安装依赖：npm install 全解析 📦

在仓库根目录执行：

npm install

根目录 package.json 中的postinstall脚本会自动执行npm --prefix video-url-parser install，把依赖装进扩展子项目，只需跑一次。

值得注意的是，扩展的解析器本身零运行时依赖，devDependencies里全是开发工具：

依赖	用途
webpack / webpack-cli	打包内容脚本
mocha / chai	单元测试
eslint / prettier	代码规范与格式化
adm-zip	打包扩展 zip

webpack 构建：一条命令生成扩展核心脚本 ⚙️

webpack.config.js 配置非常简洁：入口是./js/getPagesSource.js，产物输出为dist/dist.min.js。

⚠️关键点：dist/dist.min.js是构建产物，不会提交到仓库。而 manifest.json 的web_accessible_resources声明了dist/*，所以加载扩展前必须先构建。

三种构建命令按需选择：

npm run build # 生产构建（推荐） npm run dev # 开发构建（不压缩） npm run watch # 监听源码变化自动重新构建

开发时最省心的组合是：终端跑npm run watch，改完代码自动重新打包。

加载 Unpacked 扩展：chrome://extensions 三步走 🚀

浏览器地址栏打开chrome://extensions，打开右上角的Developer mode（开发者模式）；
点击Load unpacked（加载已解压的扩展）；
选择仓库中的video-url-parser/文件夹（注意是文件夹本身，不是它里面的文件）。

加载成功后，可以这样验证扩展已正常工作：

工具栏出现扩展图标，页面上嗅探到媒体时图标上会显示数量角标；
打开任意含视频页面（如 some-video-sites.txt 里的站点），点击图标弹出界面，"Videos List" 中会列出检测到的直链，支持下载、复制、全选；
默认快捷键Alt+Shift+V可直接唤起弹窗，右键页面还有"查找视频"等上下文菜单。

下图是扩展弹窗界面，包含 Video Downloader、Setting、Log 三个标签页：

验证与调试：npm 常用脚本速查表 🧪

以下脚本在根目录或video-url-parser/内均可执行：

命令	作用
`npm test`	运行 Mocha 单元测试
`npm run coverage`	测试并生成覆盖率报告
`npm run lint`/`npm run lint:fix`	ESLint 检查 / 自动修复
`npm run format`/`npm run format:check`	Prettier 格式化 / 校验
`npm run check`	一键执行 lint + 格式 + 覆盖率 + 构建
`npm run package`	构建并打包上架 zip

提交代码前建议跑一遍npm run check确保全部通过。若想体验上架打包，执行npm run package，scripts/package.js 会先在仓库根目录生成simple-video-download-helper-3.2.1.zip，并自动剔除node_modules、test、配置文件等开发文件。

扩展在解析页面 URL 时，界面会展示如下的加载动画，看到它说明嗅探流程正在运行：

常见问题速查 🩺

EBADENGINE警告：Node 版本低于 18，请升级后再npm install。
打包时报 "Build output not found at dist/dist.min.js"：说明还没构建，先执行npm run build。
改了代码浏览器里没生效：重新构建后，回到chrome://extensions点击扩展卡片上的刷新按钮重新加载。
构建产物去哪了：video-url-parser/dist/dist.min.js，重新构建会直接覆盖，无需手动清理。

结语 🎯

到这里，你已经完成了 VideoDownloadHelper 完整的本地开发闭环：npm install 装依赖 → webpack 构建 dist.min.js → chrome://extensions 加载 Unpacked → 实测视频嗅探。后续想新增站点解析器或翻译，参考 CONTRIBUTING.md 的约定，配合npm run watch热重建，调试效率会非常高。

【免费下载链接】VideoDownloadHelperChrome Extension to Help Download Video for Some Video Sites.项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考