企业官网建设流程全解析

如何给VideoDownloadHelper添加一种语言？25国语言i18n体系与完整性测试完全指南

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

VideoDownloadHelper（Video 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 个地方：

以 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 src="lang/xx-xx.js" ></script>

第 3 步：添加下拉选项

在 main.html 第 69–95 行的<select id="lang">中追加一个选项，文案用该语言的本族语书写：

<option value="xx-xx">Xxx 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 编写了一套自动化完整性测试，共四道关卡：

1. 数量关卡：lang/下至少 25 种 UI 语言、_locales/下至少 25 个商店语言目录（MIN_LANGUAGES = 25，见第 17 行）。
2. 键一致性关卡：以en-us.js为参考基线，逐一断言每种语言的键与参考完全相同（排序后 deepEqual），且每个值都是非空字符串。
3. 接线关卡：自动扫描main.html中的<script>引入、<select>选项，以及translate.js中的 switch 分支，三者必须与lang/目录一一对应——漏改任何一处都会报错。
4. 商店文案关卡：每个_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"的一员。

常见问题 FAQ

Q：为什么 _locales 有 27 个目录而 lang 只有 25 个？A：UI 层按"语言-地区"组合提供 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