WXT浏览器插件开发中文教程(20)----I18n国际化

前言

大家好，我是倔强青铜三 。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

I18n ​

Chrome 文档 • Firefox 文档

本页面讨论了如何使用原生的 browser.i18n API 设置国际化，并提到了一些替代方案，如果你希望使用其他工具。

• 使用方法
• 替代方案

使用方法 ​

1. 在清单文件中添加 default_locale：

   export default defineConfig({
     manifest: {
       default_locale: 'en',
     },
   });

2. 在 public/ 目录下创建 messages.json 文件：

   📂 {srcDir}/
      📂 public/
         📂 _locales/
            📂 en/
               📄 messages.json
            📂 de/
               📄 messages.json
            📂 ko/
               📄 messages.json

   // public/_locales/en/messages.json
   {
     "helloWorld": {
       "message": "Hello world!",
     },
   }

3. 获取翻译：

   browser.i18n.getMessage('helloWorld');

4. 可选：为扩展程序的名称和描述添加翻译：

{
  "extName": {
    "message": "..."
  },
  "extDescription": {
    "message": "..."
  },
  "helloWorld": {
    "message": "Hello world!"
  }
}

export default defineConfig({
  manifest: {
    name: '__MSG_extName__',
    description: '__MSG_extDescription__',
    default_locale: 'en',
  },
});

替代方案 ​

原生 API 功能较少，因此你可能希望使用第三方 NPM 包，例如 i18next、react-i18n、vue-i18n 等。

然而，建议你坚持使用原生 API（或者基于原生 API 的包，例如 @wxt-dev/i18n），因为：

• 它们可以在清单文件和 CSS 文件中本地化文本
• 翻译是同步加载的
• 翻译不会多次打包，保持扩展程序体积小
• 零配置

然而，原生 API 及其基础上的任何包都有一个主要缺点：

• 无法在不更改浏览器/系统语言的情况下更改语言

以下是一些设置第三方 i18n 库的示例：

• vue-i18n

最后感谢阅读！欢迎关注我，微信公众号 ：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！