Screen Translator Chrome Extension

A Chrome extension that allows you to translate selected text on any webpage and hear its pronunciation.

Features

• 🌐 Translate selected text - Right-click on any selected text to translate it
• 🔊 Text-to-Speech - Hear the pronunciation of translated text
• 📋 Copy translation - Easily copy translated text to clipboard
• 🎨 Beautiful UI - Modern, clean overlay design
• 🌍 25+ Languages - Support for multiple target languages
• ⚙️ Customizable - Set your preferred target language in the extension popup

Installation

1. Download or clone this repository

   git clone <repository-url>
   cd ScreenTranslator

2. Generate Icons (if not already present)

   • Open generate-icons.html in your browser
   • Click the "Generate Icons" button
   • The icons will be downloaded automatically

3. Load the extension in Chrome

   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode" (toggle in the top right)
   • Click "Load unpacked"
   • Select the ScreenTranslator folder

Usage

1. Set your target language

   • Click the extension icon in the Chrome toolbar
   • Select your preferred target language from the dropdown
   • The setting will be saved automatically

2. Translate text

   • Select any text on a webpage
   • Right-click on the selected text
   • Choose "Translate and Pronounce" from the context menu
   • A beautiful overlay will appear showing:
     • Original text
     • Translated text
     • Copy button
     • Pronounce button

3. Copy translation

   • Click the "📋 Copy Translation" button
   • The translated text will be copied to your clipboard

4. Hear pronunciation

   • Click the "🔊 Pronounce" button
   • The translated text will be read aloud using your browser's text-to-speech

5. Close the overlay

   • Click the × button in the top right
   • Click outside the overlay
   • Press the Escape key

Supported Languages

• English (en)
• Spanish (es)
• French (fr)
• German (de)
• Italian (it)
• Portuguese (pt)
• Russian (ru)
• Japanese (ja)
• Korean (ko)
• Chinese (zh)
• Arabic (ar)
• Hindi (hi)
• Dutch (nl)
• Polish (pl)
• Turkish (tr)
• Swedish (sv)
• Danish (da)
• Norwegian (no)
• Finnish (fi)
• Czech (cs)
• Hungarian (hu)
• Romanian (ro)
• Ukrainian (uk)
• Vietnamese (vi)
• Thai (th)

Technical Details

• Manifest Version: 3
• Translation API: LibreTranslate (free, no API key required)
• Fallback API: MyMemory Translation API
• Text-to-Speech: Web Speech API (browser native)
• Storage: Chrome Sync Storage for settings

File Structure

ScreenTranslator/
├── manifest.json          # Extension manifest
├── background.js          # Service worker for context menu and API calls
├── content.js             # Content script for UI overlay
├── content.css            # Styles for translation overlay
├── popup.html             # Extension popup UI
├── popup.css              # Popup styles
├── popup.js               # Popup functionality
├── icons/                 # Extension icons
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md              # This file

Troubleshooting

Translation not working?

• Check your internet connection
• The translation service might be temporarily unavailable
• Try refreshing the page and selecting text again

Pronunciation not working?

• Make sure your browser supports Web Speech API (Chrome, Edge, Safari)
• Check your system volume
• Some languages may have limited voice support

Context menu not appearing?

• Make sure the extension is enabled in chrome://extensions/
• Try reloading the extension
• Refresh the webpage

Privacy

• Translations are sent to external translation services (LibreTranslate/MyMemory)
• No data is stored locally except your language preference
• No personal information is collected or transmitted

License

This project is open source and available for personal and commercial use.

Contributing

Feel free to submit issues, fork the repository, and create pull requests for any improvements.