Immersive Language Learning Assistant

A browser extension based on the "comprehensible input" theory to help you learn languages naturally while browsing the web.

English | 简体中文

🚀 Quick Install

📥 Official Store Installation (Recommended)

Chrome/Edge Users

📥 Install from Chrome Web Store

Firefox Users

📥 Install from Firefox Add-ons

💡 Recommended: Official store installation is the easiest way - one-click install with automatic updates!

---

✨ Core Philosophy

We firmly believe that the best way to learn a language is through extensive exposure to "comprehensible input," the famous "i+1" theory. This means content should be slightly above your current level—challenging but not incomprehensible. This extension aims to turn the entire internet into your personalized language learning material by intelligently replacing selected words with their translations in your target language, allowing you to naturally improve your vocabulary and language intuition while immersed in reading.

🎯 Project Highlights: Features a complete pronunciation learning ecosystem with intelligent multi-language translation, including automatic language detection, phonetic notation, AI definitions, dual TTS support, and interactive tooltips for a comprehensive one-stop immersive experience from smart translation to pronunciation learning.

📚 Complete Documentation: See Architecture & Features Guide for technical architecture, API reference, development guide, and troubleshooting.

🚀 Features

🎯 Core Translation Engine

• Intelligent Language Detection: AI automatically identifies webpage source language, no need for users to manually specify language type
• Intelligent Text Processing: Uses AI large language models to analyze webpage content and intelligently select vocabulary suitable for user proficiency levels
• Precise Replacement Control: Precisely control translation ratio (1%-100%) with character-based calculation support
• Context Awareness: Considers context and user level to select the most appropriate translation vocabulary
• Multi-language Support: Supports 20+ languages intelligent translation (English, Japanese, Korean, French, German, Spanish, Russian, Italian, Portuguese, Dutch, Swedish, Norwegian, Danish, Finnish, Polish, Czech, Turkish, Greek, etc.) theoretically depends on AI model capabilities
• Translation Position Control: Added a feature to customize the position of translated text for more flexible display
• Parentheses Display Control: Option to show or hide parentheses around translated text for a cleaner reading experience
• Lazy Loading Translation: Translates paragraphs only when scrolled to, reducing resource consumption and improving performance

🔊 Pronunciation Learning Ecosystem ⭐

• Interactive Pronunciation Tooltips: Hover over translated words to view phonetics, AI definitions, and pronunciation features with intelligent positioning to avoid boundary overflow
• Dual-layer Learning Experience: Phrases display interactive word lists, click individual words for detailed information with nested tooltip support
• Multi-TTS Service Support: Integrates Youdao TTS (high quality) and Web Speech API (backup), supports British/American pronunciation switching
• Smart Phonetic Retrieval: Automatically retrieves Dictionary API phonetic data with 24-hour TTL caching for optimized performance
• AI Definition Explanations: Real-time AI-generated Chinese definitions for more accurate understanding with contextual analysis support
• Progressive Loading: Display basic information first, then asynchronously load detailed content to optimize user experience
• Audio Caching: Memory-level TTS audio caching, no need to regenerate audio for the same word
• Shortcut Key Support: Added shortcut key settings for the pronunciation pop-up to improve operational efficiency

🎨 Rich Visual Experience

• 7 Translation Styles: Default, subtle, bold, italic, underlined, highlighted, learning mode (blur effect)
• Learning Mode: Translation words initially displayed blurred, clarified on hover to enhance memory effect
• Glow Animation: Gentle hint effects when new translated words appear, non-intrusive to reading experience
• Responsive Design: Auto-adapts to dark/light themes with intelligent tooltip positioning
• Floating Tool Ball: Added a configurable floating tool ball for quick access to frequently used functions
• Appearance Settings: Support customizing floating ball transparency, position, and other appearance parameters

⚙️ Highly Configurable

• Smart Translation Mode: Users only need to select target language, AI automatically detects source language and translates
• User Level Adaptation: 5 levels from beginner to advanced with AI-intelligent vocabulary difficulty and selection strategy adjustment
• Trigger Modes: Supports automatic trigger (process on page load) and manual trigger working modes
• Original Text Display Control: Choose to show, hide, or learning mode (blur effect) display of translated original text
• Paragraph Length Control: Customize maximum text length for AI single processing
• Pronunciation Feature Toggle: Independent control of pronunciation tooltip functionality activation status
• Multiple API Configurations: Supports configuring multiple API services, allowing for flexible switching between different translation providers
• Data Import/Export: Supports backup and restore for the current configuration format
• Interface Language: Support 5 interface languages (Chinese, English, Japanese, Korean, Spanish)

