Starting Page
Example of how this will work
Example of how this will work

📖 Project Story: WhatsApp Universal Translator

Inspiration

The inspiration for this project came from a real-life communication challenge. I was chatting with my partner’s parents, who only speak Spanish, while I am more comfortable in English and Hindi. They were sending me interesting messages, but I had to constantly switch between WhatsApp Web and translation tools to understand and respond properly. This also give chance for my parents to communicate between

This back-and-forth translation was tiring, slow, and frustrating.

That’s when I thought:
“What if WhatsApp could translate messages automatically, right inside the chat?”

What it does

WhatsApp Universal Translator automatically detects the language of incoming messages and translates them in real time inside WhatsApp Web using the LibreTranslate API. Translations appear just below the original messages in a clean overlay. Users can toggle auto-translate on or off and customize the target language.

How I built it

I developed a Chrome Extension that integrates directly with WhatsApp Web. It uses:

Language detection of incoming messages.
Real-time translation through the LibreTranslate API.
DOM manipulation to insert translated text overlays below original messages.
Chrome Extension APIs for storage and background scripting.
Mutation Observers to handle dynamic content updates.

Challenges we ran into

Handling WhatsApp Web’s dynamic message rendering via DOM manipulation.
Finding a free, reliable translation API that does not require authentication.
Avoiding interference with WhatsApp’s original UI and ensuring smooth UX.
Implementing asynchronous translations without blocking the user interface.

Accomplishments that proud of

Created a seamless, non-intrusive live translation feature embedded inside WhatsApp Web.
Enabled communication across language barriers between my family and my partner’s family.
Built a user-friendly toggle and customizable settings for translation preferences.

What I learned

Use case and Understanding of Chrome Extension APIs (storage, background scripts, scripting).
Efficient async translation workflows without UI lag and bolt capability.
How solving a personal problem can lead to building impactful tools.