Skip to main content
The Translate tab provides bidirectional AI-powered translation between English and Arabic. It’s marked as a beta feature in the extension.
The Translate tab requires an OpenAI API key. Users must add their own API key in the extension settings to use this feature.

​
How It Works

1

API Key Check

When the Translate tab is opened, the extension verifies an OpenAI API key exists in local storage.
2

Language Detection

The extension detects whether the selected text is English or Arabic based on character patterns.
3

Direction Display

Shows a language direction badge (e.g., “English → Arabic” or “عربي → إنجليزي”).
4

AI Translation

When the user clicks the translate button, sends the text to OpenAI with a specialized translation prompt.
5

Display Result

Shows the translated text with proper text direction (RTL for Arabic results).

​
API Used

The Translate tab uses OpenAI’s Chat Completions API with a specialized translation prompt: 
// From content.js:1119-1173
async function handleTranslate(contentArea) {
  const isArabic = currentLanguage === 'ar';
  const targetLang = isArabic ? 'English' : 'Arabic';
  
  const systemPrompt = `You are a professional translator. Translate the provided text to ${targetLang}. Output ONLY the translation. Do not include any explanations, notes, or the original text.`;

  const response = await chrome.runtime.sendMessage({
    action: 'callOpenAI',
    messages: [
      { role: 'system', content: systemPrompt },
      { role: 'user', content: currentSearchTerm }
    ],
    language: currentLanguage,
    maxTokens: 1000
  });
  
  const translationText = response.data.trim();
  setCache(cleanedTerm, 'translate', translationText);
}
The Translate tab uses a higher token limit (1000 vs 500) to accommodate longer translations.

​
Translation Direction

The extension automatically determines translation direction:

​
English → Arabic

When English text is detected: 
const targetLang = 'Arabic';
systemPrompt = `You are a professional translator. Translate the provided text to Arabic. Output ONLY the translation.`;

​
Arabic → English

When Arabic text is detected: 
const targetLang = 'English';
systemPrompt = `You are a professional translator. Translate the provided text to English. Output ONLY the translation.`;

​
User Interface

​
Language Direction Badge

Displays the translation direction: 
// From content.js:1062-1081
const dirBadge = document.createElement('div');
const srcSpan = document.createElement('span');
srcSpan.textContent = isArabic ? 'عربي' : 'English';

const arrowEl = document.createElement('span');
arrowEl.innerHTML = '<svg>...</svg>'; // Arrow icon

const tgtSpan = document.createElement('span');
tgtSpan.textContent = isArabic ? 'إنجليزي' : 'Arabic';

dirBadge.appendChild(srcSpan);
dirBadge.appendChild(arrowEl);
dirBadge.appendChild(tgtSpan);

​
Translate Button

// From content.js:1031-1034, 1109-1113
const TRANSLATE_BTN_HTML = (lang) =>
  '<svg>...</svg>' + // Translation icon
  (lang === 'ar' ? ' ترجم إلى الإنجليزية' : ' Translate to Arabic');

const translateBtn = document.createElement('button');
translateBtn.innerHTML = TRANSLATE_BTN_HTML(currentLanguage);
translateBtn.addEventListener('click', () => handleTranslate(contentArea));
While translating, the button shows:
  • English: “Translating…”
  • Arabic: “جاري الترجمة…”

​
Translation Result Display

// From content.js:1083-1097
if (translationText) {
  const resultLabel = document.createElement('div');
  resultLabel.textContent = isArabic ? 'الترجمة' : 'Translation';
  
  const result = document.createElement('div');
  result.textContent = translationText;
  
  // When result is Arabic (from English source), force RTL
  if (!isArabic) {
    result.style.direction = 'rtl';
    result.style.textAlign = 'right';
  }
}
The extension automatically applies RTL (right-to-left) text direction to Arabic translations for proper display.

​
Retranslate Option

After a translation is shown, users can request a new translation: 
// From content.js:1099-1107
const retranslateBtn = document.createElement('button');
retranslateBtn.textContent = isArabic ? 'ترجمة مجدداً' : 'Translate again';
retranslateBtn.addEventListener('click', () => {
  const cleanedTerm = cleanSearchTerm(currentSearchTerm, currentLanguage);
  cache.delete(getCacheKey(cleanedTerm, 'translate'));
  loadTranslateTab(contentArea);
});
This clears the cache and requests a fresh translation from OpenAI.

​
Caching

