如何给VideoDownloadHelper添加一种语言25国语言i18n体系与完整性测试完全指南【免费下载链接】VideoDownloadHelperChrome Extension to Help Download Video for Some Video Sites.项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelperVideoDownloadHelperVideo Download Helper是一款帮助下载视频链接的 Chrome 浏览器插件内置 25 种界面语言。本文将带你完整了解它的 i18n 多语言国际化体系从语言文件结构、UI 切换机制到自动完整性测试一步步教你如何给它安全地添加一种新语言。先看懂项目的两层 i18n 结构很多浏览器插件的国际化只有一套文案而 VideoDownloadHelper 采用了双层 i18n 架构分别处理插件界面文案和浏览器商店展示文案1️⃣ 界面文案层lang/目录每种语言对应一个独立的 JS 文件例如 video-url-parser/lang/en-us.js。每个文件声明一个与语言代码同名的翻译对象const translation_english { merger: Merge Videos, save: Save, ui_language: UI Language, // ... 共 39 个键 };目前 video-url-parser/lang/ 下共 25 个文件覆盖简体中文、English、日本語、한국어、العربية、Español、français 等 25 国语言。2️⃣ 商店展示层_locales/目录这是 Chrome 扩展官方规范要求的目录结构。每种语言一个文件夹内含 messages.json只描述插件在浏览器商店、扩展管理页展示的名称与简介{ appName: { message: Video Download Helper }, appDesc: { message: Video Download Helper (Video URL Parser) } }当前 video-url-parser/_locales/ 下有 27 个语言目录比 UI 层多en_GB、en_US等区域变体。video-url-parser/manifest.json 中的default_locale: en指定了默认语言。语言是如何生效的3 个关键位置理解生效链路后添加语言才不会漏改。整条链路只有 3 个地方位置文件作用① 引入语言包main.htmlscript srclang/xx-xx.js引入语言文件 select idlang下拉选项② 语言分发translate.jsget_lang()的 switch 语句把下拉值映射到翻译对象③ 应用到界面translate.js 第 12–31 行translation()把翻译值写入界面上每个带 id 的元素以 translate.js 第 36–62 行为例switch 中每种语言占一行case zh-cn: return (translation_simplified_chinese); case en-us: return (translation_english);手把手添加一种新语言的 5 步教程假设你要添加印地语hi-in以外的新语言比如xx-xx照做即可第 1 步创建语言文件复制 video-url-parser/lang/en-us.js 为新文件video-url-parser/lang/xx-xx.js将变量名改为translation_xx_xx并逐个翻译 39 个键值。关键规则新语言的键集合必须与en-us.js完全一致——多一个键、少一个键、或某个值留空测试都会失败后面会讲。第 2 步在 main.html 引入脚本在 main.html 头部的 script 区块第 8–32 行附近追加一行script srclang/xx-xx.js /script第 3 步添加下拉选项在 main.html 第 69–95 行的select idlang中追加一个选项文案用该语言的本族语书写option valuexx-xxXxx Language/option第 4 步在 translate.js 注册 switch 分支在 translate.js 的get_lang()函数中追加case xx-xx: return (translation_xx_xx);第 5 步可选但推荐补齐 _locales 商店文案新建video-url-parser/_locales/xx/messages.json参照 video-url-parser/_locales/zh_CN/messages.json 填写appName与appDesc让插件在商店页面也能显示该语言名称。完整性测试测试如何保证 25 种语言一个都不少这是本项目 i18n 体系最出彩的部分。video-url-parser/test/test_i18n.js 用 Mocha Chai 编写了一套自动化完整性测试共四道关卡数量关卡lang/下至少 25 种 UI 语言、_locales/下至少 25 个商店语言目录MIN_LANGUAGES 25见第 17 行。键一致性关卡以en-us.js为参考基线逐一断言每种语言的键与参考完全相同排序后 deepEqual且每个值都是非空字符串。接线关卡自动扫描main.html中的script引入、select选项以及translate.js中的 switch 分支三者必须与lang/目录一一对应——漏改任何一处都会报错。商店文案关卡每个_locales/xx/messages.json必须是合法 JSON且appName、appDesc均非空。测试还有一处巧妙设计lang/文件是纯浏览器脚本没有module.exports测试通过 Node 的vm模块在沙箱中执行源码并捕获翻译对象test_i18n.js 第 22–31 行从而无需改动语言文件本身。如何运行验证cd video-url-parser npm run test全部通过后你的新语言就正式成为25 国语言 1的一员。常见问题 FAQQ为什么 _locales 有 27 个目录而 lang 只有 25 个AUI 层按语言-地区组合提供 25 种界面语言商店层按 Chrome 规范细分了en_GB、en_US等区域变体两者数量不需要一致测试只要求各自不少于 25。Q翻译对象漏写一个键会怎样A对应界面元素会保留英文默认文案translate_text查不到键时不覆盖原文且npm run test的键一致性断言会直接失败提示你补齐。Q我能只加界面语言、不加商店语言吗A可以。测试对两者分别计数、分别校验互不阻塞但为了商店用户看到本地化名称推荐两者都补。小结给 VideoDownloadHelper 添加一种语言的完整路径就是新建lang/xx-xx.js→main.html引脚本 加下拉项 →translate.js加 case →可选补_locales/xx/messages.json→npm run test一键验证。得益于自动化的 i18n 完整性测试整个体系能保证 25 种语言的键一致、接线完整、文案非空——这正是它能稳定维护多语言支持的核心保障。【免费下载链接】VideoDownloadHelperChrome Extension to Help Download Video for Some Video Sites.项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考