Building a live stock market dashboard as a Firefox extension: free APIs, sparklines, no backend

#firefox #javascript #webextensions #finance

I check market prices every morning. AAPL, NVDA, the S&P — not to trade, just to have a pulse on what is happening.

Opening a financial site for this is friction: ads, popups, account prompts, recommended articles I did not ask for.

So I built Stock Market & Finance Dashboard — a Firefox extension that puts a live market overview on every new tab.

What it shows

Major indices — S&P 500, NASDAQ, DOW, Russell 2K, live prices and daily change
Watchlist — your stocks, with mini sparklines, prices, and percent change
Crypto — BTC, ETH, SOL, BNB, XRP from CoinGecko
Top movers — biggest gainers and losers of the day
Search — search any ticker or company name
Market status — open, closed, pre-market, after-hours

The API situation for free market data

Real-time market data is expensive. Bloomberg charges thousands per month. Refinitiv is not for individuals.

But for a personal overview dashboard with a 1-minute refresh interval, free APIs are good enough:

Yahoo Finance API — undocumented but stable. Returns quotes for any ticker symbol.

const YF_BASE = 'https://query1.finance.yahoo.com';

async function fetchQuotes(symbols) {
  const joined = symbols.map(encodeURIComponent).join(",");
  const fields = "symbol,regularMarketPrice,regularMarketChangePercent";
  const resp = await fetch(`${YF_BASE}/v7/finance/quote?symbols=${joined}&fields=${fields}`);
  const data = await resp.json();
  return data.quoteResponse.result;
}

CoinGecko API — free tier, 30 calls/minute, covers all major cryptocurrencies.

Neither requires an API key for basic usage. Both are accessed directly from the browser — no server proxy needed.

Why the extension does not need backend infrastructure

Most financial apps run a backend that caches market data and serves it to clients. This makes sense if you are building for millions of users.

For a personal browser extension, the browser can call the APIs directly. There is no shared state to cache. The extension just fetches fresh data when you open a new tab.

This means zero infrastructure cost and zero maintenance overhead for the data layer.

The sparkline component

Each watchlist item shows a mini price chart for the day. This is built with inline SVG — no charting library needed:

function sparklineSVG(prices, isPositive) {
  const W = 64, H = 26, pad = 1;
  const min = Math.min(...prices), max = Math.max(...prices);
  const range = max - min || 1;
  const pts = prices.map((p, i) => {
    const x = pad + (i / (prices.length - 1)) * (W - pad * 2);
    const y = H - pad - ((p - min) / range) * (H - pad * 2);
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(" ");
  const color = isPositive ? "var(--gain)" : "var(--loss)";
  return `<svg width="${W}" height="${H}"><polyline points="${pts}" fill="none" stroke="${color}" stroke-width="1.5"/></svg>`;
}

64x26 pixels, inline SVG. Renders fast, no dependencies, works with any CSS color scheme.

Install it

Stock Market & Finance Dashboard on Firefox Add-ons

Free, no signup, no ads. If you check prices every morning, this saves you opening a financial website.

Free market data APIs are more capable than most developers realize. If you are building personal finance tools, start with Yahoo Finance and CoinGecko before paying for a data provider.

DEV Community