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)
};
}
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
Proxyless APIs are powerful. wttr.in removes a huge barrier — users never need to get an API key.
localStorage is enough for user preferences in an extension context. Don't over-engineer it.
Firefox's browser API is well-documented.
browser.storage.localis also available if you need cross-device sync, but for most use cases, localStorage works fine.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.
