Détails Techniques - Documentation BuxarTranslate

Fichier: technical.html
But: Informations techniques sur l'architecture, l'API et la structure interne

📁 Structure du Projet

buxartranslate/ ├── manifest.json # Configuration de l'extension ├── background.js # Script d'arrière-plan (logique principale) ├── popup.html # Interface popup ├── popup.js # Logique popup ├── icons/ # Icônes de l'extension │ ├── icon-16.png │ ├── icon-32.png │ ├── icon-48.png │ ├── icon-64.png │ └── icon-128.png └── _locales/ # Localisation ├── en/ │ └── messages.json ├── ru/ │ └── messages.json ├── de/ │ └── messages.json ├── es/ │ └── messages.json ├── it/ │ └── messages.json └── fr/ └── messages.json

🔑 Fichiers Clés

manifest.json

Type: WebExtension pour Thunderbird

Version API: 78.0+

Permissions: storage, menus, notifications, activeTab

background.js

But: Logique principale de l'extension

Fonctions: Menu contextuel, API de traductions, gestion des fenêtres

popup.js

But: Logique de l'interface des paramètres

Fonctions: Gestion des paramètres, recherche de langues, localisation

🌐 API et Intégrations

Google Translate API

Détection de langue: https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=fr&dt=ld&q=...

Traduction de texte: https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=fr&dt=t&q=...

// Fonction de traduction via API 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

Création et gestion du menu contextuel

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

browser.storage

Stockage des paramètres et données

// Sauvegarder les paramètres
await browser.storage.local.set(settings);

// Charger les paramètres  
const settings = await browser.storage.local.get(defaultSettings);
                    

browser.notifications

Affichage des notifications système

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

browser.windows

Gestion des fenêtres de traduction

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

🔄 Système de Messagerie

Communication entre les composants de l'extension:

// Gestionnaire de messages dans 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") {
    // ... traitement de la demande de paramètres
  }
  
  if (request.action === "saveSettings") {
    // ... traitement de la sauvegarde des paramètres
  }
});
            

💾 Stockage des Données

// Structure de données dans localStorage
{
  // Paramètres utilisateur
  "translateTo": "fr",
  "autoDetectLanguage": true,
  "windowDisplayTime": 30,
  "userLang": "auto",
  
  // Langues récemment utilisées
  "recentLanguages": ["fr", "en", "ru", "es", "de"],
  
  // Historique des traductions
  "lastTranslation": {
    "original": "Hello world",
    "translated": "Bonjour le monde",
    "sourceLang": "en", 
    "targetLang": "fr",
    "timestamp": 1700000000000,
    "translator": "google"
  },
  
  // ID de la fenêtre de traduction ouverte
  "translationWindowId": 12345
}
            

🔧 Architecture de l'Extension

Structure des Composants

Background Script - logique principale, menu contextuel, appels API
Popup Interface - interface utilisateur pour les paramètres
Translation Window - fenêtre séparée pour l'affichage de la traduction
Localization System - support d'interface multilingue

Flux de Données

Utilisateur sélectionne le texte → menu contextuel
Script d'arrière-plan obtient le texte → détecte la langue
Requête à Google Translate API → obtient la traduction
Sauvegarde la traduction → affiche notification et fenêtre
Met à jour l'interface popup avec l'historique des traductions

🛡️ Sécurité

Connexions HTTPS

Toutes les requêtes API Google sont effectuées via le protocole HTTPS sécurisé

Stockage Local

Les paramètres et données utilisateur sont stockés localement dans le navigateur

Permissions Minimales

L'extension demande uniquement les permissions nécessaires au fonctionnement

Gestion des Erreurs

Système complet de gestion et d'affichage des erreurs pour les utilisateurs

← Retour: Paramètres Suivant: Localisation →

🔧 Détails Techniques de BuxarTranslate