illa-helper: An Extension for Natural Language Learning on the Web

Zai Yi — Sun, 29 Jun 2025 06:05:07 +0000

Hi everyone,

I'd like to share a browser extension I built called illa-helper.

GitHub Repo: https://github.com/xiao-zaiyi/illa-helper

Project Description
The best way to learn a language is through massive exposure to "comprehensible input," famously known as the "i+1" theory. This browser extension helps you do just that. It uses a Large Language Model (LLM) to intelligently replace words on any webpage with vocabulary from your target language, helping you build vocabulary and intuition naturally while you read.

🎯 Project Highlights
It features a complete pronunciation learning ecosystem and smart multi-language translation. This includes automatic language detection, phonetic display, AI-powered definitions, dual TTS speech synthesis, and interactive hover cards, providing a one-stop, immersive experience. All your settings, including API keys, are stored locally, so you don't have to worry about security leaks!

🚀 Features
🎯 Core Translation Engine
Smart Language Detection: The AI automatically identifies the source language of a webpage, so you don't have to.
Intelligent Text Processing: Uses an LLM to analyze web content and select words for translation that match your skill level.
Precise Replacement Control: Control the replacement percentage (1%-100%) with character-level precision.
Context-Aware: Considers the context and your proficiency level to choose the most suitable translated words.
Multi-Language Support: Supports intelligent translation for 20+ languages (English, Japanese, Korean, French, German, Spanish, Russian, Italian, etc.), theoretically limited only by the LLM's capabilities.
🔊 Pronunciation Learning Ecosystem ⭐
Interactive Hover Cards: Hover over a translated word to see its phonetics, an AI-generated definition, and a read-aloud button. The card intelligently repositions to avoid going off-screen.
Two-Layer Learning: Translated phrases show an interactive list of words. Click a single word to see its details in a nested hover card.
Multiple TTS Service Support: Integrates Youdao TTS (high-quality) and the Web Speech API (fallback), with support for switching between British/American English accents.
Smart Phonetic Fetching: Automatically fetches phonetic data from a Dictionary API with a 24-hour TTL cache for better performance.
AI-Powered Definitions: Get real-time, context-aware definitions generated by an AI for a deeper understanding.
Progressive Loading: Basic information appears instantly, while detailed content loads asynchronously to improve user experience.
Audio Caching: In-memory TTS audio caching means the same word's audio is generated only once per session.
🎨 Rich Visual Experience
7 Translation Styles: Default, Subtle, Bold, Italic, Underline, Highlight, and Study Mode (blur effect).
Study Mode: Translated words are initially blurred and become clear on hover to enhance memory retention.
Glow Animation: A subtle glow effect for newly translated words that doesn't distract from reading.
Responsive Design: Adapts to your system's dark/light theme with smart hover card positioning.
⚙️ Highly Configurable
Smart Translation Mode: Just select your target language, and the AI handles the rest.
User Proficiency Levels: 5 levels from beginner to expert, allowing the AI to adjust vocabulary difficulty.
Trigger Modes: Choose between automatic translation on page load or manual triggering.
Original Text Display: Choose to show, hide, or blur the original, untranslated text.
Toggle Features: Independently enable or disable the pronunciation hover card.
🔌 Open API Integration
OpenAI API Compatible: Supports any OpenAI-compatible service (e.g., ChatGPT, Claude, Llama, and other models).
Flexible Configuration: Customize your API Key, Endpoint, Model Name, and Temperature.
Smart Prompting: Dynamically generates optimal prompts based on the translation direction and your proficiency level.
Error Handling: Robust API error handling and retry mechanisms.
💻 Modern Tech Architecture
Tech Stack: Vue 3 + TypeScript + WXT Framework
Modular Design: High cohesion and low coupling for easy maintenance and extension.
Cross-Browser Compatibility: Supports Chrome, Edge, and Firefox, with partial support for Safari.
🌐 Browser Compatibility
This extension is built with the Web Extension API and WXT.

Browser Status Notes
Chrome ✅ Fully Supported Recommended environment, all features available.
Edge ✅ Fully Supported Chromium-based, fully compatible.
Firefox ✅ Supported See Firefox installation guide.
Safari ⚠️ Partially Supported Requires extra configuration.
⚡ Performance Features
Smart Caching System:
Translations: Caches results based on content and settings to avoid redundant API calls.
Phonetics: 24-hour TTL local cache for faster response times.
TTS Audio: In-memory cache for speech audio.

DEV Community: Zai Yi

illa-helper: An Extension for Natural Language Learning on the Web