WhatsApp Universal Translator-web extension

Break language barriers instantly with WhatsApp Universal Translator – auto-translate live chats on WhatsApp Web in real time, so you never miss a message in any language

Comment

WhatsApp Universal Translator – Web Extension

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 would send me thoughtful and interesting messages, but I had to constantly switch between WhatsApp Web and translation tools just to understand and reply.

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

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

This idea also opened the door for my parents and my partner’s parents to communicate directly across languages.

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/off.
  • Target languages can be customized for a personalized experience.

How we built it

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

  • Language detection of incoming messages
  • Real-time translation via LibreTranslate API
  • DOM manipulation to insert translated text overlays beneath the original messages
  • Chrome Extension APIs for storage and background scripting
  • Mutation Observers to track and handle WhatsApp’s dynamic message updates

Challenges we ran into

  • Handling WhatsApp Web’s dynamic DOM updates without breaking the UI
  • Finding a free and reliable translation API that works without authentication
  • Avoiding interference with WhatsApp’s original interface to keep UX smooth
  • Implementing asynchronous translations without blocking message rendering

Accomplishments that we're proud of

  • Built a seamless, non-intrusive live translation inside WhatsApp Web
  • Enabled meaningful communication between families speaking different languages
  • Designed a user-friendly toggle and customizable language settings
  • Proved how solving a personal problem can turn into a broadly useful tool

What we learned

  • Deepened understanding of Chrome Extension APIs (storage, scripting, background scripts)
  • Learned to design efficient async workflows without UI lag
  • Realized that solving everyday challenges can lead to impactful, scalable tools

What's next for WhatsApp Universal Translator – Web Extension

  • Add support for more languages and improve detection accuracy
  • Enhance translation speed and reliability by integrating additional APIs
  • Improve the user interface with themes and message highlighting
  • Explore mobile integration (deploying to Android as an app)
  • Potentially expand to cross-platform messaging apps beyond WhatsApp
Share this project:

Updates