Translations are cached to prevent duplicate API calls: 
// From content.js:1050-1053
const cleanedTerm = cleanSearchTerm(currentSearchTerm, currentLanguage);
const cached = getFromCache(cleanedTerm, 'translate');
if (cached) {
  renderTranslateTab(contentArea, cached);
  return;
}
Cache keys include language, so translating “hello” from English and “مرحبا” from Arabic are stored separately.

​
Beta Status

The Translate tab is marked as beta: 
// From content.js:37-38
{ id: 'translate', label: 'Translate', labelAr: 'ترجمة', beta: true,
  svg: '<svg>...</svg>' }
This displays a “beta” badge on the tab: 
// From content.js:277-282
if (tab.beta) {
  const badge = document.createElement('span');
  badge.className = 'wiki-tab-beta-badge';
  badge.textContent = 'beta';
  tabEl.appendChild(badge);
}
The beta designation indicates this feature is newer and may undergo changes based on user feedback.

​
API Key Management

Shares the same API key system as the AI tab:

​
Checking for API Key

// From content.js:1035-1048
async function loadTranslateTab(contentArea) {
  try {
    const keyCheck = await chrome.runtime.sendMessage({ 
      action: 'checkOpenAIKey' 
    });
    if (!keyCheck.hasKey) {
      renderAINoKey(contentArea);
      return;
    }
  } catch (e) {
    renderAINoKey(contentArea);
    return;
  }
}

​
No Key State

Displays the same “Add your OpenAI API key” message as the AI tab: 
// From content.js:1001-1027 (shared with AI tab)
function renderAINoKey(contentArea) {
  const text = currentLanguage === 'ar'
    ? 'أضف مفتاح OpenAI API في إعدادات الإضافة لاستخدام ميزات الذكاء الاصطناعي.'
    : 'Add your OpenAI API key in the extension settings to use AI features.';
}

​
Error Handling

// From content.js:1143-1151
if (!response.success) {
  if (response.error === 'NO_API_KEY' || response.error === 'INVALID_API_KEY') {
    renderAINoKey(contentArea);
  } else {
    showTabError(contentArea,
      isArabic ? 'فشلت الترجمة. يرجى المحاولة مرة أخرى.' 
               : 'Translation failed. Please try again.'
    );
  }
}
Redirects to the “no key” state, prompting the user to add or fix their API key.
Displays: “Translation failed. Please try again.” for network errors, rate limits, or other OpenAI API errors.

​
Translation Quality

The system prompt emphasizes translation-only output: 
systemPrompt = `You are a professional translator. Translate the provided text to ${targetLang}. Output ONLY the translation. Do not include any explanations, notes, or the original text.`;
This ensures:
  • No explanations or notes mixed with translation
  • No original text repeated in the response
  • Clean, direct translation suitable for display
The “professional translator” framing in the prompt helps ensure high-quality, natural translations.

​
Text Direction Handling

Special care is taken with bidirectional text:

​
Badge Direction

// From content.js:1077
dirBadge.setAttribute('dir', 'ltr');
The direction badge is always LTR to prevent layout issues with mixed scripts.

​
Result Direction

// From content.js:1092-1096
if (!isArabic) {
  result.style.direction = 'rtl';
  result.style.textAlign = 'right';
}
When translating English → Arabic, the result explicitly uses RTL layout.
Proper text direction is crucial for Arabic display. Without explicit RTL styling, Arabic text may wrap incorrectly or appear with wrong punctuation placement.

​
Language Detection

Shares the same detection logic as other tabs: 
// From content.js:139-151
function containsArabic(text) {
  const arabicRegex = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF]/;
  return arabicRegex.test(text);
}

function detectLanguage(text) {
  if (preferredLanguage !== 'auto') {
    return preferredLanguage;
  }
  return containsArabic(text) ? 'ar' : 'en';
}

​
Use Cases

The Translate tab is ideal for:
  • Reading foreign content: Translate unfamiliar words or phrases while reading
  • Language learning: Compare original and translated text
  • Quick reference: Get instant translations without leaving the page
  • Bilingual documents: Work with mixed-language content
Unlike the AI tab’s 5-question limit, translations can be performed unlimited times (subject only to OpenAI API rate limits and quota).

​
Cost Considerations

Users pay for their own OpenAI API usage. Translation costs depend on text length:
  • Uses max_completion_tokens: 1000 (higher than AI tab’s 500)
  • Longer passages will cost more tokens
  • Consider using for key phrases rather than full paragraphs

​
Data Source

OpenAI Chat Completions API: Requires API key (paid)

Build docs developers (and LLMs) love

Get started for freeTalk to us