Yomitan部署与发布指南：如何为不同浏览器构建和测试扩展
【免费下载链接】yomitanPop-up dictionary browser extension for language learning. Successor to Yomichan.项目地址: https://gitcode.com/gh_mirrors/yo/yomitan
Yomitan是一款强大的弹出式词典浏览器扩展，专为语言学习设计，是Yomichan的继任者。本指南将详细介绍如何为不同浏览器构建和测试Yomitan扩展，帮助开发者快速上手部署流程。
准备工作：环境搭建与项目克隆
在开始构建Yomitan扩展之前，需要确保开发环境已正确配置。首先，克隆项目仓库到本地：
git clone https://gitcode.com/gh_mirrors/yo/yomitan cd yomitan接下来，安装项目依赖：
npm install构建扩展：支持多浏览器的构建命令
Yomitan提供了灵活的构建脚本，支持为不同浏览器生成扩展包。核心构建逻辑位于dev/bin/build.js文件中，通过package.json中定义的脚本命令触发。
基础构建命令
构建所有目标：生成适用于所有支持浏览器的扩展包
npm run build指定浏览器目标：通过
--target参数指定特定浏览器# 构建Chrome开发版 npm run build -- --target chrome-dev # 构建Firefox安卓版 npm run build:serve:firefox-android
构建输出
构建后的扩展文件将保存在builds/目录下，根据目标浏览器生成不同的文件名，例如：
- Chrome扩展：
yomitan-chrome-dev.zip - Firefox扩展：
yomitan-firefox.zip
图1：Yomitan字典设置界面，展示扩展的核心功能区域
测试策略：确保扩展质量的完整流程
Yomitan采用多层次测试策略，确保扩展在不同环境下的稳定性和兼容性。测试相关配置可在package.json中查看。
主要测试命令
完整测试套件：运行所有测试类型
npm test快速测试：仅运行关键测试项，适合开发过程中的快速验证
npm run test:fast单元测试：使用Vitest框架运行单元测试
npm run test:unit构建测试：验证构建过程是否正常
npm run test:build
测试类型详解
静态分析测试：
- JavaScript代码检查：
npm run test:js - TypeScript类型检查：
npm run test:ts - CSS样式检查：
npm run test:css - HTML验证：
npm run test:html
- JavaScript代码检查：
功能测试：
- 字典数据验证：
test/data/database-test-cases.json - 翻译功能测试：
test/data/translator-test-inputs.json
- 字典数据验证：
性能测试：
- 基准测试：
npm run bench - 包含日语语言处理性能测试：
benches/japanese-language-transformer.bench.js
- 基准测试：
图2：Yomitan文本扫描功能演示，展示扩展在网页中的实际应用效果
浏览器兼容性：针对不同平台的优化
Yomitan支持多种浏览器和平台，每种目标都有特定的构建和测试流程：
桌面浏览器
Chrome/Edge：
npm run build -- --target chrome生成的CRX文件可直接在Chrome扩展页面加载（需开启开发者模式）
Firefox：
npm run build -- --target firefox生成的XPI文件可在Firefox扩展页面安装
移动平台
Firefox Android：
npm run build:serve:firefox-android通过web-ext工具运行和测试
Kiwi浏览器：
npm run build:serve:kiwi-browser通过ADB将扩展推送到Android设备
高级配置：自定义构建与调试
构建参数说明
dev/bin/build.js支持多种命令行参数，用于自定义构建过程：
--dryRun：模拟构建过程，不实际生成文件--version：指定版本号--all：构建所有支持的浏览器目标--target：指定单个构建目标
调试技巧
开发模式构建：
npm run build -- --target chrome-dev生成未压缩的扩展文件，便于调试
源码映射：构建过程会自动生成源码映射，方便在浏览器开发者工具中调试TypeScript代码
日志输出：构建过程中会输出详细日志，可通过以下方式查看：
npm run build > build.log 2>&1
图3：Yomitan术语查询结果展示，显示详细的词典解释和例句
部署流程：从构建到发布
打包扩展
构建完成后，扩展包将生成在builds/目录。根据目标浏览器的不同，文件格式可能为ZIP、CRX或XPI。
发布渠道
Chrome Web Store：
- 需要将ZIP文件上传到Chrome开发者控制台
- 遵循Chrome扩展发布指南
Firefox Add-ons：
- 提交XPI文件到Firefox开发者中心
- 通过Mozilla的扩展审核流程
手动分发：
- 对于内部测试或特定用户群体，可直接提供构建好的扩展文件
- 指导用户开启浏览器开发者模式并加载解压后的扩展目录
常见问题解决
构建失败
依赖问题：尝试删除
node_modules目录并重新安装依赖rm -rf node_modules npm install7-Zip错误：确保系统已安装7-Zip，或修改
dev/bin/build.js中的压缩配置
测试失败
- TypeScript错误：检查TypeScript配置文件
jsconfig.json和类型定义文件types/ - 字典测试失败：验证测试数据文件
test/data/dictionaries/中的示例数据是否完整
浏览器兼容性问题
- 查看
ext/manifest.json中的浏览器兼容性声明 - 参考官方文档 docs/development/npm-scripts.md 了解不同浏览器的构建注意事项
总结
通过本指南，您应该已经掌握了Yomitan扩展的构建、测试和部署流程。无论是开发新功能还是为特定浏览器优化，这些步骤都能帮助您高效地完成工作。Yomitan的模块化架构和完善的构建系统，使得为不同浏览器平台开发和发布扩展变得简单而高效。
定期查看项目的CONTRIBUTING.md文件，了解最新的开发规范和最佳实践，确保您的贡献符合项目要求。祝您在Yomitan的开发之旅顺利！
【免费下载链接】yomitanPop-up dictionary browser extension for language learning. Successor to Yomichan.项目地址: https://gitcode.com/gh_mirrors/yo/yomitan
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
