I Replaced My Browser's New Tab Page and Here's What I Learned

A few months ago I got annoyed with my browser's default new tab. It was just... empty. A blank page that told me nothing useful, required me to immediately type something, and had zero personality.

So I replaced it. Here's what I built, what I learned, and why it took way longer than I expected.

The Goal

I wanted a new tab that:

1. Showed me current weather and a 3-day forecast
2. Displayed 3-4 world clocks for the timezones I care about
3. Had a decent search bar
4. Worked in dark mode
5. Didn't send my data anywhere

That last point matters more than people think. Most "productivity" new tab extensions are monetized through data collection. A new tab extension that loads on every tab open is in a uniquely powerful position to track browsing patterns.

What I Built

Weather & Clock Dashboard — a Firefox extension that replaces the new tab with exactly the above.

Lesson 1: Open-Meteo is underrated

Most developers reach for OpenWeatherMap or WeatherAPI.com first. Both require API keys. Both have rate limits. Both require you to trust a third party with your queries (which implicitly reveal your location and browsing times).

Open-Meteo requires no account, no API key, and is open source. You give it latitude and longitude, it gives you weather. The only catch: you need to get the user's coordinates yourself, which the browser Geolocation API handles.

// That's literally it.
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&forecast_days=4&timezone=auto`
);

Lesson 2: New tab extensions are weird to debug

You can't just open DevTools on a new tab page like a normal page. You have to:

1. Go to about:debugging in Firefox
2. Click "This Firefox"
3. Find your extension
4. Click "Inspect" next to the extension's page

This opens a separate DevTools instance. It's fine once you know it, but it wasted an embarrassing amount of my time initially.

Lesson 3: browser.storage.local is your best friend

For persisting settings (dark mode, timezone preferences, saved locations), browser.storage.local is the right tool:

// Save
await browser.storage.local.set({ theme: 'dark', clocks: userClocks });

// Load
const { theme, clocks } = await browser.storage.local.get(['theme', 'clocks']);

It's async, it survives browser restarts, and it's scoped to your extension. No cookies, no localStorage weirdness, no cross-origin issues.

Lesson 4: The AMO review process is thorough

Mozilla's add-on reviewers actually read your code. They look for:

• Unnecessary permissions
• External requests to undeclared domains
• Any eval() or remote code execution
• Code that could be used to track users

I got approved quickly because my extension is dead simple: one HTML file, one CSS file, one JS file. No build step, no bundling, no obfuscation. When the reviewer opened the source, they could read it in 20 minutes.

If you're shipping a bundled extension with webpack, you'll need to submit the unminified source separately. This adds friction. I'd recommend staying unbundled if possible for small projects.

Lesson 5: Dark mode is easier than you think

:root[data-theme='dark'] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
  --card: #16213e;
}

:root[data-theme='light'] {
  --bg: #f5f5f5;
  --text: #333;
  --card: #fff;
}

One attribute on :root, CSS variables for everything, a JS toggle that writes to storage.local. Done.

The Result

I use it every day now. Weather is accurate (within 1°C of actual), the world clocks are useful for coordinating with colleagues in other timezones, and the search bar is fast.

If you want to try it: install from Firefox Add-Ons.

If you want to build your own version: the MIT-licensed source is worth reading. It's small enough to understand completely in an afternoon.