Replacing your Firefox new tab page is surprisingly powerful — you see it dozens of times a day. Here's how I built a dashboard that actually earns that real estate.

What I Built

Weather & Clock Dashboard is a Firefox new tab extension that shows:

• Live weather with current conditions and 3-day forecast
• World clocks for multiple time zones
• Search bar (supports DuckDuckGo, Google, Bing)
• Clean dark/light mode

The Technical Stack (or Lack Thereof)

The entire extension is a single newtab.html file. No npm, no webpack, no build step. Just vanilla HTML, CSS, and JavaScript.

<!-- manifest.json -->
{
  "manifest_version": 3,
  "name": "Weather & Clock Dashboard",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": ["storage"]
}

That's it. The extension replaces Firefox's new tab with your custom page.

Getting Weather Data Without an API Key

Most weather APIs require signup and have rate limits. I used Open-Meteo — a free, open-source weather API that requires zero authentication:

const response = await fetch(
  `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto`
);
const data = await response.json();

The API returns current conditions plus a 3-day forecast. No API key, no rate limits for reasonable personal use.

Geolocation in a New Tab Extension

Browser extensions can use the Geolocation API just like websites. But there's a catch: newtab pages don't automatically get location permission.

The workaround: store coordinates in browser.storage.local after first prompt, then reuse them:

navigator.geolocation.getCurrentPosition(async (pos) => {
  const { latitude, longitude } = pos.coords;
  await browser.storage.local.set({ lat: latitude, lon: longitude });
  // now fetch weather...
});

Users see the permission prompt once. After that, the new tab loads weather data instantly.

World Clocks

For world clocks, JavaScript's Intl.DateTimeFormat handles timezone conversions natively:

function getTimeInZone(timezone) {
  return new Intl.DateTimeFormat('en-US', {
    timeZone: timezone,
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  }).format(new Date());
}

No external library needed. Users can pick from any IANA timezone.

Dark Mode Without a Framework

Just CSS custom properties + a class toggle:

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
}

[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}

const saved = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', saved);

No React state, no styled-components, no Tailwind. Just CSS doing what CSS was made for.

What I Learned

1. Browser extensions are simpler than you think — Manifest V3 is well-documented and Firefox's AMO review process is thorough but fair
2. Zero dependencies is a feature — The extension loads in under 100ms because there's nothing to parse
3. Open APIs are underrated — Open-Meteo lets you build real weather features without a credit card

Install It

The extension is free, open source (MIT), and available on Mozilla Add-ons.

If you've been thinking about building a browser extension, this is honestly a great project to start with. The scope is small enough to ship in a weekend, but the result is something you'll see every single day.

Follow @weatherclockdash on Mastodon for updates.