Vocabo - Chrome Extension

Project Overview

Vocabo is a sophisticated Chrome extension designed for language learners, enabling real-time translation, vocabulary management, and spaced repetition learning directly within the browser. It leverages advanced JavaScript for DOM manipulation, dynamically identifying and translating words based on the user's custom word bank.

Technical Overview

This project demonstrates expertise in Chrome extension development (Manifest V3), complex JavaScript logic including DOM manipulation (Mutation Observers, Regex), and build tooling integration.

Chrome Extension Environments

Content script: Directly interacts with the DOM (uses JavaScript) of the current webpage by injecting a shadow DOM, allowing it to read and edit elements from the page.
Content UI script: Indirectly interacts with the DOM (uses React). We create a shadow DOM or React portal, and render content in the document.body without the native code colliding with the injected content script.
Popup: The main user interface (built with React) that appears when clicking the extension icon. Provides vocabulary management, learning statistics, settings configuration, and serves as the central hub for all extension features in an isolated environment.

Architecture & Stack

Frontend: React (injected dynamically), Content Scripts
Build Tools: Vite, pnpm, Turbo (HMR)
Extension Specifics: Manifest V3, Chrome Local Storage
Backend: Node.js/Express, Google App Engine

Core Functionality

Real-time text translation on web pages.
Vocabulary management system (saving words).
Spaced repetition learning integration.
Cross-browser synchronization (potential via backend).
Offline functionality (using local storage).