Skip to content

ChenYCL/chrome-extension-udemy-translate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

54 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Universal Subtitle Translator

Universal Subtitle Translator

Real-time subtitle translation for any website

Chinese README Downloads Version MIT License

🌟 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

locate-element.mp4
8.28.mp4

IMG_8903

✨ 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
    • 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
    • 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:

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

# 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

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

Donation Channel β˜•οΈ

Discount

1watchtv.com

ε₯ˆι£žε°ι“Ί

Alipay

WeChat

image

Communication

Telegram Group

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!