DEV Community

Cover image for Build a Chrome Extension to Check Real-Time Gold Price (Beginner Friendly)
Phi Thành
Phi Thành

Posted on Edited on

Build a Chrome Extension to Check Real-Time Gold Price (Beginner Friendly)

#api #fintech #extensions #development

If you’ve ever traded, tracked markets, or just got curious about gold prices, you probably know how annoying it is to constantly open tabs just to check one number.

So instead, let’s build a simple Chrome extension that shows the real-time gold price right in your browser.

No fluff. No overengineering. Just something useful.

🧠 What We’re Building

A lightweight Chrome extension that:

  • Fetches gold price (XAUUSD)
  • Displays it in a popup
  • Updates on demand (or periodically if you want)

⚙️ Step 1: Create the Extension Structure

Create a folder:
gold-price-extension/

Inside it:
manifest.json
popup.html
popup.js

📄 Step 2: manifest.json 

{
  "manifest_version": 3,
  "name": "Gold Price Checker",
  "version": "1.0",
  "description": "Check real-time gold price",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["storage"]
}
Enter fullscreen mode Exit fullscreen mode

Step 3: UI popup.html 

<!DOCTYPE html>
<html>
<head>
  <title>Gold Price</title>
  <style>
    body {
      font-family: Arial;
      padding: 10px;
      width: 200px;
    }
    #price {
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div>Gold Price (XAUUSD)</div>
  <div id="price">Loading...</div>
  <button id="refresh">Refresh</button>

  <script src="popup.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 4: Fetch Data popup.js

You can use any market data API here. There are many options out there — paid, free, aggregated, etc. Pick what fits your needs.

For this example, we’ll use RealMarketAPI because it’s lightweight and the free tier (5k requests/month) is more than enough for something like this.

Before running the extension, make sure you have an API key.

  • Sign up with any market data provider you prefer
  • Generate your API key
  • Replace API_KEY in the code 
const priceEl = document.getElementById("price");
const refreshBtn = document.getElementById("refresh");

async function fetchPrice() {
  priceEl.innerText = "Loading...";

  try {
    const res = await fetch(
      "https://api.realmarketapi.com/api/v1/price?apiKey=API_KEY&symbolCode=XAUUSD&timeFrame=H1"
    );

    const data = await res.json();

    priceEl.innerText = `$${data.closePrice}`;
  } catch (err) {
    priceEl.innerText = "Error fetching price";
    console.error(err);
  }
}

refreshBtn.addEventListener("click", fetchPrice);

// load on open
fetchPrice();
Enter fullscreen mode Exit fullscreen mode

📦 Example API Response 

{
  "symbolCode": "XAUUSD",
  "openPrice": 4738.27400000,
  "closePrice": 4739.83000000,
  "highPrice": 4746.85500000,
  "lowPrice": 4724.20200000,
  "volume": 6365,
  "openTime": "2026-04-01T14:00:00.000Z",
  "bid": 4739.83,
  "ask": 4740.046
}
Enter fullscreen mode Exit fullscreen mode

You can display more than just closePrice if you want:
Bid / Ask
High / Low
Volume

🚀 Step 5: Load the Extension

Open Chrome
Go to: chrome://extensions/
Enable Developer mode
Click Load unpacked
Select your folder

Done.

🔄 Optional: Auto Refresh

If you want it to update automatically:

setInterval(fetchPrice, 60000); // every 60s
Enter fullscreen mode Exit fullscreen mode

✅ Conclusion

That’s it — a simple Chrome extension that gives you real-time gold prices without needing to open a single tab.

It’s small, but practical. And more importantly, it shows how easy it is to turn raw API data into something you actually use every day.

From here, you can go as deep as you want — add more assets, build charts, set alerts, or even turn it into a full trading dashboard.

Top comments (2)

Collapse
 
melvinhawkins profile image
melvin hawkins •

The extension could become much more useful if it showed both the live XAUUSD price and the current gold ounce rate. For example, checking سعر أونصة الذهب اليوم gives another useful reference point when comparing different gold prices. This would make the extension more practical for people who follow physical gold as well as market prices.

A simple calculator for converting ounces into grams would be another easy addition. You could also let users select different currencies instead of displaying everything in USD. That would keep the extension lightweight while adding a lot more practical value.

Collapse
 
melvinhawkins profile image
melvin hawkins •

Your guide is amazing. I am planning to make a similar type of extension for my site goldprice.tr and your guide has helped me a lot. Keep sharing such stuff.