🔌 Open API Integration

• OpenAI API Compatible: Supports OpenAI, DeepSeek, SiliconFlow, and other OpenAI-compatible services
• Google Gemini Support: Added Google Gemini API integration, providing more AI service options
• Flexible Configuration: Customize API Key, Endpoint, model name, Temperature parameters
• Smart Prompts: Dynamically generate optimal prompts based on translation direction and user level
• Error Handling: Comprehensive API error handling and retry mechanisms
• Multiple API Support: Supports configuring and flexibly switching between multiple API services for more reliable service
• Thinking Mode: Support AI thinking process output to improve translation quality

🖱️ Enhanced Interactive Features

• Context Menu: Added browser context menu functionality for quick access to translation-related operations
• Floating Ball Feature: Configurable floating tool ball providing quick translation and settings access
• Hotkey Management: Comprehensive hotkey settings and management functionality
• Website Management: Blacklist and whitelist functionality for precise control of translation behavior

🚀 Performance & Optimization

• Smart Caching: Multi-level caching strategy for translation results, phonetic data, and TTS audio
• Incremental Processing: Only processes new content, avoiding duplicate translations
• DOM Safety: Uses Range API to ensure DOM structure integrity
• Memory Management: Timely cleanup of listeners and optimized memory usage
• Lazy Loading Optimization: On-demand translation when scrolling, reducing initial loading time

💻 Modern Technical Architecture

• Framework: WXT - A modern WebExtension development framework
• Frontend: Vue 3 + TypeScript + Vite
• UI Library: Tailwind CSS + Lucide Icons + Reka UI
• Tooling: ESLint + Prettier + TypeScript compilation
• API Integration: OpenAI-compatible interfaces + Google Gemini + Dictionary API + Youdao TTS
• Cross-browser Compatibility: Supports Chrome, Edge, Firefox, with partial support for Safari
• Internationalization: Vue I18n support for multi-language interfaces

🌐 Browser Compatibility

This extension is built with Web Extension API and WXT, supporting the following browsers:

Browser	Support Status	Notes
Chrome	✅ Fully Supported	Recommended environment, all features available
Edge	✅ Fully Supported	Chromium-based, full compatibility
Firefox	✅ Supported	Requires addon ID configuration, see Firefox Installation Guide
Safari	⚠️ Partially Supported	Requires additional configuration

⚡ Performance Features

🚀 Smart Caching System

• Translation Results: Smart caching based on content and settings, avoiding duplicate API calls
• Phonetic Data: 24-hour TTL local caching for improved response speed
• TTS Audio: Memory-level caching, no need to regenerate audio for the same word

🔄 Incremental Processing Mechanism

• DOM Monitoring: Only processes new content, avoiding duplicate translations
• Debounce Optimization: Smart delayed processing for dynamic content changes
• Range API: Precise DOM operations maintaining page structure integrity
• Lazy Loading: On-demand translation when scrolling, optimizing performance

📸 Feature Showcase

🎬 Dynamic Demo

🎯 Complete Demo: One-stop immersive experience from smart translation to pronunciation learning

🎨 Theme Adaptation

🌗 Theme Adaptation: Smart dark/light theme switching with modern visual experience

👍 Settings page supports multiple configurations

🌍 Multi-language Learning Scenarios

🧠 Smart Multi-language: AI automatic detection and translation for 20+ languages, covering mainstream learning languages including Chinese, English, Japanese, Korean, etc.

🛠️ Developer Installation

🔧 Build from Source (For Developers)

If you want to participate in development or need to build from source:

1. Prerequisites

• Node.js (version 18 or higher)
• npm or other package managers

2. Installation

1. Clone the repository:

   bash git clone https://github.com/xiao-zaiyi/illa-helper.git cd illa-helper

2. Install dependencies:

   bash npm install

Tip: If you just want to use this extension without par