DEV Community

Chisomo Mwanza
Chisomo Mwanza

Posted on

How I Built a Currency Converter Extension in 2026

#webdev #programming #javascript #ai

The Product: https://bit.ly/4bCfDZV

The What: A browser extension that converts any currency to your preffered currency just by hovering over the price.

The Problem

I’m a developer based in Zambia, and I spend a lot of time shopping online. Whether it’s buying tech gear from Amazon UK, booking hotels on international sites, or comparing prices from AliExpress, I constantly run into the same frustrating problem: currency conversion.

Every time I see a price in pounds, euros, or dollars, I have to:

  1. Highlight the price

  2. Open a new tab

  3. Type “50 GBP to ZMW” into Google

  4. Read the result

  5. Go back to shopping

  6. Repeat for every single item

I was doing this 10–20 times a day. It was exhausting. And even worse during black friday or tech buying season.

One afternoon, after spending 10 minutes comparing laptop prices across three different stores, I thought: “There has to be a better way.”

That’s when I decided to build a Currency Converter.

The Vision: Hover to Convert

The idea was simple: What if you could just hover your mouse over any price, and instantly see it converted to your currency?

No clicking. No tabs. No calculators. Just hover and see.

I sketched out the core features on paper:

  • Detect prices on any website automatically

  • Convert them in real-time when you hover

  • Support 150+ currencies

  • Work on Chrome, Safari, and Edge

  • Respect user privacy (no tracking, no data collection)

The Technical Journey

Building this extension taught me more about web development than any tutorial ever could. Here’s what I learned:

Challenge 1: Detecting Prices on Real Websites

My first version used simple regex to find prices in page text. It worked great on plain text, but failed spectacularly on real websites.

Why? Because websites like Amazon don’t put “$29.99” in a single HTML element. Instead, they split it:

  • Dollar sign in one

  • “29” in another

  • Decimal point in yet another

  • “99” in a fourth

My regex couldn’t handle this.

Solution: I had to build element-based detection. The extension now:

  1. Identifies price container elements (like .a-price on Amazon)

  2. Reconstructs the full price from split elements

  3. Falls back to text-based detection for simpler sites

I added support for:

  • Amazon’s complex price structures

  • eBay’s inconsistent formats

  • Alibaba’s split currency symbols

  • Indian number formatting (₹2,39,990 instead of ₹239,990)

Challenge 2: Making It Work Across Three Browsers

Chrome extensions, Safari extensions, and Edge extensions all use different APIs. Or so I thought.

Turns out, Safari now supports the WebExtensions API (Manifest V3), the same as Chrome. This was huge.

My workflow:

  1. Build the core extension for Chrome

  2. Use Apple’s xcrun safari-web-extension-converter to generate an Xcode project

  3. Test and fix Safari-specific issues

  4. Edge worked out-of-the-box (it’s Chromium-based)

The trickiest part was Safari’s code signing requirements. The extension and parent app must have matching Bundle IDs, and both must be signed with the same certificate. It took me two days to figure this out.

Challenge 3: Creating a Tooltip That Doesn’t Suck

Press enter or click to view image in full size

v1 of the tooltip
My first tooltip was a boring black box with white text. It worked, but it looked like something from 2006.

I wanted something better. Something that would make users think “wow, this is cool.”

So I built two themes:

A clean, minimal design for professional use

  1. A cyberpunk-themed design with neon colors and glowing borders

Press enter or click to view image in full size

Users can switch between them in settings.

The cyberpunk theme uses:

  • Orbitron font for futuristic feel

  • Neon cyan and magenta colors

  • Corner brackets (like a HUD in a video game)

  • Glowing effects on hover

People love it.

Challenge 4: CSS Conflicts with Host Websites

This was sneaky. My tooltip looked perfect on my test page, but when I tested it on real websites, the buttons became huge and misaligned.

Why? Because websites like Tom’s Hardware have global CSS that affects ALL buttons, including my extension’s buttons.

Solution: I prefixed every single CSS class with afs- (short for “app-fusion-studio”): name of my company. SHAMELESS plug there.

  • .btn became .afs-btn

  • .footer became .afs-footer

  • .tooltip-actions became .afs-tooltip-actions

Problem solved. Lesson learned: Always namespace your CSS in browser extensions.

The Features

After a week of development, here’s what Currency Converter Pro can do:

Core Features:

  • Hover over any price to see instant conversion

  • Support for 150+ currencies (USD, EUR, GBP, ZMW, INR, JPY, and more)

  • Real-time exchange rates

  • Works on any website (Amazon, eBay, Booking.com, everywhere. Well almost everywhere)

Pro Features:

Press enter or click to view image in full size

  • Pin Mode: Pin multiple prices to compare side-by-side

  • Price Saving: Save interesting items with price, URL, and date

  • Compact View: Minimal UI for less distraction

  • Theme Switching: Choose between Default and Cyberpunk

Everything happens locally. No tracking. No ads. No data collection.

The Tech Stack

  • JavaScript: Core logic

  • Chrome Extensions API: Storage, messaging

  • Safari WebExtensions: Safari port

  • CSS: Custom themes with CSS variables

  • Xcode: Safari app packaging

  • Git/GitHub: Version control

APIs used:

  • Public exchange rate APIs for live conversion rates

  • DOM manipulation for price detection

  • Chrome storage API for user preferences

My goal: Reach 1,000 users in the first month.

Lessons Learned

  1. Real websites are messy

Building for production is different from building demos. Amazon’s HTML is nothing like your test page.

  1. User feedback is gold

Early testers told me they wanted to compare prices. That’s how Pin Mode was born.

  1. Details matter

The 3-second hover delay before the tooltip disappears? That came from user feedback. Originally it was 300ms, and people kept missing the buttons.

  1. Namespace everything

In browser extensions, CSS conflicts are real. Prefix your classes.

  1. Multi-platform from day one

Building for Chrome, Safari, and Edge from the start wasn’t harder. It just required planning.

  1. Privacy matters

Users want extensions that don’t spy on them. “No tracking” is a feature.

What’s Next

I’m working on:

  • Firefox support

  • Cryptocurrency conversion (BTC, ETH)

  • Historical price tracking

  • Price drop alerts

  • Mobile Safari support

But first, I need to launch and see how people use it.

The Zambian Angle

Building this from Zambia has been interesting. The Zambian Kwacha (ZMW) isn’t a popular currency in global software, but it’s MY currency. Every time I convert a price to ZMW, I’m solving my own problem.

And if it works for me in Zambia, it works for anyone anywhere dealing with multiple currencies.

That’s the beauty of building for yourself first. You create something you actually use every day.

Try It

Currency Converter Pro is available now for Microsoft Edge:

https://bit.ly/4bCfDZV

It’s free. No account needed. Just install and hover.

If you shop online, travel frequently, or work with international clients, this will save you hours.

Final Thoughts

This project taught me that the best products come from scratching your own itch.

Press enter or click to view image in full size

I didn’t build this because I thought it would make money. I built it because I was frustrated with the status quo.

And that frustration led to something genuinely useful.

If you’re thinking about building something, do it. Start small. Solve your own problem. The rest will follow.

Top comments (0)