Building a Firefox New Tab Extension: From Idea to AMO Publishing

Every time you open a new tab in Firefox, there's a missed opportunity. The default page is... fine. But what if it showed you the weather, your world clocks, and a search bar — all without any data leaving your device?

That's what I built with Weather & Clock Dashboard. Here's how the whole thing came together, including the surprising parts of publishing to AMO (addons.mozilla.org).

The manifest.json entry point

A new tab override is deceptively simple:

{
  "manifest_version": 2,
  "name": "Weather & Clock Dashboard",
  "version": "1.0",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": ["storage"]
}

One file override, one permission. That's it.

Fetching weather without a backend

Most weather APIs require server-side secrets. I wanted zero backend — so I used Open-Meteo, which is:

• Completely free
• No API key required
• Accurate 7-day forecasts
• Open source

The flow: browser gets geolocation → sends lat/lon to Open-Meteo → renders weather data locally. No proxy, no tokens, no secrets.

async function fetchWeather(lat, lon) {
  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=4&timezone=auto`;
  const res = await fetch(url);
  return res.json();
}

World clocks with zero libraries

The Intl API has been in browsers for years and handles everything:

function getTimeInZone(timezone) {
  return new Intl.DateTimeFormat('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: true,
    timeZone: timezone
  }).format(new Date());
}

No moment.js. No date-fns. 12 bytes of IANA timezone string and the native API handles DST automatically.

The AMO review process

This surprised me. Mozilla's review is genuine — not just automated scanning.

What they check:

• All external requests must be documented
• No eval(), no remote code execution
• Permissions must be minimal and justified
• Source must be readable (no obfuscated bundles)

What helped my review pass quickly:

• Single-file architecture (no build step, no webpack)
• Only one external domain (open-meteo.com, no auth required)
• storage permission only — no tabs, no webRequest, no activeTab
• Clean, commented code

If you're shipping a bundled/minified extension, you'll need to submit source code separately. Plain files skip that entirely.

Dark/light mode

I hooked into prefers-color-scheme so it respects the OS setting automatically, with a manual toggle that persists via browser.storage.local:

const stored = await browser.storage.local.get('theme');
const theme = stored.theme || 
  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.body.setAttribute('data-theme', theme);

What I'd do differently

1. Manifest v3 from the start — Firefox now supports MV3, and it's where the ecosystem is heading
2. i18n from day one — Adding _locales/ later is tedious
3. Start with open-meteo — I initially tried WeatherAPI.com and had to refactor

Try it

Install from AMO: Weather & Clock Dashboard

Source code is MIT licensed. If you're building a browser extension, the "no backend, no API keys" approach is underrated — less complexity, more user trust, and nothing to secure.

Happy to answer questions about the review process or the Open-Meteo integration in the comments.