Detalles Técnicos - BuxarTranslate Documentación

Archivo: technical.html
Propósito: Información técnica sobre arquitectura, API y estructura interna

📁 Estructura del Proyecto

buxartranslate/ ├── manifest.json # Configuración de extensión ├── background.js # Script de fondo (lógica principal) ├── popup.html # Interfaz de popup ├── popup.js # Lógica de popup ├── icons/ # Iconos de extensión │ ├── icon-16.png │ ├── icon-32.png │ ├── icon-48.png │ ├── icon-64.png │ └── icon-128.png └── _locales/ # Localización ├── en/ │ └── messages.json ├── ru/ │ └── messages.json ├── de/ │ └── messages.json ├── es/ │ └── messages.json ├── it/ │ └── messages.json └── fr/ └── messages.json

🔑 Archivos Clave

manifest.json

Tipo: WebExtension para Thunderbird

Versión API: 78.0+

Permisos: storage, menus, notifications, activeTab

background.js

Propósito: Lógica principal de extensión

Funciones: Menú contextual, API de traducciones, gestión de ventanas

popup.js

Propósito: Lógica de interfaz de configuraciones

Funciones: Gestión de configuraciones, búsqueda de idiomas, localización

🌐 API e Integraciones

Google Translate API

Detección de idioma: https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=es&dt=ld&q=...

Traducción de texto: https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=es&dt=t&q=...

// Función de traducción vía API de Google
async function translateWithGoogle(text, sourceLang, targetLang) {
  const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodeURIComponent(text)}`;
  const response = await fetch(url);
  
  if (!response.ok) {
    throw new Error(`Google API error: ${response.status}`);
  }
  
  const data = await response.json();
  let translatedText = "";
  
  if (data && data[0]) {
    data[0].forEach(item => {
      if (item[0]) translatedText += item[0];
    });
  }
  
  return preserveLineBreaks(translatedText || text, text);
}
            

Thunderbird WebExtension API

browser.menus

Creación y gestión de menú contextual

browser.menus.create({
  id: "translate",
  title: menuTitle,
  contexts: ["selection"]
});
                    

browser.storage

Almacenamiento de configuraciones y datos

// Guardar configuraciones
await browser.storage.local.set(settings);

// Cargar configuraciones  
const settings = await browser.storage.local.get(defaultSettings);
                    

browser.notifications

Visualización de notificaciones del sistema

browser.notifications.create({
  type: "basic",
  iconUrl: "icon.png",
  title: title,
  message: message
});
                    

browser.windows

Gestión de ventanas de traducción

const translationWindow = await browser.windows.create({
  url: url,
  type: 'popup',
  width: 550,
  height: 600
});
                    

🔄 Sistema de Mensajes

Comunicación entre componentes de extensión:

// Manejador de mensajes en background.js
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getTranslation") {
    browser.storage.local.get("lastTranslation").then(result => {
      sendResponse(result);
    });
    return true;
  }
  
  if (request.action === "getSettings") {
    // ... manejo de solicitud de configuraciones
  }
  
  if (request.action === "saveSettings") {
    // ... manejo de guardado de configuraciones
  }
});
            

💾 Almacenamiento de Datos

// Estructura de datos en localStorage
{
  // Configuraciones de usuario
  "translateTo": "es",
  "autoDetectLanguage": true,
  "windowDisplayTime": 30,
  "userLang": "auto",
  
  // Idiomas usados recientemente
  "recentLanguages": ["es", "en", "ru", "de", "fr"],
  
  // Historial de traducciones
  "lastTranslation": {
    "original": "Hello world",
    "translated": "Hola mundo",
    "sourceLang": "en", 
    "targetLang": "es",
    "timestamp": 1700000000000,
    "translator": "google"
  },
  
  // ID de ventana de traducción abierta
  "translationWindowId": 12345
}
            

🔧 Arquitectura de Extensión

Estructura de Componentes

Background Script - lógica principal, menú contextual, llamadas API
Popup Interface - interfaz de usuario para configuraciones
Translation Window - ventana separada para visualización de traducción
Localization System - soporte de interfaz multilingüe

Flujo de Datos

Usuario selecciona texto → menú contextual
Script de fondo obtiene texto → detecta idioma
Solicitud a Google Translate API → obtiene traducción
Guarda traducción → muestra notificación y ventana
Actualiza interfaz de popup con historial de traducciones

🛡️ Seguridad

Conexiones HTTPS

Todas las solicitudes a API de Google se realizan mediante protocolo HTTPS seguro

Almacenamiento Local

Configuraciones y datos de usuario se almacenan localmente en navegador

Permisos Mínimos

Extensión solicita solo permisos necesarios para operación

Manejo de Errores

Sistema integral de manejo y visualización de errores para usuarios

← Atrás: Configuración Siguiente: Localización →

🔧 Detalles Técnicos de BuxarTranslate