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 ].…