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.