Интернационализация

Addfox поддерживает интернационализацию через стандартную директорию _locales Chrome расширений.

Структура директорий

Создайте _locales в директории public/:

public

_locales

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": "ru"
}

Использование в коде

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); // "ru", "en", и т.д.

// Получение всех поддерживаемых языков
const locales = chrome.i18n.getAcceptLanguages();
locales.then(languages => console.log(languages));

Полный пример

Файл сообщений на русском

// public/_locales/ru/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"
      }
    }
  }
}

Коды языков

Часто используемые коды языков:

Язык	Код
Русский	`ru`
Китайский упрощенный	`zh_CN`
Китайский традиционный	`zh_TW`
Английский	`en`
Японский	`ja`
Корейский	`ko`
Немецкий	`de`
Французский	`fr`
Испанский	`es`

Полный список см. в документации Chrome.

Примечания

default_locale в manifest должен быть обязательно указан
Все файлы сообщений должны содержать язык, указанный в default_locale
Плейсхолдеры используют $1, $2 и т.д., соответствующие второму параметру массива getMessage

#Интернационализация

#Структура директорий

#Формат файлов сообщений

#Использование в Manifest

#Использование в коде

#JavaScript/TypeScript

#Vue

#React

#Определение языка пользователя

#Полный пример

#Файл сообщений на русском

#Файл сообщений на английском

#Коды языков

#Примечания

#Связанные ссылки