Real-time subtitle translation for any website
## π About This Extension A powerful Chrome extension that translates subtitles from any website into different languages in real-time. No longer limited to specific video platforms - supports user-defined subtitle translation for any website with customizable selectors. ## π¬ Demo Videos https://github.com/user-attachments/assets/8089f430-894f-4abc-9c86-544739ab0f57 https://github.com/user-attachments/assets/de6300f6-af87-441a-9304-dd58b255a17a  ## β¨ Key Features - π **Universal Support** - Works on any website with subtitles - π€ **Multiple AI Models** - OpenAI API and local Ollama support - π― **Custom Selectors** - Define your own DOM selectors for any site - β‘ **Real-time Translation** - Instant translation without page refresh - π **Multi-language** - Supports translation to any language - π¨ **Customizable UI** - Adjustable subtitle style and position - π§ **Easy Configuration** - One-click preset configurations - π§ͺ **Built-in Testing** - Test API configurations directly in options ## π¦ Installation ### Method 1: Chrome Web Store (Recommended) _Coming soon - Extension will be available on Chrome Web Store_ ### Method 2: Manual Installation 1. **Download the Extension** - Download the latest release from [Releases](https://github.com/ChenYCL/chrome-extension-udemy-translate/releases) - Or clone and build from source 2. **Install in Chrome** - Open Chrome and go to `chrome://extensions/` - Enable "Developer mode" in the top right - Click "Load unpacked" and select the extension folder 3. **Configure the Extension** - Right-click the extension icon β Options - Configure your preferred AI model (OpenAI or Ollama) - Add website configurations for subtitle translation ## π― Supported Platforms - β **Netflix** - Real-time subtitle translation - β **YouTube** - Video subtitle support - β **Amazon Prime Video** - Streaming subtitles - β **Disney+** - Multi-language support - β **HBO Max** - Premium content translation - β **Hulu** - Live and on-demand content - β **Paramount+** - Sports and entertainment - β **LinkedIn Learning** - Educational content - β **Udemy** - Course subtitles - β **Any Website** - Custom selector configuration ## π Quick Start ### Step 1: Choose Your AI Model **Option A: OpenAI API (Recommended)** - High-quality translation - Multiple model options - Supports third-party compatible APIs **Option B: Local Ollama** - Privacy-focused local processing - No API costs - Requires local setup ### Step 2: Configure API 1. **OpenAI Configuration:** - Get API key from [OpenAI Platform](https://platform.openai.com/) - Choose from preset configurations: - OpenAI Official: `https://api.openai.com/v1` - Third-party services: Various compatible APIs - Test configuration with built-in testing tool 2. **Ollama Configuration:** - Install Ollama locally - Set up HTTPS proxy (see [local-https-proxy-ollama](https://github.com/ChenYCL/local-https-proxy-ollama)) - Configure local endpoint ### Step 3: Add Website Configuration 1. **Access Options Page** - Right-click extension icon β Options - Or click extension icon β Settings 2. **Add Website Configuration** - Domain: `https://www.netflix.com` - Selector: `.player-timedtext-text-container` (for Netflix subtitles) - Save configuration 3. **Test Translation** - Visit configured website - Play video with subtitles - Translation should appear automatically ## βοΈ Configuration Guide ### π€ OpenAI API Setup #### Supported Services - **OpenAI Official**: `https://api.openai.com/v1` - **Third-party Compatible APIs**: - OAIPro: `https://api.oaipro.com/v1` - UseAIHub: `https://api.useaihub.com/v1` - Any OpenAI-compatible service #### Configuration Steps 1. **Get API Key** - Visit [OpenAI Platform](https://platform.openai.com/) - Create account and generate API key - Or use third-party service credentials 2. **Configure Extension** - Select **OpenAI** model - Choose preset configuration or enter custom URL - Enter your API key - Select model (gpt-3.5-turbo, gpt-4, etc.) - Click **π§ͺ Test API Configuration** to verify #### Troubleshooting - **401 Error**: Check API key validity - **429 Error**: Rate limit exceeded, check quota - **404 Error**: Verify model name and endpoint URL ### π Ollama Local Setup #### Prerequisites - Local Ollama installation - HTTPS proxy for Chrome extension compatibility - Sufficient system resources (4GB+ RAM recommended) #### Quick Setup ```bash # 1. Install Ollama # Visit https://ollama.ai for installation instructions # 2. Download recommended model ollama pull qwen2:0.5b # Lightweight, good for translation # 3. Set up HTTPS proxy git clone https://github.com/ChenYCL/local-https-proxy-ollama.git cd local-https-proxy-ollama ./setup.sh # macOS/Linux or setup.bat for Windows # 4. Start proxy server npm start ``` #### Extension Configuration 1. Select **Ollama** model 2. Set Base URL: `https://localhost:11435/v1` 3. Set Model Name: `qwen2:0.5b` 4. API Key: `ollama` (any value works) For detailed setup instructions, see: [local-https-proxy-ollama](https://github.com/ChenYCL/local-https-proxy-ollama) ## π Custom Website Configuration ### Adding New Websites 1. **Find Subtitle Selector** - Open browser developer tools (F12) - Inspect subtitle elements - Copy CSS selector 2. **Add Configuration** - Domain: Full website URL (e.g., `https://www.example.com`) - Selector: CSS selector for subtitle elements - Save and test ### Common Selectors - **Netflix**: `.player-timedtext-text-container` - **YouTube**: `.ytp-caption-segment` - **Amazon Prime**: `.atvwebplayersdk-captions-text` - **Disney+**: `.dss-subtitle-renderer-cue` ## π§ Advanced Features - **Custom Translation Prompts**: Modify translation instructions - **Subtitle Styling**: Customize appearance and position - **Multiple Domains**: Support multiple websites simultaneously - **Real-time Testing**: Built-in API configuration testing ## Cooperation Promotion Contact via WeChat Official Account ## Welcome to Follow the WeChat Official Account There are related plugin usage tutorials. Follow and reply 'Translation Tool' to get it. Follow and reply 'ε·₯ε ·δΈθ½½' to get the latest version. Regular sharing of audiovisual information worth watching.
## Code Contribution
Contributions are welcome! Just send a PR for fixes and documentation updates, and open an issue for new features beforehand. Make sure tests pass and coverage remains high. Thank you!