DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

From New Tab to Productivity Hub: Building a Zero-Config Firefox Extension

Most Firefox extensions require configuration — accounts, API keys, settings to tweak. Weather & Clock Dashboard is different. You install it, and it just works.

The Design Philosophy

When I started building this new tab extension, I had one rule: zero configuration required. No account signup. No API key. No settings to tweak before you see anything useful.

This forced some interesting engineering decisions.

Using Open-Meteo for Weather

The biggest challenge was weather data. Most weather APIs require an account and API key. Open-Meteo changed this — it's free and requires no authentication:

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

No API key. No headers. No auth. Just a URL.

Auto-detecting Location

For location, I use the browser's Geolocation API:

navigator.geolocation.getCurrentPosition(
  ({ coords }) => fetchWeather(coords.latitude, coords.longitude),
  () => fallbackToIP()
);
Enter fullscreen mode Exit fullscreen mode

World Clocks Without a Library

For timezone support, I lean on JavaScript's built-in Intl API:

new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  hour: '2-digit',
  minute: '2-digit',
  hour12: true
}).format(new Date());
Enter fullscreen mode Exit fullscreen mode

All 500+ IANA timezone identifiers work out of the box. No library needed.

The Result

Weather & Clock Dashboard works the moment you install it. No setup screen. No "Connect your account" flow. Just open a new tab and see live weather, a 3-day forecast, world clocks, and a search bar.

Install on AMO: Weather & Clock Dashboard

GitHub: Open source, MIT license

Questions about the implementation? Drop a comment!

Top comments (0)