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.

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 .