TranslateX — AI Translator for Webpages

# TranslateX — AI-Powered Translation Browser Extension **Version:** 0.0.1 **Platforms:** Chrome (MV3), Firefox, Safari **Website:** [toolbase.tools](https://toolbase.tools/?utm_source=TranslateX) --- ## Overview TranslateX is a powerful, lightweight browser extension that brings seamless translation directly into your browsing experience. Whether you're reading foreign-language articles, typing in input fields, or chatting in multilingual conversations — TranslateX handles it all with a single click or keyboard shortcut. --- ## Key Features ### 🔤 Text Translation (Selection) Select any text on a webpage and instantly translate it into your preferred language. A floating tooltip appears with: - Translated text with dictionary definitions (when available) - Text-to-Speech for both source and translated text (powered by Google Translate TTS) - One-click copy to clipboard - Inline source and target language selector — change languages on the fly ### ✏️ Input Translation Type naturally in your language inside any input field, text area, or rich text editor — then trigger translation to replace your text with the translated version. Perfect for: - Replying to emails in a foreign language - Chatting on international platforms - Writing content in multiple languages ### 🎯 Smart Auto-Detection - Automatically detects the page language from the `<html lang>` attribute - Only shows the translation icon when the page language differs from your primary language — no unnecessary interruptions - Auto-detects your browser language for the extension UI ### 🔊 Text-to-Speech Listen to both original and translated text with natural-sounding pronunciation powered by Google Translate's TTS engine. Works on any website without restrictions. --- ## Translation Engines | Engine | Description | Requires API Key | |--------|-------------|:---:| | **Google Translate** | Fast, reliable, supports 100+ languages with dictionary definitions | ❌ | | **Bing Translator** | Microsoft's translation engine | ❌ | | **OpenAI / ChatGPT** | AI-powered translation with customizable prompts. Compatible with OpenRouter and other OpenAI-compatible services | ✅ | | **Chrome Built-in AI** | On-device translation using Chrome's built-in language model — fully offline, private | ❌ | --- ## Trigger Methods | Method | Description | |--------|-------------| | **Keyboard Shortcut** | `Alt+T` (default, customizable) | | **Triple Space** | Press `Space` 3 times quickly in any input field | | **Context Menu** | Right-click → "Translate input text" | | **Popup** | Click the extension icon to translate text manually | | **Selection Icon** | Select text on any page → click the floating translate icon | --- ## Supported Languages TranslateX supports **100+ languages** for translation including: English, Vietnamese, Chinese (Simplified), Japanese, Korean, Spanish, French, German, Thai, Russian, Portuguese, Arabic, Hindi, Italian, Dutch, Polish, Turkish, Indonesian, Swedish, and many more. **Extension UI** is available in: English, Vietnamese, Chinese, Japanese, Korean, Spanish, French, German, Thai. --- ## Privacy & Security - 🔒 **All API keys stored locally** — never sent to any third-party server - 🔒 **No data collection** — your translations are processed directly between your browser and the translation engine - 🔒 **Chrome Built-in AI option** — translate completely offline with on-device models - 🔒 **Minimal permissions** — only requests the permissions strictly necessary for functionality ### Permissions Used | Permission | Purpose | |------------|---------| | `storage` | Save your settings and preferences | | `scripting` | Inject translation functionality into web pages | | `contextMenus` | Add "Translate" option to right-click menu | | `offscreen` | Play TTS audio in the background | | `host_permissions: <all_urls>` | Access text content on any webpage for translation | --- ## Technical Details - **Manifest Version:** 3 (latest Chrome extension standard) - **Framework:** [WXT](https://wxt.dev) + React 19 - **UI Library:** Radix UI + TailwindCSS - **Bundle Size:** ~647 KB (total, all assets included) - **Content Script:** ~49 KB - **Background Service Worker:** ~30 KB --- ## Installation ### Chrome / Edge / Brave 1. Download the latest release `.zip` file 2. Extract the archive 3. Open `chrome://extensions` 4. Enable "Developer mode" (top right) 5. Click "Load unpacked" and select the extracted folder ### Firefox 1. Download the Firefox build `.zip` 2. Open `about:debugging#/runtime/this-firefox` 3. Click "Load Temporary Add-on" and select the `.zip` file --- ## Configuration 1. Click the TranslateX icon in the toolbar 2. Click the ⚙️ Settings icon to open the Options page 3. Configure: - **Primary Language** — your native language (for text translation) - **Translate Input To** — target language for input translation - **Translation Engine** — choose between Google, Bing, OpenAI, or Chrome AI - **Keyboard Shortcut** — customize your trigger key - **Extension Language** — choose UI language or auto-detect from browser --- ## Changelog ### v0.0.1 (Initial Release) - Text translation with floating tooltip (Google Translate-style UI) - Input translation with triple-space and keyboard shortcut triggers - Text-to-Speech for source and translated text - Multiple translation engine support (Google, Bing, OpenAI, Chrome AI) - Inline language selector on tooltip and popup - Smart auto-detection of page language - Multi-language extension UI (9 languages) - Context menu integration - Dark/light mode support in options page --- ## Support - **Website:** [toolbase.tools](https://toolbase.tools/?utm_source=TranslateX) - **Issues:** Report bugs and feature requests via the project repository --- *Built with ❤️ by TranslateX Team*