Technical Details - BuxarTranslate Documentation

File: technical.html
Purpose: Technical information about architecture, API and internal structure

📁 Project Structure

buxartranslate/ ├── manifest.json # Extension configuration ├── background.js # Background script (main logic) ├── popup.html # Popup interface ├── popup.js # Popup logic ├── icons/ # Extension icons │ ├── icon-16.png │ ├── icon-32.png │ ├── icon-48.png │ ├── icon-64.png │ └── icon-128.png └── _locales/ # Localization ├── en/ │ └── messages.json ├── ru/ │ └── messages.json ├── de/ │ └── messages.json ├── es/ │ └── messages.json ├── it/ │ └── messages.json └── fr/ └── messages.json

🔑 Key Files

manifest.json

Type: WebExtension for Thunderbird

API Version: 78.0+

Permissions: storage, menus, notifications, activeTab

background.js

Purpose: Main extension logic

Functions: Context menu, translation API, window management

popup.js

Purpose: Settings interface logic

Functions: Settings management, language search, localization

🌐 API and Integrations

Google Translate API

Language detection: https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&dt=ld&q=...

Text translation: https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&dt=t&q=...

// Translation function via Google API
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

Context menu creation and management

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

browser.storage

Settings and data storage

// Save settings
await browser.storage.local.set(settings);

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

browser.notifications

System notifications display

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

browser.windows

Translation windows management

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

🔄 Messaging System

Communication between extension components:

// Message handler in 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") {
    // ... settings request handling
  }
  
  if (request.action === "saveSettings") {
    // ... settings save handling
  }
});
            

💾 Data Storage

// Data structure in localStorage
{
  // User settings
  "translateTo": "en",
  "autoDetectLanguage": true,
  "windowDisplayTime": 30,
  "userLang": "auto",
  
  // Recently used languages
  "recentLanguages": ["en", "ru", "es", "fr", "de"],
  
  // Translation history
  "lastTranslation": {
    "original": "Привет мир",
    "translated": "Hello world",
    "sourceLang": "ru", 
    "targetLang": "en",
    "timestamp": 1700000000000,
    "translator": "google"
  },
  
  // Opened translation window ID
  "translationWindowId": 12345
}
            

🔧 Extension Architecture

Component Structure

Background Script - main logic, context menu, API calls
Popup Interface - user interface for settings
Translation Window - separate window for translation display
Localization System - multilingual interface support

Data Flow

User selects text → context menu
Background script gets text → detects language
Request to Google Translate API → gets translation
Saves translation → shows notification and window
Updates popup interface with translation history

🛡️ Security

HTTPS Connections

All Google API requests are made via secure HTTPS protocol

Local Storage

User settings and data are stored locally in browser

Minimum Permissions

Extension requests only necessary permissions for operation

Error Handling

Comprehensive error handling and display system for users

← Back: Settings Next: Localization →

🔧 BuxarTranslate Technical Details