AddFox
  • 简体中文

      • 国际化

      Addfox 支持通过 Chrome 扩展标准的 _locales 目录实现国际化。

      目录结构

      在 public/ 目录下创建 _locales：

      public
      _locales
      en
      messages.json
      zh_CN
      messages.json
      ja
      messages.json

      消息文件格式

      messages.json 格式：

      {
  "appName": {
    "message": "My Extension",
    "description": "The name of the extension"
  },
  "appDescription": {
    "message": "A great browser extension",
    "description": "The description of the extension"
  },
  "welcomeMessage": {
    "message": "Welcome, $USER$!",
    "description": "Welcome message with user name",
    "placeholders": {
      "user": {
        "content": "$1",
        "example": "John"
      }
    }
  }
}

      在 Manifest 中使用

      {
  "name": "__MSG_appName__",
  "description": "__MSG_appDescription__",
  "default_locale": "zh_CN"
}

      在代码中使用

      JavaScript/TypeScript

      // 获取当前语言的消息
const message = chrome.i18n.getMessage("welcomeMessage", ["John"]);
console.log(message); // "Welcome, John!"

      Vue

      <template>
  <h1>{{ t('appName') }}</h1>
  <p>{{ t('welcomeMessage', ['John']) }}</p>
</template>

<script setup>
// 封装 i18n 工具函数
const t = (key, args) => chrome.i18n.getMessage(key, args);
</script>

      React

      // utils/i18n.ts
export const t = (key: string, args?: string[]): string => {
  return chrome.i18n.getMessage(key, args);
};

// app/popup/App.tsx
import { t } from "@/utils/i18n";

export function App() {
  return (
    <div>
      <h1>{t("appName")}</h1>
      <p>{t("welcomeMessage", ["John"])}</p>
    </div>
  );
}

      检测用户语言

      // 获取浏览器当前语言
const currentLocale = chrome.i18n.getUILanguage();
console.log(currentLocale); // "zh-CN", "en", etc.

// 获取所有支持的语言
const locales = chrome.i18n.getAcceptLanguages();
locales.then(languages => console.log(languages));

      完整示例

      中文消息文件

      // public/_locales/zh_CN/messages.json
{
  "appName": {
    "message": "标签页管理器",
    "description": "扩展名称"
  },
  "appDescription": {
    "message": "高效管理您的浏览器标签页",
    "description": "扩展描述"
  },
  "tabCount": {
    "message": "您有 $COUNT$ 个标签页",
    "description": "显示标签页数量",
    "placeholders": {
      "count": {
        "content": "$1",
        "example": "5"
      }
    }
  }
}

      英文消息文件

      // public/_locales/en/messages.json
{
  "appName": {
    "message": "Tab Manager",
    "description": "Extension name"
  },
  "appDescription": {
    "message": "Manage your browser tabs efficiently",
    "description": "Extension description"
  },
  "tabCount": {
    "message": "You have $COUNT$ tabs",
    "description": "Show tab count",
    "placeholders": {
      "count": {
        "content": "$1",
        "example": "5"
      }
    }
  }
}

      语言代码

      常用语言代码：

      语言代码
      简体中文zh_CN
      繁体中文zh_TW
      英语en
      日语ja
      韩语ko
      德语de
      法语fr
      西班牙语es

      完整列表参考 Chrome 扩展文档。

      注意事项

      • default_locale 在 manifest 中必须指定
      • 所有消息文件必须包含 default_locale 指定的语言
      • 占位符使用 $1, $2 等表示，对应 getMessage 的第二个参数数组

      相关链接