Smart Translation Assistant - Web Extension
This is a lightweight and efficient personal tool for translating text on websites and even the text you write yourself. With multiple methods for translation and word lookup, it offers a fast and seamless experience:
- Text Selection Translation: Simply select any text, and the translation box will appear right where you selected.
Alternatively, a small translation icon can appear below the selected text—clicking it will show the translation.
- Element Selection Translation: Activate
Select Elementmode from the extension icon. Then click on any part of the page (e.g., paragraph or button) to translate it entirely, without breaking the page layout.
- In-Field Translation: When typing inside a form or text field, press the
Ctrl + /shortcut or click the inline translator icon to instantly translate the content before sending.
- Advanced Popup/Sidepanel Translation: Clicking the extension icon opens a popup with extended features such as multi-accent pronunciation and dictionary support and history.
This extension is developed solely for personal use and keeps smart and fast translation always within reach.
Smart and fast translation, anytime, anywhere.
💸 Free & Open Source: Always free, powered by open-source code.
🔊 Word and Sentence Pronunciation:
Each translation comes with audio playback for accurate pronunciation. You can also choose from different accents. Click the extension icon to access advanced pronunciation options.
📙 Dictionary Mode:
When selecting a word, you'll not only get a translation but also helpful information like definitions, synonyms, word type, and usage examples.
✅ Supports Multiple Translation Providers:
You can choose from several AI-powered translation providers:
- Google Translate (✔ Free)
- DeepL Translate (✔ Free)
- Gemini (✔ Free)
- Microsoft Bing Translator (✔ Free)
- Yandex Translate (✔ Free)
- Browser Translator (✔ Free)
- WebAI to API (✔ Free)
- OpenRouter
- OpenAI
- DeepSeek
- Custom OpenAI Compatible (refrence to Advanced Settings)
🔑 Multiple API Keys with Automatic Failover: Enter multiple API keys per provider. If one key reaches its quota or fails, the extension automatically switches to the next working key. Successful keys are prioritized for future requests.
- A modern Chromium-based browser or Firefox (Chrome, Edge, Brave, etc.)
- A valid API key (unless using Google Translate or WebAI to API)
Manual Installation
- Download the latest Chrome version here.
- Extract the downloaded ZIP file.
- Open
chrome://extensions/and enable Developer mode. - Drag the extracted folder into the page to install the extension.
- Done!
Note: After installation, click the extension icon, go to Settings, and enter your API Key.
- Download the latest Firefox version here.
- Extract the downloaded ZIP file.
- Open
about:debugging#/runtime/this-firefox/. - Click
Load Temporary Add-on...and select themanifest.jsonfile from the extracted folder. - Done!
Note: After installation, click the extension icon, go to Settings, and enter your API Key.
To use AI-based translation, you’ll need an API key from one of the providers listed below:
| Provider | How to Get API Key | Cost |
|---|---|---|
| Google Translate | Dont Need | Free |
| Yandex Translate | Dont Need | Free |
| Bing Translate | Dont Need | Free |
| DeepL | DeepL API Keys | Free |
| Google Gemini | Google AI Studio | Free |
| WebAI to API | Local Server | Free |
| OpenRouter | OpenRouter API Keys | Free |
| OpenAI | OpenAI API Keys | Paid |
| DeepSeek | DeepSeek API Keys | Paid |
| Custom OpenAI | - | - |
Note: WebAI to API is a local Python-based server that allows you to use AI translation without an API key.
Important: If you're in Iran, you may need a VPN to access and register for free API keys.
You can enter multiple API keys for each provider (one per line). The extension will:
- ✅ Automatically try the next key if the current one fails
- ✅ Promote working keys to the top for better performance
-
Add the Extension to Your Browser
After installation, pin the extension to your browser toolbar for quick and easy access.
-
Activate "Element Selection Mode"
To translate any specific part of a web page, you first need to activate
Element Selection Mode. You can do this using one of the following methods:- Click on the extension icon and select the relevant option.
- Right-click anywhere on the page and choose the option from the context menu.
- Or use the keyboard shortcut for faster access.
-
Translate Text by Clicking an Element
Once the mode is active, hover over any part of the page to highlight it. Click the highlighted area to instantly translate its content.
-
Revert Translations
To undo translations and restore the original text, use either of the following methods:
- Press the
ESCkey. - Click the
Revertbutton from within the extension popup.
- Press the
-
Translation Cache
When you translate and then revert a piece of text, its translation is cached. On subsequent translations, the cached result will be shown instantly. A small "From Cache" label will appear temporarily in the top-right corner of the page.
-
Clear the Translation Cache
To force a fresh translation from the server, click the "From Cache" label. This will clear the cached entry for that element.
To quickly activate Element Selection Mode, you can use configurable keyboard shortcuts.
We recommend setting them manually to avoid conflicts with browser or system shortcuts.
You can modify the default shortcuts as needed:
-
In Chrome:
Go tochrome://extensions/shortcuts -
In Firefox:
- Right-click on the extension icon in the toolbar and choose
Manage Extension. - In the opened page, click the gear icon.
- Select
Manage Extension Shortcuts.
- Right-click on the extension icon in the toolbar and choose
This section documents known limitations and issues that users may encounter when using the extension.
When using Bing Translator with the Select Element feature on complex or lengthy pages, the translated text may not maintain proper positioning and can appear in incorrect locations. This is a known limitation of the Bing service that doesn't align well with the extension's current architecture.
Workaround: For best results with Select Element mode, consider using other providers like Google Translate, Gemini, or DeepL which handle complex page structures more reliably.
To maximize efficiency and minimize token usage/API requests from translation providers, the extension heavily optimizes text before sending it for translation. This optimization strategy, while necessary for cost and performance efficiency, can result in reduced translation quality when using Select Element mode on complex web pages.
Technical Details: The extension groups and chunks text content to minimize the number of API calls. On pages with intricate layouts or mixed content types, this optimization may split contextual information in ways that affect translation accuracy.
Trade-off: This is an intentional design decision to balance:
- ✅ Reduced API costs (fewer tokens used)
- ✅ Faster translation speed
- ✅ Lower resource consumption
- ❌ Potentially reduced translation quality in complex scenarios
Recommendation: For critical content where translation quality is paramount, consider using Popup/Sidepanel or Select Text translation instead of Select Element mode, as it provides better context preservation.
In the API Settings page of the extension, each provider has customizable options to let you choose and configure different models:
-
Google Gemini
You can change the
API URLto use different Gemini models. For available models and usage info, see Gemini official documentation. Choosing the right model may improve translation quality, speed, or reduce API cost. -
OpenAI
You can select models like
gpt-4,gpt-3.5-turbo, and more by entering their names in the settings. Visit OpenAI docs for the full list. This allows you to customize translation quality vs. cost. -
OpenRouter
Similar to OpenAI, OpenRouter supports a variety of models. You can pick one from the list at OpenRouter documentation and use it by name.
-
DeepSeek
You can also add the model in the settings on DeepSeek by referring to the DeepSeek documentation.
-
DeepL
DeepL offers both Free and Pro API tiers. You can configure the API tier (Free or Pro) in settings. The Free tier has usage limits, while the Pro tier offers higher limits and additional features. DeepL also supports formality settings (default, more, less) for certain language pairs. See DeepL documentation for more details.
-
WebAI to API
This is a free local backend for translation. You can configure your own model in the settings. For setup, see WebAI to API GitHub repo.
-
Custom (OpenAI Compatible)
For maximum flexibility, this option lets you connect to any API service that uses the OpenAI chat completions format. Simply enter the custom
API URL,API Key, andModel Namein the settings. This is ideal for using self-hosted models, local LLMs (e.g., through Ollama), or other compatible third-party providers. For the required format, see the OpenAI API reference. -
Multi-API Key Support
All providers support entering multiple API keys (one per line in the API key field). Use the "Test Keys" button to validate all keys and automatically reorder them (valid keys first). The extension will automatically failover to the next key if one fails due to quota limits or invalid credentials.
These options let you balance between cost, quality, and speed.
The extension uses default models with minimum setup required — but upgrading the model will improve translation results.
Default models used:
- For
OpenAIandOpenRouter:gpt-3.5-turbo - For
Google GeminiandWebAI to API:gemini-2.5-flash - For
DeepSeek:deepseek-chat
If this project helped you and you’d like to support it, you can buy me a coffee ☕
| Donation Method | 🔗 Link |
|---|---|
| BuyMeACoffee |  |
| USDT (Ethereum) | 0x76DAF7D7C3f7af9B90e16B5C25d063ff3A1A0f8f |
| Bitcoin (BTC) | bc1qgxj96s6nks6nyhzlncw65nnuf7pyngyyxmfrsw |
| PayPal |  |
Thank you for your support!
- iSegar0
- Mohammad
-iSegar0-blue?style=flat&logo=x){kind=icon}
-M_Khani65-blue?style=flat&logo=x){kind=icon}
Make sure Node.js and pnpm are installed. Then, clone the repository and install the dependencies:
git clone https://github.com/iSegar0/Translate-It.git
cd Translate-It
pnpm installAfter installing dependencies, run the setup command to ensure all development tools are configured:
pnpm run setupThis will configure the development environment and install any additional tools needed for validation.
To generate the unpacked extension files for development, run:
# Build for both browsers
pnpm run build
# Build for a specific browser
pnpm run build:chrome
pnpm run build:firefoxThis will create the necessary files in the dist/chrome/ and dist/firefox/ directories, which you can load as temporary extensions in your browser.
To actively develop and apply changes in real time, use one of the following commands:
# Watch for changes for both browsers
pnpm run watch:chrome
pnpm run watch:firefoxTo ensure code quality and catch potential issues early, you can run ESLint:
# Lint source code for both browsers
pnpm run lint
# Lint for specific browser
pnpm run lint:source:chrome
pnpm run lint:source:firefoxThis command will scan all src/**/*.js files and report any syntax errors or unsafe patterns.
Validate the built extensions to ensure they meet browser store requirements:
# Validate both browsers
pnpm run validate
# Validate specific browsers
pnpm run validate:firefox
pnpm run validate:chromeNote: For Chrome validation, you need web-ext installed. If it's not available, install it with:
pnpm run setup:chrome-validatorBefore submitting your changes, run the comprehensive pre-submission check:
pnpm run pre-submitThis command runs linting, builds the extension, and validates both browser versions.
When you are ready to create distributable packages, use the following commands.
To package the source code:
This command creates a .zip archive of the project's source files, named Source-vX.X.X.zip.
pnpm run sourceTo create a full release:
This command bundles everything. It creates the source code archive and builds the final, installable .zip packages for both browsers.
pnpm run publishAfter running, the dist/Publish directory will contain:
Source-vX.X.X.zipTranslate-It-vX.X.X-for-Chrome.zipTranslate-It-vX.X.X-for-Firefox.zip
- ⭐ Star the repo to support the project.
- 🐞 Report issues via GitHub Issues.
- 📝 Submit a Pull Request (PR) to help improve the extension.
Icons used in this project are provided by Flaticon and created by:
— Pixel perfect (Main icon)
— Pixel perfect (Select)
— Pixel perfect (Paste)
— Tanah Basah (Voice Command)
— photo3idea_studio (Translate)
— Midev (Clear)
— Miftakhul Rizky (Close)
— Freepik (Swap)
— Freepik (Settings)
— Catalin Fertu (Copy)
— KP Arts (Revert)
— KP Arts (Side Panel)
This project is licensed under the MIT License — feel free to modify and share!
year 2025