What If Reading Blogs Automatically Improved Your Vocabulary?
A few months ago, I noticed something frustrating about the way most of us read online.
We scroll through articles, blogs, documentation, newsletters, tutorials — constantly running into unfamiliar words — and then do one of two things:
- ignore them and keep reading
- or open another tab just to search the meaning
Neither feels natural.
And after a while, reading in a new language starts feeling more like work than discovery.
So I built something to change that.
Meet LinguaFlow
LinguaFlow is a Chrome extension that turns normal reading into a lightweight language-learning experience.
Instead of interrupting your reading flow, it quietly helps you build vocabulary while you browse.
When you're reading an article, LinguaFlow automatically underlines words that may be useful to learn. Hover over them, and you instantly get the meaning in your target language — right beside the original word.
No tab switching.
No full-page translation.
No breaking the reading experience.
Just small moments of learning while you naturally browse the web.
The core idea
I didn't want to build another "translate the whole page" extension.
That already exists.
The goal here was different:
Keep the original language intact while making difficult words approachable.
Because language learning works best when context stays preserved.
For example:
"The proposal was rejected due to ambiguity."
Instead of translating the entire sentence, LinguaFlow only helps with:
ambiguity → অস্পষ্টতা
That tiny interaction is surprisingly powerful over time.
You keep reading naturally while slowly absorbing vocabulary in context.
What the extension can do
Smart inline vocabulary assistance
LinguaFlow scans blog posts and articles, then automatically highlights words that may be useful based on the learner's difficulty level.
You can choose:
- Beginner
- Intermediate
- Advanced
So the experience adapts depending on how comfortable you are with the language.
Support for 10+ languages
The extension currently supports more than 10 target languages, including:
- Bangla
- Spanish
- Arabic
- English
- Japanese
- Hindi
- French
- German
- and more
I wanted it to feel useful beyond just English learners.
Save vocabulary while reading
One feature I personally wanted badly:
Sometimes you encounter a really good word while reading and think:
"I should remember this."
But you never do.
So LinguaFlow lets users save vocabulary instantly and build their own mini vocabulary bank over time.
Saved words can later be exported as:
- CSV
- JSON
which makes it useful for:
- Anki imports
- flashcard apps
- spaced repetition systems
- personal study sheets
Why I chose Gemma 4 31B
The extension uses Gemma 4 31B Instruct via OpenRouter & Gemini API.
After testing several models, Gemma felt like the best balance between:
- multilingual quality
- reasoning
- contextual understanding
- cost
- response speed
One thing I noticed quickly is that vocabulary translation is deceptively difficult.
A word rarely means the same thing everywhere.
Take the word:
"charge"
Depending on context, it could mean:
- electrical charge
- legal accusation
- payment
- responsibility
Literal translation systems often fail here.
Gemma performed noticeably better at understanding contextual meaning rather than blindly translating tokens.
That mattered a lot for this project.
Why OpenRouter made sense
I used OpenRouter because it simplified model access and routing significantly.
A few reasons it worked well for this project:
- unified API layer
- easy model switching during testing
- provider fallback support
- fast experimentation
- lower infrastructure overhead
Since LinguaFlow is an extension, reducing backend complexity mattered a lot.
Something interesting I discovered
While testing multilingual prompts, I noticed Gemma handled mixed-language reasoning surprisingly well.
Especially with:
- English ↔ Bangla
- English ↔ Arabic
- English ↔ Spanish
That made the learning experience feel much more natural compared to rigid dictionary-style translation systems.
The hardest part wasn't AI
Honestly?
The hardest part was DOM handling.
Modern websites are chaotic.
Every platform renders content differently:
- Medium
- Dev.to
- React apps
- dynamic infinite-scroll blogs
- documentation sites
The extension had to:
- avoid breaking layouts
- avoid modifying code blocks
- avoid touching editable inputs
- work with dynamic content
- remain lightweight
I ended up using:
- MutationObserver
- TreeWalker
- selective text-node processing
instead of brute-force DOM rewriting.
That single decision improved performance massively.
Another challenge: not being annoying
A language-learning tool can become distracting very quickly.
Too many highlighted words and reading becomes exhausting.
Too few and the extension feels useless.
So I spent a lot of time tuning:
- difficulty filtering
- common-word detection
- underline styles
- tooltip timing
- translation length
The final goal was:
"Helpful enough to learn from, subtle enough to forget it's there."
Why this project matters to me
I'm from Bangladesh, where a huge number of students learn through English-language resources online:
- blogs
- YouTube
- documentation
- research papers
- tutorials
But vocabulary friction slows people down constantly.
Especially beginners.
I wanted to make online reading feel less intimidating and more rewarding.
Not through aggressive AI automation.
But through small learning moments.
How to use LinguaFlow
Getting started with the extension is pretty straightforward.
1. Clone the repository
git clone https://github.com/Protik49/LinguaFlow.git
2. Install dependencies
npm install
3. Build the extension
npm run build
After building, the compiled extension files will be available inside the dist folder.
Load the extension into Chrome
1. Open Chrome extensions page
Go to:
chrome://extensions
2. Enable Developer Mode
Turn on:
Developer Mode
from the top-right corner.
3. Load unpacked extension
Click:
Load unpacked
Then select the generated dist folder.
4. Pin the extension
After loading the extension:
- click the Extensions icon in Chrome
- pin LinguaFlow to the toolbar
This makes it easier to access while reading blogs or articles.
Using LinguaFlow on a website
Step 1 — Open any article or blog
Visit:
- Dev.to
- Medium
- documentation sites
- tutorials
- news articles
- or any readable webpage
Step 2 — Activate LinguaFlow
Click the extension icon and press:
Activate on this page
The extension will begin scanning the article for target vocabulary.
Step 3 — Add your API key (one-time setup)
For the first setup, add either:
- your OpenRouter API key
- or Gemini API key
This only needs to be configured once.
Step 4 — Choose your learning preferences
Now select:
- your target language
- vocabulary difficulty level
Difficulty modes:
- Beginner
- Intermediate
- Advanced
This controls which words get highlighted.
Reading experience
Once activated, LinguaFlow automatically underlines words that may be useful for learning.
Clicking an underlined word will show:
- translation
- contextual meaning
- optional explanation
- save vocabulary option
Example:
ambiguity → অস্পষ্টতা
The goal is to help users learn vocabulary naturally while reading.
Saving vocabulary
Whenever you find a useful word, you can save it instantly.
Saved vocabulary can later be accessed directly from the extension UI.
Users can also export saved vocabulary as:
- CSV
- JSON
which works nicely for:
- flashcard apps
- study sheets
- spaced repetition systems
- Anki imports
Current supported features
- AI-powered contextual translation
- 10+ target languages
- difficulty-based vocabulary filtering
- smart inline underlining
- vocabulary saving system
- CSV/JSON export
- lightweight reading experience
- works across modern blog platforms
Tech Stack
Built with:
- React
- TypeScript
- Tailwind CSS
- Chrome Extension Manifest V3
- OpenRouter
- Gemma 4 31B
What’s next
A few ideas I'm exploring:
- AI-generated quizzes from saved vocabulary
- pronunciation support
- YouTube subtitle integration
- spaced repetition mode
- offline vocabulary caching
- contextual sentence explanations
Final thoughts
Most language tools pull you away from what you're doing.
LinguaFlow tries to stay inside the experience instead.
The best learning moments often happen accidentally:
- while reading a blog
- exploring a tutorial
- scrolling through an article at 2AM
If a tool can turn those moments into vocabulary growth without interrupting curiosity, I think that's genuinely useful.
And honestly, building this made reading online feel fun again.
If you'd like to try the project, contribute ideas, or give feedback, I'd love to hear your thoughts.
Built with ❤️ using Gemma 4 31B .
Top comments (0)