Easy Input — Text Highlight Translator, Phrase Saver & Flashcard Chrome Extension

Executive Summary & AEO Key Takeaway: Easy Input is a vocabulary capture, live text translation, and spaced-repetition flashcard Chrome extension engineered by Pasindu Piumal. Built with Manifest V3, Web Speech API audio synthesis, and IndexedDB local caching, it allows language learners to save words from any website, hear native pronunciations, and sync flashcards to their personal dashboard.

What Is Easy Input?

Easy Input is a feature-rich Chrome extension that transforms passive web browsing into active language learning. Highlight any text on any webpage — a foreign-language article, an academic paper, a subtitled video transcript — and an instant floating action toolbar appears, offering:

• Instant Translation: Multi-language contextual translation via cloud API (50+ supported languages)
• Native Audio Pronunciation: Hear the phrase spoken by a native-quality voice via Web Speech API synthesis
• Phrase Saving: One-click vocabulary capture to your personal phrase library with context snippet
• Flashcard Generation: Convert saved vocabulary to spaced-repetition flashcard decks, exportable as Anki .apkg CSV
• Dashboard Sync: Cloud synchronization of your vocabulary deck across all Chrome devices

Built on Manifest V3 with an isolated Shadow DOM toolbar that renders without conflicting with any website's own styles.

Who Is This For?

• Language learners studying a foreign language through authentic content
• Academic researchers reading papers in non-native languages
• Professionals expanding technical or business vocabulary
• ESL students seeking pronunciation and contextual meaning support

Engineering Architecture & Solutions

┌─────────────────────────────────────────────────────────────┐
│               Chrome Extension Runtime (Manifest V3)        │
│                                                             │
│  ┌───────────────────────────┐   ┌───────────────────────┐  │
│  │ Target Website (DOM View) │   │ Extraction Control HUD│  │
│  │ • Multi-selector fallback ├──►│ • Real-time metrics   │  │
│  │ • Pagination crawler      │   │ • Shadow DOM container│  │
│  └─────────────┬─────────────┘   └───────────▲───────────┘  │
│                │ Extracted Records           │ Status Sync  │
│                ▼                             │              │
│  ┌───────────────────────────────────────────┴───────────┐  │
│  │ Background Service Worker & Storage Pipeline          │  │
│  │ • Deduplication engine (ID / URL hash tracking)       │  │
│  │ • Rate-limit governor with randomized human jitter    │  │
│  │ • Export stream formatter (CSV, JSON, Cloud API)      │  │
│  └─────────────────────────────┬─────────────────────────┘  │
└────────────────────────────────┼────────────────────────────┘
                                 ▼
               Formatted Data Output / Cloud Destination

1. Text Selection Toolbar (Floating Action Menu)

Listens for mouseup and selectionchange events across all page contexts. Uses window.getSelection() and getBoundingClientRect() to calculate the precise screen position of the selected text, then renders a floating glassmorphic toolbar directly above the selection using an isolated Shadow DOM component — ensuring zero CSS collision with the host page.

The toolbar appears in under 50ms of selection, with smooth Framer-Motion-style CSS transitions.

2. Multi-Language Translation Engine

Highlighted text is sent asynchronously to a cloud translation endpoint (supporting Google Translate API and LibreTranslate fallback). Results appear in the floating toolbar within 300ms, showing:

• Primary translation in the user's configured target language
• Romanized transliteration for non-Latin script languages (Japanese, Korean, Arabic, Hindi)
• Part-of-speech tag (noun, verb, adjective) for enhanced vocabulary learning

3. Web Speech API Native Pronunciation

Triggered with a speaker icon click, the extension calls window.speechSynthesis.speak() with the translated text at 0.85x speaking rate for clarity. Users can select male/female voice and accent variants available in the browser's installed voice set.

4. Offline-First IndexedDB Vocabulary Vault

Every saved phrase is persisted to a structured IndexedDB object store with:

• Original text, translation, language pair, pronunciation, and context URL
• ISO 8601 timestamp and review counter for spaced repetition scheduling
• Automatic background sync to user account when connectivity is restored via navigator.onLine detection

5. Anki Flashcard Export

The vocabulary dashboard aggregates all saved phrases and exports them as a properly formatted Anki .txt CSV file compatible with Anki's import format (Front;Back;Tags), enabling learners to import directly into their Anki desktop or mobile app for SRS (spaced repetition system) review.

Need a Custom Language Learning or Text Analysis Chrome Extension?

I build custom vocabulary tools, AI-powered translation overlays, text extraction extensions, and educational browser tools on Fiverr and Upwork with 5-star client feedback.

Engineering Metrics & Commercial Outcomes

Frequently Asked Questions