Build a Crypto Price Ticker Chrome Extension with Live Prices and 24h Change

What Makes This Extension Advanced

The basic version fetches BNB and ETH prices. This advanced version adds:

• ✓24-hour price change with green (up) and red (down) color indicators
• ✓Favorite coins — users can choose which tokens to track
• ✓Auto-refresh every 60 seconds so prices stay current
• ✓Add custom coins by CoinGecko ID

The CoinGecko API — 100% Free

CoinGecko's public API requires no API key for basic usage. This endpoint returns price and 24h change for multiple coins at once:

https://api.coingecko.com/api/v3/simple/price
  ?ids=binancecoin,ethereum,bitcoin
  &vs_currencies=usd
  &include_24hr_change=true

Fetching and Displaying Price Data

async function fetchPrices(coinIds) {
  const ids = coinIds.join(',');
  const url = `https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd&include_24hr_change=true`;

  const response = await fetch(url);
  const data     = await response.json();
  return data;
}

function renderCoin(name, price, change24h) {
  const isPositive = change24h >= 0;
  const changeClass = isPositive ? 'positive' : 'negative';
  const arrow = isPositive ? '▲' : '▼';

  return `
    <div class="coin-row">
      <span class="coin-name">${name.toUpperCase()}</span>
      <span class="coin-price">$${price.toLocaleString()}</span>
      <span class="coin-change ${changeClass}">
        ${arrow} ${Math.abs(change24h).toFixed(2)}%
      </span>
    </div>
  `;
}

Auto-Refresh with setInterval

// Refresh prices every 60 seconds
let refreshInterval;

function startAutoRefresh() {
  fetchAndRender(); // Immediate first fetch
  refreshInterval = setInterval(fetchAndRender, 60000);
}

// Show countdown timer
let countdown = 60;
setInterval(() => {
  countdown--;
  if (countdown <= 0) countdown = 60;
  document.getElementById('refresh-timer').textContent = `Refreshes in ${countdown}s`;
}, 1000);

This is a preview. The full ebook includes adding/removing coins, searching by name, persistent favorites with chrome.storage, loading states, and error handling for failed API calls.