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

前言

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

I18n

Chrome 文档Firefox 文档

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

使用方法

  1. 在清单文件中添加 default_locale

    ts 复制代码
    export default defineConfig({
      manifest: {
        default_locale: 'en',
      },
    });
  2. public/ 目录下创建 messages.json 文件:

    html 复制代码
    📂 {srcDir}/
       📂 public/
          📂 _locales/
             📂 en/
                📄 messages.json
             📂 de/
                📄 messages.json
             📂 ko/
                📄 messages.json
    json 复制代码
    // public/_locales/en/messages.json
    {
      "helloWorld": {
        "message": "Hello world!",
      },
    }
  3. 获取翻译:

    ts 复制代码
    browser.i18n.getMessage('helloWorld');
  4. 可选:为扩展程序的名称和描述添加翻译:

json 复制代码
{
  "extName": {
    "message": "..."
  },
  "extDescription": {
    "message": "..."
  },
  "helloWorld": {
    "message": "Hello world!"
  }
}
ts 复制代码
export default defineConfig({
  manifest: {
    name: '__MSG_extName__',
    description: '__MSG_extDescription__',
    default_locale: 'en',
  },
});

替代方案

原生 API 功能较少,因此你可能希望使用第三方 NPM 包,例如 i18nextreact-i18nvue-i18n 等。

然而,建议你坚持使用原生 API(或者基于原生 API 的包,例如 @wxt-dev/i18n),因为:

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

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

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

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

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

相关推荐
拾光拾趣录几秒前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国几秒前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸7 分钟前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest
姑苏洛言11 分钟前
答题抽奖活动小程序技术复盘
前端
砖头拍死你1 小时前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户1512905452201 小时前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫1 小时前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥1 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
噔噔4281 小时前
使用webworker优化大文件生成hash的几种方式
前端