DEV Community

Phi Thành
Phi Thành

Posted 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 (0)