Internacionalización

Addfox soporta la internacionalización a través del directorio estándar _locales de extensiones Chrome.

Estructura de directorios

Crea _locales en el directorio public/:

public

_locales

messages.json

zh_CN

messages.json

Formato de archivo de mensajes

Formato de 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"
      }
    }
  }
}

Uso en Manifest

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

Uso en código

JavaScript/TypeScript

// Obtener mensaje del idioma actual
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>
// Encapsular función de utilidad 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>
  );
}

Detectar idioma del usuario

// Obtener idioma actual del navegador
const currentLocale = chrome.i18n.getUILanguage();
console.log(currentLocale); // "zh-CN", "en", etc.

// Obtener todos los idiomas soportados
const locales = chrome.i18n.getAcceptLanguages();
locales.then(languages => console.log(languages));

Ejemplo completo

Archivo de mensajes en chino

// public/_locales/zh_CN/messages.json
{
  "appName": {
    "message": "Administrador de pestañas",
    "description": "Nombre de la extensión"
  },
  "appDescription": {
    "message": "Gestiona tus pestañas del navegador eficientemente",
    "description": "Descripción de la extensión"
  },
  "tabCount": {
    "message": "Tienes $COUNT$ pestañas",
    "description": "Mostrar número de pestañas",
    "placeholders": {
      "count": {
        "content": "$1",
        "example": "5"
      }
    }
  }
}

Archivo de mensajes en inglés

// 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"
      }
    }
  }
}

Códigos de idioma

Códigos de idioma comunes:

Idioma	Código
Chino simplificado	`zh_CN`
Chino tradicional	`zh_TW`
Inglés	`en`
Japonés	`ja`
Coreano	`ko`
Alemán	`de`
Francés	`fr`
Español	`es`

Lista completa consulta Documentación de Chrome.

Notas

default_locale debe especificarse en el manifest
Todos los archivos de mensajes deben incluir el idioma especificado en default_locale
Los marcadores de posición usan $1, $2, etc., correspondientes al segundo parámetro array de getMessage

#Internacionalización

#Estructura de directorios

#Formato de archivo de mensajes

#Uso en Manifest

#Uso en código

#JavaScript/TypeScript

#Vue

#React

#Detectar idioma del usuario

#Ejemplo completo

#Archivo de mensajes en chino

#Archivo de mensajes en inglés

#Códigos de idioma

#Notas

#Enlaces relacionados