DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

I Built a Firefox New Tab Extension with Zero Dependencies — Here'''s How

#firefox #webdev #javascript #opensource

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"]
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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...
});
Enter fullscreen mode Exit fullscreen mode

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());
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', saved);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)