Translate It!

Smart Translation Assistant - Web Extension

---

• English | • فارسی

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 Element mode 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.

✨ Key Features

💸 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)
• 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)

📋 Requirements

• A modern Chromium-based browser or Firefox (Chrome, Edge, Brave, etc.)
• A valid API key (unless using Google Translate or WebAI to API)

---

🔧 Download & Install

Manual Installation

Install Translate It Web Extension for Chrome

• 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.

Install Translate It Web Extension for Firefox

• Download the latest Firefox version here.
• Extract the downloaded ZIP file.
• Open about:debugging#/runtime/this-firefox/.
• Click Load Temporary Add-on... and select the manifest.json file from the extracted folder.
• Done!

Note: After installation, click the extension icon, go to Settings, and enter your API Key.

---

🔑 API Keys

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
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.

---

🪶 How to Use

1. Add the Extension to Your Browser

   After installation, pin the extension to your browser toolbar for quick and easy access.

2. 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.

3. 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.

4. Revert Translations

   To undo translations and restore the original text, use either of the following methods:

   • Press the ESC key.
   • Click the Revert button from within the extension popup.

5. 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.

6. 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.

---

Keyboard Shortcuts

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.

Customize Shortcuts:

You can modify the default shortcuts as needed:

• In Chrome:
  Go to chrome://extensions/shortcuts

• In Firefox:

  1. Right-click on the extension icon in the toolbar and choose Manage Extension.
  2. In the opened page, click the gear icon.
  3. Select Manage Extension Shortcuts.

---

⚙️ Advanced Settings

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 URL to 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.

• 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, and Model Name in 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.

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 OpenAI and OpenRouter: gpt-3.5-turbo
• For Google Gemini and WebAI to API: gemini-2.0-flash
• For DeepSeek: deepseek-chat

---

☕ Buy Me a Coffee

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!

---

👥 Contributors

• iSegar0
• Mohammad

---

🥤 Development Notes

Prerequisites

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 install

Initial Setup

After installing dependencies, run the setup command to ensure all development tools are configured:

pnpm run setup

This will configure the development environment and install any additional tools needed for validation.

Building for Development

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:firefox

This 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:firefox

Code Quality and Validation

Linting

To 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:firefox

This command will scan all src/**/*.js files and report any syntax errors or unsafe patterns.

Extension Validation

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:chrome

Note: For Chrome validation, you need web-ext installed. If it's not available, install it with:

pnpm run setup:chrome-validator

Pre-submission Workflow

Before submitting your changes, run the comprehensive pre-submission check:

pnpm run pre-submit

This command runs linting, builds the extension, and validates both browser versions.

Packaging for Distribution

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 source

To 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 publish

After running, the dist/Publish directory will contain:

• Source-vX.X.X.zip
• Translate-It-vX.X.X-for-Chrome.zip
• Translate-It-vX.X.X-for-Firefox.zip

---

🤝 Contributing

• ⭐ Star the repo to support the project.
• 🐞 Report issues via GitHub Issues.
• 📝 Submit a Pull Request (PR) to help improve the extension.

---

🖼️ Icons Credit

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)

---

Star History

---

📜 License

This project is licensed under the MIT License — feel free to modify and share!

year 2025