I Built a Chrome Extension That Translates Text Instantly — LinguaSnap

#chrome #javascript #productivity #webdev

I got tired of copying text, opening Google Translate, pasting, and going back. So I built LinguaSnap — a Chrome extension that translates selected text instantly, right where you are.

How It Works

Select any text on any webpage
A tooltip appears below with the translation
That's it. No popups, no new tabs, no complicated settings.

Why I Built This

I read a lot of English documentation and articles. Every time I hit a word or sentence I didn't understand, the workflow was:

Select text → Copy → Open new tab → Go to Google Translate → Paste → Read → Go back

That's 6 steps for a simple translation. With LinguaSnap it's:

Select text → Read translation

Two steps. The translation appears right below your selection in a clean tooltip.

Features

Instant tooltip translation — select text, see translation immediately
17+ languages — English, Turkish, German, French, Spanish, Italian, Portuguese, Russian, Japanese, Korean, Chinese, Arabic, Hindi, and more
Auto-detect source language — no need to specify what language you're translating from
Listen to pronunciation — click the speaker icon to hear the translation spoken aloud
Save to vocabulary — build your personal word list while browsing
Translation history — access your last 100 translations
Export vocabulary — download your saved words as CSV
Right-click translate — context menu integration
Copy with one click — click the translation to copy it
Dark theme — clean, modern UI that doesn't distract
Enable/disable toggle — turn it off when you don't need it

The Tech

It's a simple Chrome Extension (Manifest V3):

Content Script — injects the tooltip UI into web pages
Background Service Worker — handles API calls to avoid CORS issues
Popup — settings, manual translation, history, and vocabulary tabs
Chrome Storage API — saves preferences and vocabulary locally

The translation API is MyMemory (free), which provides decent translations for most languages.

What I Learned

1. Content scripts can't make API calls directly — CORS blocks them. The solution is to send a message to the background service worker, make the API call there, and send the result back.

// content.js — send to background
chrome.runtime.sendMessage(
  { action: 'translate', text, targetLang },
  (response) => {
    if (response.success) showTranslation(response.translation);
  }
);

// background.js — handle and respond
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'translate') {
    fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(request.text)}&langpair=autodetect|${request.targetLang}`)
      .then(r => r.json())
      .then(data => sendResponse({ success: true, translation: data.responseData.translatedText }))
      .catch(() => sendResponse({ success: false }));
    return true; // Keep channel open for async
  }
});

2. Tooltip positioning is tricky — you need to handle viewport edges, scrolling, and the case where the tooltip would go off-screen.

3. Chrome Web Store review takes time — my first submission took about a week. Use activeTab instead of broad host permissions to speed up the review process.