Inspiration

We wanted language learning to fit into everyday life. Instead of opening another app or setting aside study time, what if browsing the web could become a small learning session?

What it does

ReadNative is a Chrome extension that helps you learn a new language while browsing the web. It gradually immerses you in the language you’re learning by replacing words you already know with their translations, while keeping the rest of the page in your native language. You can preview the word replacements and hover over translated words to see their meaning and pronunciation. You can mark words as Known, Learning, or Don’t know. Highlights reflect those choices, while a dashboard shows vocabulary progress and milestones. Your vocabulary and learning history stay in a local browser database.

How we built it

We built ReadNative with JavaScript, HTML, CSS, and Chrome’s Manifest V3 extension platform. MyMemory provides live word translations, IndexedDB stores vocabulary and stats locally, and browser speech synthesis provides pronunciation audio. The current page-replacement preview uses a predefined vocabulary list. Personalized replacements are the next step.

Challenges we ran into

Changing text on a live webpage without breaking its formatting, links, or interactive elements was a major challenge. We also had to keep ratings synchronized across repeated words and open tabs, handle translation failures, and prevent repeated encounters from inflating stats.

Accomplishments that we're proud of

We connected reading, translation, vocabulary tracking, and progress into one lightweight experience. Highlights update immediately when a word’s status changes, and users can restore the original page with one click. Moreover, all the data stays with the user on their devices.

We also added automated tests covering storage, page behavior, and the extension interface.

What we learned

“Just replace some words on a webpage” sounds simple, but preserving the original webpage experience while adding learning interactions gets surprisingly complex. We learned that small interface decisions - clear colors, short labels, and fewer controls - make a big difference when a tool lives inside someone’s reading experience.

What's next for ReadNative

Bring ReadNative to mobile and expand support for more languages and language pairs, making personalized immersion accessible wherever you browse.

Built With

Share this project:

Updates

Submission history