BrowserSkill国际化实践为浏览器扩展添加新语言的完整流程【免费下载链接】BrowserSkillLet AI agents use your real, logged-in browser without interrupting your work. CLI extension for browser automation across any shell-capable AI agent.项目地址: https://gitcode.com/GitHub_Trending/br/BrowserSkillBrowserSkill 是一款让 AI Agent 直接驱动你已登录的真实浏览器的浏览器自动化工具由bsk命令行工具和浏览器扩展组成支持中文、英文、韩文三种界面语言。本文将带你完整走一遍为这类浏览器扩展添加新语言的国际化i18n流程从翻译资源文件的组织方式、语言自动检测机制到测试验证清单帮助新手也能给开源项目贡献自己的语言包 BrowserSkill 是什么国际化作用在哪里BrowserSkill 的核心玩法是你在任意支持 Shell 的 AI Agent 里输入指令Agent 通过 bsk CLI 操作你日常使用的浏览器——打开网页、点击、填写表单、下载文件——而扩展端负责在页面上呈现Agent 正在控制的状态条、标签页借用确认框、人工求助面板等交互界面。这些面向用户的界面文字就是国际化的用武之地。整个语言包被抽成独立子包位于 packages/i18n/扩展的各个入口弹窗、页面浮层、通知共用它。项目自带文档说明了范围边界翻译资源覆盖 popup、页面浮层和扩展通知CLI 输出和商店元数据不在翻译范围内。 —— 见 packages/i18n/README.md下面这张是扩展在 Chrome 商店中的界面预览其中状态卡片、快捷功能入口等文案均出自翻译资源国际化架构解析i18next 双命名空间项目基于i18next生态实现本地化初始化逻辑集中在 src/i18n.ts设计上有三个亮点1️⃣ 双命名空间common 与 extension每种语言对应两个 JSON 文件按 UI 模块拆分common.json—— 应用级基础文案如应用描述通过 bsk CLI 让 AI Agent 驱动你已登录的浏览器extension.json—— 扩展专属文案覆盖弹窗状态、操作录制、自动化设置、长截图、操作审计等十余个功能区块可以对照查看en-US/common.json 与 zh-CN/extension.json。2️⃣ 语言自动检测优先听 Chrome 的扩展弹窗运行在chrome-extension://源下navigator.language可能与浏览器实际界面语言不一致。因此 chrome-storage-sync.ts 注册了一个自定义检测器按以下优先级解析语言用户保存过的偏好chrome.storage.local中的i18nextLngchrome.i18n.getUILanguage()Chrome 的权威界面语言navigator.language兜底解析结果还会经过语言规范化比如检测到ko、KO-kr、ko_KR都能正确命中韩语资源而没有翻译的语言不会被静默塞进错误语言包而是原样交给 i18next 走英文回退。3️⃣ 跨上下文同步弹窗与页面浮层语言一致通过chrome.storage的变更监听弹窗里切换语言后页面浮层control overlay、录制浮层等会同步更新且做了回声写去重——相同别名不会触发多余的语言切换和存储写入测试 tests/i18n.test.ts 对此有专门覆盖。React 侧则通过类型收敛的useTranslationreact.tsx取文案翻译键写错会直接在编译期报错这是 i18n 落地中少踩坑的关键一环。添加新语言的完整流程5 步走假设要为 BrowserSkill 添加日语ja-JP流程如下第 1 步新增翻译资源文件在packages/i18n/src/locales/下创建ja-JP/目录放入common.json和extension.json要求完整保留英文版的键结构不增不删保留插值变量原样例如协议 v{{version}}、{{count}} 次操作中的{{version}}、{{count}}操作录制的指令模板popup.record.promptTemplate中的命令、换行、./trace路径必须原样保留否则 Agent 会无法执行录制第 2 步在资源注册表中登记打开 src/i18n.ts在resources对象中注册两个命名空间。这一步就是支持新语言的全部注册动作——语言规范化映射直接从资源键推导无需再维护任何额外的语言列表。第 3 步把握翻译质量红线项目文档 packages/i18n/README.md 给出三条硬性建议场景翻译要求录制指令保留命令、换行、trace 路径协议版本不一致提示说明连接仍可用建议升级而非报错口吻人工求助提示必须让 Agent正在等待用户完成当前步骤这一点清晰可见第 4 步运行测试套件在仓库根目录依次执行CI 会跑同样的检查pnpm --filter browser-skill/i18n test pnpm ext:test pnpm lint本地化测试会真实校验已注册资源、语言检测、存储同步、各语言键与插值变量和英文版完全对齐扩展测试还会覆盖韩文升级提示与复制出的录制指令。第 5 步编译并肉眼检查pnpm --filter browser-skill/extension compile pnpm ext:build最后打开弹窗和页面浮层检查目标语言下的文字换行与截断——长文案如日语最容易在这里翻车。值得借鉴的设计细节中文变体解析zh-Hans/zh-Hant按书写系统精确路由zh-TW、zh-HK、zh-MO走繁体裸zh默认简体。繁体资源未注册前统一回退简体注册后无需改任何检测代码见 chrome-storage-sync.ts。回退策略英文是国际化默认语言zh系列映射到简体其余未知语言全部落到en-US保证任何地区用户都有可读界面。类型安全types.ts 用现有语言包推导 i18next 的类型选项t()的键名自动补全。语言解析单测tests/locale-resolution.test.ts 专门覆盖各种 BCP 47 标签ko、KO-kr、ko_KR…的归一化行为。写在最后BrowserSkill 的国际化方案给浏览器扩展多语言支持提供了一个可复制的模板资源按命名空间拆分、注册即生效的语言解析、跨上下文同步、键与插值变量的自动化对齐测试。下次你想给任何 i18next 项目贡献语言包时这套流程都可以直接照搬 更多背景可延伸阅读操作审计文档、长截图文档、整体架构说明。【免费下载链接】BrowserSkillLet AI agents use your real, logged-in browser without interrupting your work. CLI extension for browser automation across any shell-capable AI agent.项目地址: https://gitcode.com/GitHub_Trending/br/BrowserSkill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考