Archivo: localization.html
Propósito: Guía de localización y adición de nuevos idiomas
🌐 Idiomas de Interfaz Soportados
🇺🇸 Inglés en
Idioma por defecto, soporte completo
🇷🇺 Ruso ru
Localización completa de interfaz
🇩🇪 Alemán de
Idioma de interfaz alemán
🇪🇸 Español es
Idioma de interfaz español
🇫🇷 Francés fr
Idioma de interfaz francés
🇮🇹 Italiano it
Idioma de interfaz italiano
📁 Estructura de Localización
La localización está organizada según estándar WebExtensions en carpeta _locales:
_locales/
├── en/
│ └── messages.json # Traducciones en inglés
├── ru/
│ └── messages.json # Traducciones en ruso
├── de/
│ └── messages.json # Traducciones en alemán
├── es/
│ └── messages.json # Traducciones en español
├── it/
│ └── messages.json # Traducciones en italiano
└── fr/
└── messages.json # Traducciones en francés
📝 Formato de Archivos de Traducción
Cada archivo messages.json contiene objeto con claves de traducción:
{
"extensionName": {
"message": "BuxarTranslate",
"description": "Nombre de extensión"
},
"extensionDescription": {
"message": "Traducir texto seleccionado en correos con un clic",
"description": "Descripción de extensión"
},
"translateTo": {
"message": "Traducir a $1",
"description": "Elemento de menú contextual"
},
"selectTextRightClick": {
"message": "Seleccionar texto → Clic derecho → Traducir",
"description": "Instrucción en popup"
}
}
🔧 Añadir Nuevo Idioma
1. Crear carpeta para idioma
Cree carpeta con código de idioma en directorio _locales/
mkdir _locales/ja # para idioma japonés
2. Crear archivo messages.json
Cree archivo de traducción en nueva carpeta
touch _locales/ja/messages.json
3. Añadir traducciones
Copie estructura de archivo inglés y traduzca todos los valores
{
"extensionName": {
"message": "BuxarTranslate",
"description": "Nombre de extensión"
},
"translateTo": {
"message": "Traducir a $1",
"description": "Elemento de menú contextual"
}
}
4. Actualizar escaneo de idiomas
Añada código de idioma a función scanAvailableLanguages() en popup.js
// En archivo popup.js
const possibleLangs = ['en', 'ru', 'es', 'de', 'fr', 'it', 'ja', 'zh', 'ko'];
// Añada su idioma al array possibleLangs
5. Probar traducción
Instale extensión y pruebe operación del nuevo idioma
🔄 Carga Dinámica de Traducciones
El sistema carga traducciones para idioma seleccionado dinámicamente:
// Carga de traducciones para idioma específico
async function loadTranslations(lang) {
try {
const response = await fetch(`_locales/${lang}/messages.json`);
if (response.ok) {
return await response.json();
}
} catch (error) {
console.error(`Error loading translations for ${lang}:`, error);
}
return null;
}
// Gestor de idioma
const LanguageManager = {
async init() {
const storage = await browser.storage.local.get('userLang');
const userLang = storage.userLang || 'auto';
// Determinar idioma de interfaz
if (userLang === 'auto') {
const uiLang = browser.i18n.getUILanguage();
this.currentLang = uiLang.split('-')[0];
} else {
this.currentLang = userLang;
}
// Cargar traducciones
this.translations = await loadTranslations(this.currentLang) || {};
}
};
🎯 Elementos Clave de Traducción
Claves obligatorias para traducción:
extensionName - nombre de extensiónextensionDescription - descripción de extensióntranslateTo - elemento de menú contextualselectTextRightClick - instrucción de usotargetLanguage - encabezado de selección de idiomasaveSettings - botón guardar configuracionesoriginalText - encabezado de texto originaltranslatedText - encabezado de texto traducido
Marcadores de posición en traducciones:
// Ejemplo de uso de marcadores de posición
"translateTo": {
"message": "Traducir a $1",
"description": "Elemento de menú contextual"
}
// En código:
const menuTitle = browser.i18n.getMessage("translateTo", [targetLangName]);
🔍 Prueba de Localización
Detección Automática
Establezca userLang: "auto" para probar detección automática de idioma
Selección Manual
Use lista desplegable en configuraciones para cambiar entre idiomas
Verificar Todos los Elementos
Asegúrese de que todos los elementos de interfaz y mensajes estén traducidos
Probar Marcadores de Posición
Verifique reemplazo correcto de $1, $2 etc. en traducciones
⚠️ Problemas Comunes
Claves Faltantes
Solución: Asegúrese de que todas las claves de versión inglesa estén presentes en traducción
Marcadores de Posición Incorrectos
Solución: Verifique correspondencia de cantidad de $1, $2 en traducción y código
Codificación de Archivos
Solución: Guarde archivos JSON en codificación UTF-8
Errores Sintácticos
Solución: Verifique JSON en validez usando validador JSON