Veris the Translator

Translate with Veris, learn with Spaced Repetition

Comment

Veris: A Chrome Extension for Vocabulary Learning

Inspiration

Retaining new vocabulary is an integral part of language learning. As a language learner, I was frustrated with the disconnect between consuming content online and retaining the new vocabulary. I'd encounter interesting words while reading articles or watching videos, but by the time I looked them up and wrote them down, going back and forth, I'd lost the context. Even worse, without a systematic review method, I'd forget most words within days.

I wanted to create a tool that would eliminate this friction. Something that could translate words instantly in context, save them effortlessly, and use spaced repetition method to ensure I actually remembered them. The goal was to turn passive browsing into active learning without disrupting the flow of reading.

What it does

Veris is a Chrome extension that integrates translation and vocabulary learning into your browsing experience:

Translation Features:

  • Select any text on a webpage to see instant inline translations using Chrome's built-in Translation API
  • View word level breakdowns to understand individual vocabulary items
  • Translations work completely offline once language models are downloaded
  • Preserves original context for better learning

Vocabulary Management:

  • Save words with a single click while maintaining their sentence context
  • Browse, search, and filter your saved vocabulary through the extension popup
  • Edit translations and add personal notes
  • Export and import vocabulary for backup

Spaced Repetition Learning:

  • Implements the 6-box Leitner system with intervals: 1, 3, 7, 14, 30 days
  • Adaptive scheduling based on your performance with mastery multipliers
  • Multiple-choice exercises with instant feedback
  • Smart scheduling that prioritizes due words and gradually introduces new ones

How I built it

Technology Stack:

  • JavaScript (ES6+) with modern features (async/await, modules, classes)
  • Chrome Extension APIs (Manifest V3) for service workers and content scripts
  • IndexedDB for client-side data persistence
  • Chrome Translation API for offline translation capabilities
  • Webpack for build pipeline and module bundling
  • Jest + Puppeteer for comprehensive testing (145+ tests)

Architecture & Development:

Phase 1: Translation Foundation
Built the content script system with text selection detection and coordinate calculation. Integrated Chrome's Translation API with feature detection and error handling. Created an inline translation bubble that works across all websites without CSS conflicts.

Phase 2: Data Layer
Designed a comprehensive vocabulary schema with SRS metadata. Implemented IndexedDB with transaction management, connection recovery, and schema migrations. Created a modular service layer separating business logic from UI.

Phase 3: Spaced Repetition System
Researched and implemented the Leitner algorithm as a pure function with no UI dependencies. Built adaptive scheduling logic with Box 0 cooldown (2 minutes), progressive intervals, and mastery multipliers (1.2 + streak * 0.1). Created an exercise interface with question generation, validation, and progress tracking.

Phase 4: Polish & Testing
Built comprehensive test infrastructure with Chrome API mocks and fake-indexeddb. Wrote 81 unit tests, 50 integration tests, and 7 E2E tests achieving 70%+ coverage. Optimized performance with debouncing, lazy loading, and IndexedDB indexes. Added dark mode, accessibility features, and statistics dashboard.

Challenges I ran into

1. Manifest V3 Service Worker Limitations
Service workers terminate when idle, making persistent in-memory state impossible. I solved this by moving all state to chrome.storage.local and IndexedDB, implementing an event-driven architecture, and using alarms for scheduled tasks instead of timers.

2. IndexedDB Transaction Management
Handling asynchronous transactions, connection closures, and concurrent operations was complex. I created an ensureConnection() helper that checks and re-establishes connections, implemented proper error handling with transaction wrappers, and built migration logic for schema upgrades.

3. Leitner Algorithm Complexity
The SRS system required handling numerous edge cases: new words, box transitions, streak tracking, adaptive intervals, and skipped reviews. I separated the pure algorithm from UI logic, created comprehensive metadata structures, and wrote extensive tests to verify correctness.

4. Complex Exercise State Management
Coordinating state between question generation, UI updates, navigation, translation, and SRS updates created interdependencies. I adopted a class-based architecture with clear separation (StateManager, QuestionGenerator, UIController) and unidirectional data flow.

5. Performance with Large Vocabularies
Performance degraded with 1,000+ words. I implemented debounced search (300ms), used pagination and DOM fragments, cached language detection, and lazy-loaded modules.

Accomplishments that I am proud of

  • Offline-First Architecture: Works completely offline using Chrome's Translation API with 50+ language support
  • Production-Ready Code: ~4,000 lines of well-structured, documented production code with proper error handling
  • Manifest V3 Compliant: Future-proof architecture following Chrome's latest extension standards
  • Modular Architecture: 13 core services with single-responsibility design and clean separation of concerns
  • Performance Optimized: Handles large vocabulary collections efficiently with smart indexing and lazy loading
  • Comprehensive Features: Translation, vocabulary management, SRS exercises, notifications, and settings—all integrated

What I learned

Technical Skills:

  • Chrome Extension Development: Mastered Manifest V3 architecture, service workers, message passing
  • Database Management: Deep understanding of IndexedDB transactions, connection management, schema migrations
  • Build Tools: Configured Webpack for multi-entry extension builds with proper asset management

Software Engineering Practices:

  • Test-Driven Development: Writing tests for complex logic caught edge cases early and built confidence while doing refactoring.
  • Separation of Concerns: Class-based architecture with clear responsibilities made code maintainable and testable
  • Incremental Development: Building and testing in phases prevented overwhelming complexity

What I'd Do Differently:

  • Start with TypeScript for better type safety and IDE support
  • Plan database schema more carefully to minimize migrations

What's next for Veris the Translator

Planned Features:

  • Audio Pronunciation: Integrate text-to-speech for vocabulary practice and pronunciation learning
  • Browser Sync: Sync vocabulary across devices using Chrome Sync API
  • Gamification: Add achievements, daily streaks, level progression, and progress badges
  • Multi-platform support: Enable users to utilize the same features across different devices

Technical Improvements:

  • TypeScript Migration: Add static typing for better code quality and maintainability
  • Formal State Management: Implement better state updates
  • Increased Test Coverage: Aim for 85%+ coverage across all modules
  • Internationalization: Translate UI to multiple languages for global accessibility

Built with dedication and a passion for language learning

Built With

Share this project:

Updates