DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

How I Built a Firefox New Tab Extension with Pure HTML/CSS/JS (No Frameworks)

#firefox #webextensions #javascript #opensource

When I started building a new tab extension for Firefox, I made a deliberate choice: no npm, no webpack, no build pipeline. Just HTML, CSS, and vanilla JavaScript.

Here's what I learned.

The motivation

I wanted a new tab page that shows live weather, world clocks, and a search bar. Simple. But most extensions I found were either bloated with React+Redux or required API key signups.

I decided to build one myself. Clean, fast, zero tracking.

The architecture

The extension is a single newtab.html file with inline CSS and JS. No external dependencies. The whole thing loads in under 100ms.

Weather data: I use wttr.in, a free weather service that returns JSON without requiring an API key. Just fetch https://wttr.in/{city}?format=j1 and you get current conditions + 3-day forecast.

async function fetchWeather(city) {
  const resp = await fetch(`https://wttr.in/${encodeURIComponent(city)}?format=j1`);
  const data = await resp.json();
  return {
    temp: data.current_condition[0].temp_C,
    desc: data.current_condition[0].weatherDesc[0].value,
    forecast: data.weather.slice(0, 3)
  };
}
Enter fullscreen mode Exit fullscreen mode

World clocks: Built with Intl.DateTimeFormat — no moment.js needed. Users can add any IANA timezone.

Persistence: Just localStorage. No server, no account required.

What I learned

  1. Proxyless APIs are powerful. wttr.in removes a huge barrier — users never need to get an API key.

  2. localStorage is enough for user preferences in an extension context. Don't over-engineer it.

  3. Firefox's browser API is well-documented. browser.storage.local is also available if you need cross-device sync, but for most use cases, localStorage works fine.

  4. Vanilla JS for DOM manipulation is more than capable for a focused extension. The clock update loop, theme switching, and weather refresh all work cleanly without a framework.

The result

Weather & Clock Dashboard for Firefox:

  • Live weather + 3-day forecast for any city (via wttr.in)
  • Multiple world clocks (any IANA timezone)
  • Search bar using your default Firefox search engine
  • Dark/light mode toggle
  • Zero tracking, MIT licensed, open source

Install free: https://addons.mozilla.org/en-US/firefox/addon/weather-clock-dashboard/

Thoughts on "no frameworks"

This isn't a dogmatic stance. For large applications, frameworks save time. But for a new tab extension that should load instantly on every new tab, cutting the framework overhead made sense.

The final bundle: 0 npm dependencies, ~300 lines of JS, instant load time.

If you're building a Firefox extension and wondering whether to add a framework — at least consider if you actually need it first.

Top comments (0)