Skip to main content

​
Overview

Knowledge Tooltip supports both English and Arabic. You can configure the extension to automatically detect the language of selected text or set a specific language preference.

​
Language Options

The extension offers three language modes:
  1. Auto-detect (Default): Automatically identifies whether selected text is English or Arabic
  2. English: Always fetch content in English, regardless of the selected text
  3. Arabic (العربية): Always fetch content in Arabic

​
Setting Your Language Preference

1

Open the extension popup

Click the Knowledge Tooltip icon in your browser toolbar
2

Find the Language Preference section

The language dropdown is in the second settings section
3

Select your preferred language

Choose from:
  • Auto-detect
  • English
  • العربية (Arabic)
4

Changes apply immediately

The setting saves automatically and applies to all tabs

​
How Language Detection Works

When you select Auto-detect, the extension uses Arabic Unicode character detection: 
// Detect if text contains Arabic characters
function containsArabic(text) {
  const arabicRegex = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF]/;
  return arabicRegex.test(text);
}

// Detect language of selected text
function detectLanguage(text) {
  if (preferredLanguage !== 'auto') {
    return preferredLanguage;
  }
  return containsArabic(text) ? 'ar' : 'en';
}
This regex checks for characters in the Arabic Unicode ranges:
  • \u0600-\u06FF: Arabic
  • \u0750-\u077F: Arabic Supplement
  • \u08A0-\u08FF: Arabic Extended-A
Language detection happens instantly when you select text, before the tooltip is displayed.

​
Storage and Sync

Your language preference is stored in chrome.storage.sync and synced across devices: 
// Load language preference
const result = await chrome.storage.sync.get(['enabled', 'language']);
const language = result.language || 'auto';

// Save language preference
languageSelect.addEventListener('change', async (e) => {
  const language = e.target.value;
  
  await chrome.storage.sync.set({ language });
  
  // Notify all tabs about the change
  const tabs = await chrome.tabs.query({});
  tabs.forEach(tab => {
    chrome.tabs.sendMessage(tab.id, {
      action: 'changeLanguage',
      language
    }).catch(() => {});
  });
});

​
Impact on Content

The selected language affects:

​
Wikipedia Summaries

Content is fetched from the appropriate Wikipedia domain:
  • English: en.wikipedia.org
  • Arabic: ar.wikipedia.org
const wikiDomain = language === 'ar' ? 'ar.wikipedia.org' : 'en.wikipedia.org';
const url = `https://${wikiDomain}/api/rest_v1/page/summary/${encodeURIComponent(term)}`;

​
Wiktionary Definitions

Definitions come from language-specific Wiktionary sites: 
const wikiDomain = language === 'ar' ? 'ar.wiktionary.org' : 'en.wiktionary.org';
const url = `https://${wikiDomain}/api/rest_v1/page/definition/${encodeURIComponent(term)}`;

​
Wikidata Facts

Fact labels are translated based on your language preference: 
const propertyMap = {
  P31: language === 'ar' ? 'النوع' : 'Instance of',
  P569: language === 'ar' ? 'تاريخ الميلاد' : 'Born',
  P570: language === 'ar' ? 'تاريخ الوفاة' : 'Died',
  P27: language === 'ar' ? 'الجنسية' : 'Country',
  // ... more properties
};

​
AI Responses

OpenAI is instructed to respond in your preferred language: 
const lang = currentLanguage === 'ar' ? 'Arabic' : 'English';
const systemContent = `You are a helpful assistant that explains topics in simple, plain language. Respond in ${lang}.`;

​
UI Adaptation

​
Right-to-Left (RTL) Layout

When Arabic is detected or selected, the tooltip automatically switches to RTL layout: 
if (language === 'ar') {
  tooltip.setAttribute('dir', 'rtl');
  tooltip.classList.add('rtl');
}

​
Translated Labels

All UI elements are displayed in the detected language: 
const TABS = [
  { id: 'summary', label: 'Summary', labelAr: 'ملخص' },
  { id: 'define', label: 'Define', labelAr: 'تعريف' },
  { id: 'facts', label: 'Facts', labelAr: 'حقائق' },
  { id: 'ai', label: 'AI', labelAr: 'ذكاء' },
  { id: 'translate', label: 'Translate', labelAr: 'ترجمة' }
];

// Render tab label
label.textContent = language === 'ar' ? tab.labelAr : tab.label;
Changing the language preference clears the content cache to ensure fresh data is fetched in the new language.

​
Cache Handling

When you change the language setting, the extension clears its cache: 
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'changeLanguage') {
    preferredLanguage = message.language;
    cache.clear(); // Clear all cached content
  }
});
This ensures that when you look up the same term again, it will be fetched in the new language.

​
Best Practices

Use Auto-detect

If you read content in multiple languages, keep it on Auto-detect for the best experience.

Set a Fixed Language

If you always want results in one language, set it explicitly to avoid unexpected switches.

Clear Cache After Changes

Cache is automatically cleared, but you may need to refresh pages to see the change.

Bilingual Content

For pages with mixed English and Arabic, Auto-detect works best.

​
Translation Feature

The Translate tab allows you to translate selected text between English and Arabic:
  • English → Arabic: When English text is detected
  • Arabic → English: When Arabic text is detected
The Translate tab requires an OpenAI API key to function. See the OpenAI API Configuration guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us