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/VideoDownloadHelperVideoDownloadHelperSimple 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.jsonManifest 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打包扩展 zipwebpack 构建一条命令生成扩展核心脚本 ⚙️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 中会列出检测到的直链支持下载、复制、全选默认快捷键AltShiftV可直接唤起弹窗右键页面还有查找视频等上下文菜单。下图是扩展弹窗界面包含 Video Downloader、Setting、Log 三个标签页验证与调试npm 常用脚本速查表 以下脚本在根目录或video-url-parser/内均可执行命令作用npm test运行 Mocha 单元测试npm run coverage测试并生成覆盖率报告npm run lint/npm run lint:fixESLint 检查 / 自动修复npm run format/npm run format:checkPrettier 格式化 / 校验npm run check一键执行 lint 格式 覆盖率 构建npm run package构建并打包上架 zip提交代码前建议跑一遍npm run check确保全部通过。若想体验上架打包执行npm run packagescripts/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），仅供参考