DEV Community: Weather Clock Dash

10 Free Firefox Extensions Worth Installing (No Accounts, No Subscriptions)

Weather Clock Dash — Wed, 14 Oct 2026 11:40:14 +0000

If you use Firefox and you want to be more productive without subscribing to another app, these 10 free extensions are worth knowing about. No ads, no subscriptions, no accounts, no data collection. They just work.

1. Tab Manager & Session Saver

If you constantly have too many tabs open — and lose track of what you were researching after a browser restart — this is the one to install first.

What it does: Save your current browser session (all open tabs) as a named snapshot. Restore any saved session with one click. Search all your open tabs. Find and close duplicates.

No sync, no cloud. Sessions stored locally.

👉 Tab Manager & Session Saver — Free

2. NightOwl — Dark Mode for Every Website

Some websites still don't have a dark mode in 2026. NightOwl adds intelligent dark mode to any page, preserving images and videos (no color inversion weirdness).

What it does: One-click dark mode for any site. Schedule it to activate at sunset and deactivate at sunrise. Per-site whitelist for sites you want to keep light.

👉 NightOwl Dark Mode — Free

3. Daily Planner & To-Do List

A to-do list that lives in a new tab. Every time you open a new tab, you see your task list — not a blank page or a generic feed.

What it does: Add, check off, and organize tasks. Daily reset option. No account required.

Best for: People who want a lightweight task list without Notion, Todoist, or another subscription.

👉 Daily Planner & To-Do List — Free

4. Voice Notes & Audio Recorder

For when you need to capture a thought quickly but don't want to stop and type.

What it does: One-click microphone recording from the toolbar. Saves recordings locally (no cloud). Playback in the extension. Export as WAV.

Best for: Remote workers between meetings, students after lectures.

👉 Voice Notes & Audio Recorder — Free

5. Quick Calculator

A calculator that opens from the toolbar. No switching apps or tabs to do basic math.

What it does: Click the icon, do your calculation, copy the result. Standard and scientific modes.

Small and focused — this solves exactly one problem well.

👉 Quick Calculator — Free

6. Weather & Clock Dashboard

Turns your new tab into a live weather dashboard: temperature, humidity, feels-like, wind speed, and a clock.

Uses Open-Meteo's free weather API. No API key required.

👉 Weather & Clock Dashboard — Free

7. Speed Dial Hub

Replaces your new tab with a visual grid of your most-visited or favorite sites. Click once to open any of them.

Better than bookmarks for your "daily driver" sites.

👉 Speed Dial Hub — Free

8. AI Writing Assistant

Right-click any text field on any website. Select text and choose: Rewrite, Summarize, Expand, Fix grammar, or Change tone.

The result replaces your text inline — no copy-pasting, no switching to a separate AI chat.

Best for: Drafting emails, Slack messages, feedback forms.

👉 AI Writing Assistant — Free

9. News Widget Dashboard

Replaces your new tab with a curated news feed from sources you choose. Stay current without social media.

👉 News Widget Dashboard — Free

10. Stock Market & Finance Dashboard

For anyone tracking a portfolio: replaces your new tab with live stock prices, charts, and market data.

👉 Stock Market & Finance Dashboard — Free

The Setup I Recommend

For remote workers: Tab Manager + NightOwl + Daily Planner + AI Writing Assistant

For students: Tab Manager + Daily Planner + Voice Notes + Quick Calculator

For casual users: NightOwl + Weather & Clock + Speed Dial Hub + News Widget

All 10 are free with no accounts or subscriptions. Install whichever fit your workflow.

Building Voice Notes for Firefox: Web Audio API, No Cloud, No Account

Weather Clock Dash — Wed, 14 Oct 2026 11:37:30 +0000

Most note-taking apps for remote workers are overkill: accounts, sync, subscriptions, storage limits. For quick voice memos between meetings, I wanted something that worked without any of that.

What I Built

Voice Notes & Audio Recorder is a Firefox extension that lets you:

Record a voice note from your browser toolbar — one click to start, one to stop
Save notes locally (no cloud upload)
Play back and delete recordings directly in the extension popup
Export as a WAV file if you want to save it elsewhere

No account. No cloud. No subscription. Everything stays in your browser's local storage.

Who It's For

Remote workers who want to quickly capture a thought between back-to-back meetings without stopping to type. Students who want to record a reflection after a lecture. Anyone who thinks faster out loud than on a keyboard.

Technical Approach

The extension uses the Web Audio API and MediaRecorder:

// Request microphone permission
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);

const chunks = [];
mediaRecorder.ondataavailable = (e) => chunks.push(e.data);

mediaRecorder.onstop = async () => {
  const blob = new Blob(chunks, { type: 'audio/webm;codecs=opus' });
  const base64 = await blobToBase64(blob);

  const { recordings = [] } = await browser.storage.local.get('recordings');
  recordings.push({
    id: Date.now().toString(),
    data: base64,
    duration: /* calculated from timestamps */,
    created: Date.now()
  });
  await browser.storage.local.set({ recordings });
};

Storage Considerations

Audio recordings in base64 format are large. A 1-minute recording at Opus codec quality is roughly 200KB. Firefox's storage.local has a 10MB default limit.

For the extension, this means roughly 40-50 one-minute recordings maximum. That's fine for the use case (quick memos, not podcast storage). The UI shows a warning when you're approaching the limit.

Playback

For playback, the stored base64 is converted back to a Blob and played through an <audio> element in the popup:

function playRecording(base64Data) {
  const byteChars = atob(base64Data.split(',')[1]);
  const byteArray = new Uint8Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }
  const blob = new Blob([byteArray], { type: 'audio/webm;codecs=opus' });
  const url = URL.createObjectURL(blob);

  const audio = new Audio(url);
  audio.play();
  audio.onended = () => URL.revokeObjectURL(url);
}

Permissions

The extension only requests microphone permission when the user first clicks record — not on install. Firefox's permission model shows the permission request in context, which helps users understand why it's needed.

{
  "permissions": ["storage"],
  "optional_permissions": ["microphone"]
}

What I'd Add

Voice-to-text transcription — The Web Speech API supports transcription. Adding an optional "transcribe this note" button would let users get text from their voice memos without a third-party service. The catch: Web Speech API quality varies significantly by browser and language.

Tags/search — Right now notes are just a list sorted by date. Tags or a search bar would help when you have 20 notes.

Try It

Free, no account: Voice Notes & Audio Recorder on Firefox AMO

Other extensions in the same productivity set: see the full list here.

Building an AI Writing Assistant Firefox Extension (Context Menu + Text Replacement)

Weather Clock Dash — Wed, 14 Oct 2026 11:34:32 +0000

I built an AI Writing Assistant for Firefox because I kept switching between browser tabs, copying text into ChatGPT, waiting for it to load, and then switching back. There had to be a better way.

What It Does

AI Writing Assistant adds a right-click context menu to any text field on any website. Select text, right-click, and choose:

Rewrite — Improve clarity and flow
Summarize — Condense long content to key points
Expand — Add more detail to a brief draft
Fix grammar — Clean up mistakes
Change tone — Professional, casual, or formal variants

The result replaces your selected text inline — no switching tabs, no copy-paste.

Use Cases

This is for everyday writing, not developers. The use cases that come up most in user feedback:

Remote workers drafting Slack messages and emails. "I need to push back on this timeline" can become "I'd like to discuss adjusting the timeline" with one click.

Students revising essays. Select a paragraph, hit Expand, and get a longer version to work from.

Non-native English speakers cleaning up grammar without stopping their workflow.

Anyone writing who just wants a second opinion on a sentence without leaving what they're doing.

How It Works

The extension uses the browser's native context menu API:

// manifest.json
"permissions": ["contextMenus", "activeTab", "storage"]

// background.js
browser.contextMenus.create({
  id: 'rewrite',
  title: 'Rewrite with AI',
  contexts: ['editable', 'selection']
});

browser.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === 'rewrite' && info.selectionText) {
    const result = await callAI(info.selectionText, 'rewrite');
    await browser.tabs.sendMessage(tab.id, { action: 'replaceText', text: result });
  }
});

The content script handles text replacement:

// content.js
browser.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'replaceText') {
    const active = document.activeElement;
    if (active.isContentEditable) {
      document.execCommand('selectAll', false, null);
      document.execCommand('insertText', false, msg.text);
    } else if (active.tagName === 'TEXTAREA' || active.tagName === 'INPUT') {
      const start = active.selectionStart;
      const end = active.selectionEnd;
      active.value = active.value.substring(0, start) + msg.text + active.value.substring(end);
      active.setSelectionRange(start, start + msg.text.length);
    }
  }
});

Privacy Considerations

The AI calls go through a minimal proxy that strips identifiers before forwarding to the model. No text is stored. The extension doesn't have access to your history or other tabs — only the text you explicitly select and the activeTab permission.

Limitations

The extension works on standard text fields and contenteditable elements. It does not work on:

Canvas-based editors (some code editors)
iframes with cross-origin restrictions
Google Docs (which uses its own rendering layer)

Free to Use

No account, no subscription. Just install and it works:

AI Writing Assistant on Firefox AMO

Other extensions in the same productivity set: full list here.

How I Built NightOwl: A Smart Dark Mode Extension for Firefox

Weather Clock Dash — Wed, 14 Oct 2026 11:34:14 +0000

Browser dark mode used to mean hunting through settings, installing heavy extensions that slowed everything down, or just living with eye strain. I built NightOwl because none of the options were right.

The Problem With Existing Dark Mode Extensions

Most dark mode extensions fall into one of two categories:

Too heavy — Some popular dark mode extensions load MB of CSS per page, slow down rendering, and have dozens of config options most people never touch. For users who just want "dark, please" — it's overkill.

Too basic — The simple ones invert colors, which makes images look weird (inverted photos are jarring) and doesn't handle edge cases like videos.

What NightOwl Does Differently

NightOwl applies smart dark mode to every website with one click. Key design decisions:

Smart Color Inversion

Instead of inverting everything, NightOwl targets background colors and text colors specifically. Images, videos, and elements with background-image are excluded from inversion. This means your photos still look like photos.

Schedule Mode

Night owls don't all work the same hours. NightOwl lets you set a start time and end time for dark mode — it activates and deactivates automatically. For remote workers who start at 10pm or students pulling late-night study sessions, this is genuinely useful.

Per-Site Whitelist

Some sites look great in dark mode. Others (certain dashboards, design tools) look broken. NightOwl remembers per-site settings, so you can keep LinkedIn dark while keeping Figma light.

Technical Approach

The extension works through a combination of CSS injection and DOM manipulation:

/* Core dark mode CSS */
:root {
  --nightowl-bg: #1a1a2e;
  --nightowl-text: #e8e8e8;
  --nightowl-link: #8eb4f8;
}

/* Applied to body */
body {
  background-color: var(--nightowl-bg) !important;
  color: var(--nightowl-text) !important;
}

/* Smart image handling */
img, video, canvas, [style*="background-image"] {
  filter: none !important;
}

The schedule feature uses browser.alarms — Firefox's built-in alarm API that wakes up the service worker at the scheduled time without needing the extension to be always running.

The Inversion Algorithm

Pure CSS inversion (filter: invert(1)) on the root element flips everything including images. A better approach:

Apply a dark background/text color scheme to root
Walk through all elements that have an explicit light background color (background-color, background shorthand)
Replace light backgrounds with dark equivalents using HSL manipulation
Skip elements with media content

function adjustBackgrounds(root) {
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
  let node;
  while ((node = walker.nextNode())) {
    const computed = window.getComputedStyle(node);
    const bg = computed.backgroundColor;
    if (isLight(bg)) {
      node.style.setProperty('background-color', darken(bg), 'important');
    }
  }
}

function isLight(color) {
  // Parse RGB and check luminance
  const rgb = parseRgb(color);
  if (!rgb) return false;
  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
  return luminance > 0.5;
}

Performance Considerations

Dark mode injection runs on every page load. A few things I did to keep it fast:

Debounced MutationObserver — For SPAs that update the DOM, use a debounced observer rather than listening to every individual change.

CSS Variables First — Many modern sites already use CSS variables. Setting the variable on :root is one operation that cascades everywhere, instead of walking the DOM.

No blocking main thread — All DOM manipulation runs in a requestAnimationFrame callback to avoid layout thrashing.

Try It

NightOwl is free, no subscription, no tracking. The whole extension is open source:

NightOwl Dark Mode on Firefox AMO

If you're interested in the full set of Firefox productivity tools I've built: see the overview post here.

How I Built a Tab Manager Extension for Firefox (Zero Dependencies, MV3)

Weather Clock Dash — Wed, 14 Oct 2026 11:23:35 +0000

I've been building Firefox extensions for the past year, and the Tab Manager & Session Saver is the one I use every day myself. Here's what I built and why.

The Problem

You know the drill. You have 40 tabs open researching a topic, your browser crashes, and you lose half of them. Bookmarks don't work — they're permanent. I needed something temporary: "save this pile of tabs so I can get back to them later."

What I Built

Tab Manager & Session Saver (free on AMO) does three things:

Save a session — one click captures all open tabs as a named snapshot
Restore a session — open all tabs from a saved snapshot with one click
Manage open tabs — see all tabs, search them, close duplicates

No account. No sync. No subscription. Sessions stored locally.

Technical Decisions

Manifest V3

All new Firefox extensions should use MV3. The main change is using browser.action instead of browser.browserAction. For a tab manager, the core browser.tabs API is identical in both versions.

No Framework

The popup UI is 200 lines of vanilla JavaScript. React would add 100KB+ of dependencies for a list with a search box. The whole extension is under 50KB.

async function saveSession(name) {
  const tabs = await browser.tabs.query({ currentWindow: true });
  const session = {
    id: Date.now().toString(),
    name: name || `Session ${new Date().toLocaleDateString()}`,
    tabs: tabs.map(t => ({ url: t.url, title: t.title, favIconUrl: t.favIconUrl })),
    created: Date.now()
  };
  const { sessions = [] } = await browser.storage.local.get('sessions');
  sessions.unshift(session);
  await browser.storage.local.set({ sessions });
  return session;
}

Storage

browser.storage.local holds up to 10MB. A typical session with 30 tabs is under 5KB. You'd need 2,000 sessions to hit the limit.

Duplicate Detection

function findDuplicates(tabs) {
  const seen = new Map();
  for (const tab of tabs) {
    const key = tab.url.split('#')[0];
    if (seen.has(key)) {
      seen.get(key).push(tab.id);
    } else {
      seen.set(key, [tab.id]);
    }
  }
  return seen;
}

What I'd Add Next

Sync across devices via browser.storage.sync (5MB limit)
Export/import sessions as JSON
Group by domain for large research sessions

The Extension

Free, no account, no data collection: Tab Manager & Session Saver

I also built 9 other free Firefox extensions: see the full list here.

I built 10 free Firefox extensions for everyday users — here's what I learned

Weather Clock Dash — Wed, 14 Oct 2026 10:30:30 +0000

I've spent the last several months building Firefox extensions focused on everyday users — not developers. Students, remote workers, home users. People who just want their browser to do more.

Here's the full story, and all 10 extensions.

Why everyday users?

Most browser extension articles are written by developers, for developers. But Firefox has millions of users who just want their browser to be a little smarter.

I decided to build for them.

The extensions

Tab Manager & Session Saver — Saves your open tabs as named sessions. Close Firefox, restore exactly where you left off.

NightOwl — Dark mode on every website, including ones that ignore system settings.

Voice Notes & Audio Recorder — Record voice memos right in your browser.

Daily Planner & To-Do List — Replaces your new tab with your daily task list.

AI Writing Assistant — Better writing, right in your browser.

Weather & Clock Dashboard — Live weather in every new tab.

News & Widget Dashboard — Your daily headlines in every new tab.

Stock Market & Finance Dashboard — Live stock prices in your new tab.

Quick Calculator & Unit Converter — Fast math without switching apps.

Speed Dial & Tools Hub — A customizable new tab with quick links.

What I learned

1. Everyday users want simplicity above all else. The extensions that work best are useful the moment you install them — no setup, no API key, no onboarding.

2. AMO discoverability is real but slow. Mozilla's search ranking is based on ADU (active daily users). Getting the first 100 users is the hardest part.

3. Dark mode and tab management are the biggest pain points. These categories have the most search intent from everyday Firefox users.

4. Write for the person who doesn't know what "manifest v3" means. Everyday users care whether it's free and whether it works — not whether it's open source.

All 10 extensions are free. No subscriptions. No accounts.

Find them all: https://addons.mozilla.org/

Building a New Tab Extension: Why I Chose No Framework

Weather Clock Dash — Tue, 05 May 2026 12:39:20 +0000

When I started building Weather & Clock Dashboard — a Firefox new tab extension that shows live weather and world clocks — I had a choice: use a modern framework or go vanilla.

I went vanilla. Here's why, and what I learned.

The Case Against Frameworks in Extensions

1. Bundle size matters more in extensions

A React app might add 40KB+ of compressed JS. In a web app that's negligible. In a browser extension, that's loaded on every new tab, blocking render. Users feel it.

My entire extension is ~15KB uncompressed. It renders instantly.

2. No build tooling = no attack surface

Supply chain attacks on npm packages are real. Zero dependencies means:

No npm install
No lockfile drift
No audits needed
No node_modules to accidentally commit

The security model is simple: I wrote all the code, all the code is right here.

3. Extensions live in a privileged context

Browser extensions have access to browser APIs, storage, and (with permissions) cross-origin requests. Introducing a framework that assumes a normal web context can cause subtle issues.

Vanilla JS has direct, obvious access to browser.storage, browser.tabs, etc. No abstraction layer to debug.

What I Actually Used

weather-clock-dashboard/
├── manifest.json
├── newtab.html
├── style.css
└── app.js

That's the entire extension. No src/, no dist/, no build step.

State management

I didn't need Redux. Local state lives in module-scoped variables. Persistent state uses browser.storage.local:

// Save user preferences
async function savePrefs(prefs) {
  await browser.storage.local.set({ prefs });
}

// Load on startup
async function loadPrefs() {
  const { prefs } = await browser.storage.local.get('prefs');
  return prefs || DEFAULTS;
}

Reactivity

Instead of a virtual DOM, I update the DOM directly when data changes:

function updateWeather(data) {
  document.getElementById('temp').textContent = `${Math.round(data.temperature)}°`;
  document.getElementById('condition').textContent = getConditionText(data.weathercode);
  document.getElementById('weather-icon').textContent = getWeatherIcon(data.weathercode);
}

It's fast. No diffing overhead, no reconciliation. Just set the value.

Dark/light mode

CSS custom properties + a data attribute:

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
}

[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}

document.documentElement.setAttribute('data-theme', prefs.theme);

Two lines to switch themes. No CSS-in-JS needed.

Where This Approach Falls Short

I won't pretend vanilla is always the right call:

Complex UI state (forms with many dependent fields, wizard flows) gets messy fast
Large teams benefit from component conventions that frameworks enforce
Accessibility — frameworks often handle ARIA roles better than hand-rolled JS

For a single-page, single-purpose tool like a new tab extension? Vanilla is plenty.

The Result

The extension works, loads instantly, and has zero runtime errors related to framework incompatibilities. If something breaks, I look at ~300 lines of JS I wrote myself.

Try it on Firefox or view the source — MIT licensed.

Have you shipped a browser extension? What stack did you use? I'm curious whether most extension authors reach for frameworks or go vanilla.

From New Tab to Productivity Hub: Building a Zero-Config Firefox Extension

Weather Clock Dash — Mon, 04 May 2026 13:28:16 +0000

Most Firefox extensions require configuration — accounts, API keys, settings to tweak. Weather & Clock Dashboard is different. You install it, and it just works.

The Design Philosophy

When I started building this new tab extension, I had one rule: zero configuration required. No account signup. No API key. No settings to tweak before you see anything useful.

This forced some interesting engineering decisions.

Using Open-Meteo for Weather

The biggest challenge was weather data. Most weather APIs require an account and API key. Open-Meteo changed this — it's free and requires no authentication:

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=3`;
const response = await fetch(url);
const data = await response.json();

No API key. No headers. No auth. Just a URL.

Auto-detecting Location

For location, I use the browser's Geolocation API:

navigator.geolocation.getCurrentPosition(
  ({ coords }) => fetchWeather(coords.latitude, coords.longitude),
  () => fallbackToIP()
);

World Clocks Without a Library

For timezone support, I lean on JavaScript's built-in Intl API:

new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  hour: '2-digit',
  minute: '2-digit',
  hour12: true
}).format(new Date());

All 500+ IANA timezone identifiers work out of the box. No library needed.

The Result

Weather & Clock Dashboard works the moment you install it. No setup screen. No "Connect your account" flow. Just open a new tab and see live weather, a 3-day forecast, world clocks, and a search bar.

Install on AMO: Weather & Clock Dashboard

GitHub: Open source, MIT license

Questions about the implementation? Drop a comment!

Firefox Extension Manifest V3 Migration: What Changed and What Stayed the Same

Weather Clock Dash — Mon, 04 May 2026 10:58:03 +0000

When I built Weather & Clock Dashboard, I wanted to understand the current state of Firefox extension APIs versus Chrome's Manifest V3 changes.

Here's what I learned.

Quick Context: Why MV3 Matters

Manifest V3 is Google's overhaul of the Chrome extension platform. It's controversial because some changes limit ad-blockers and general-purpose content filtering.

Firefox's position: Mozilla implemented MV3 for compatibility, but with key differences that preserve extension power.

What Changed in MV3

1. Background Scripts → Service Workers

MV2:

"background": {
  "scripts": ["background.js"],
  "persistent": false
}

MV3:

"background": {
  "service_worker": "background.js"
}

Service workers are ephemeral — they don't persist in memory. This means you can't hold state in variables across events.

Firefox's twist: Firefox allows both persistent background pages AND service workers in MV3, giving extensions a graceful migration path.

2. webRequest → declarativeNetRequest

Chrome's MV3 restricted webRequest API (used by ad-blockers) in favor of declarativeNetRequest — a declarative rule-based approach.

Firefox's position: Firefox still supports webRequest with blocking capabilities in MV3. uBlock Origin still works.

3. Content Security Policy Changes

MV3 tightened CSP for extension pages. Inline scripts and eval() are no longer allowed in extension contexts.

For a new tab extension, this means:

<!-- This no longer works in MV3 -->
<script>
  // Inline script blocked by CSP
  document.getElementById('time').textContent = new Date().toLocaleTimeString();
</script>

<!-- Use external scripts instead -->
<script src="app.js"></script>

For Weather & Clock Dashboard, this was a net positive — it forced cleaner separation of HTML and JavaScript.

4. Host Permissions

MV3 requires explicit host permissions in the manifest for any cross-origin requests.

{
  "host_permissions": [
    "https://api.open-meteo.com/*",
    "https://geocoding-api.open-meteo.com/*"
  ]
}

What Stayed the Same in Firefox

browser.* APIs work identically
browser.storage.local for persistent data
browser.tabs for tab management
New Tab page override via chrome_url_overrides

{
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  }
}

My New Tab Extension Setup

For Weather & Clock Dashboard, the manifest is simple:

{
  "manifest_version": 3,
  "name": "Weather & Clock Dashboard",
  "version": "1.0",
  "description": "New tab with live weather, world clocks, and search",
  "permissions": ["storage", "geolocation"],
  "host_permissions": [
    "https://api.open-meteo.com/*",
    "https://geocoding-api.open-meteo.com/*"
  ],
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "icons": {
    "48": "icons/icon48.png",
    "96": "icons/icon96.png"
  }
}

No background script needed for a new tab extension — everything runs in the page context.

Key Takeaway

Firefox MV3 is developer-friendlier than Chrome's MV3. If you're building a new extension, target MV3 — but check the Firefox MV3 compatibility docs for any APIs you're using.

If you want to see a working MV3 Firefox extension in action, try Weather & Clock Dashboard — the source is MIT licensed on GitHub.

How I Used Open-Meteo's Free Weather API to Build a Privacy-Friendly Firefox Extension

Weather Clock Dash — Mon, 04 May 2026 07:55:25 +0000

When building Weather & Clock Dashboard — a Firefox new tab extension — one of my core requirements was: no user accounts, no API keys, no data sent to my servers.

This post covers how I achieved that using Open-Meteo, a completely free weather API.

Why Open-Meteo?

Most weather APIs require:

Registration + API key management
Rate limits tied to an account
Potential privacy concerns about who's tracking what

Open-Meteo requires none of that. It's:

100% free (10,000 requests/day without an API key)
No registration needed
Open-source
GDPR-compliant by design

The Approach

The extension uses the browser's built-in Geolocation API to get coordinates, then makes a simple HTTP request to Open-Meteo.

Step 1: Get user location

navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    fetchWeather(latitude, longitude);
  },
  (error) => {
    console.warn('Geolocation denied:', error);
    // Show manual location input
  }
);

The user sees a browser permission prompt. If they deny it, I fall back to a manual city name input.

Step 2: Geocode city name (optional fallback)

When the user types a city name, I use the Open-Meteo Geocoding API:

async function geocodeCity(cityName) {
  const url = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(cityName)}&count=1&language=en&format=json`;
  const response = await fetch(url);
  const data = await response.json();

  if (data.results && data.results.length > 0) {
    const { latitude, longitude } = data.results[0];
    return { latitude, longitude };
  }
  throw new Error('City not found');
}

Step 3: Fetch weather data

async function fetchWeather(lat, lon) {
  const url = new URL('https://api.open-meteo.com/v1/forecast');
  url.searchParams.set('latitude', lat);
  url.searchParams.set('longitude', lon);
  url.searchParams.set('current', 'temperature_2m,weathercode,windspeed_10m');
  url.searchParams.set('daily', 'weathercode,temperature_2m_max,temperature_2m_min');
  url.searchParams.set('timezone', 'auto');
  url.searchParams.set('forecast_days', '4');

  const response = await fetch(url.toString());
  const data = await response.json();

  return {
    current: data.current,
    daily: data.daily,
    timezone: data.timezone
  };
}

Step 4: Map weather codes to icons

Open-Meteo returns WMO weather codes. Here's a minimal mapping:

const WEATHER_ICONS = {
  0: '☀️', // Clear sky
  1: '🌤️', 2: '⛅', 3: '☁️', // Partly/mostly cloudy
  45: '🌫️', 48: '🌫️', // Fog
  51: '🌦️', 53: '🌦️', 55: '🌧️', // Drizzle
  61: '🌧️', 63: '🌧️', 65: '🌧️', // Rain
  71: '🌨️', 73: '🌨️', 75: '❄️', // Snow
  80: '🌦️', 81: '🌧️', 82: '⛈️', // Rain showers
  95: '⛈️', 96: '⛈️', 99: '⛈️', // Thunderstorm
};

function getWeatherIcon(code) {
  return WEATHER_ICONS[code] || '🌡️';
}

Result

Zero external dependencies beyond the browser itself. The entire extension is ~300 lines of vanilla HTML/CSS/JS, works offline (shows cached data), and never touches a backend server.

Extension link: Weather & Clock Dashboard on Firefox Add-ons

GitHub: github.com/weatherclockdash/weather-clock-dashboard (MIT licensed)

Have you used Open-Meteo in your projects? I'd love to hear other use cases in the comments.

5 Firefox Extensions Every Developer Should Know (and One I Built)

Weather Clock Dash — Mon, 04 May 2026 07:55:00 +0000

As a developer who spends 10+ hours a day in a browser, I've become selective about my Firefox extensions. Here are five that actually stay installed:

1. uBlock Origin — Ad/Tracker Blocking

The gold standard. Blocks ads, trackers, and malicious scripts. Zero configuration needed.

2. Firefox Multi-Account Containers

Isolate work, personal, and testing sessions in separate "containers" with different cookies. Essential for testing OAuth flows.

3. Vimium-FF — Keyboard Navigation

Navigate tabs, links, and pages entirely from keyboard. Steep learning curve, massive productivity gain.

4. Tree Style Tab — Tab Management

Vertical, tree-structured tabs for managing 50+ tabs without losing your mind.

5. Weather & Clock Dashboard — New Tab Replacement

I built this one myself. When I realized I was wasting 30 seconds every morning tracking down the weather, I decided to replace my browser's blank new tab page with something actually useful.

Weather & Clock Dashboard shows:

Live weather + 3-day forecast (no account needed)
Multiple world clocks for different timezones
Search bar
Dark/light mode toggle

The whole thing is ~300 lines of pure HTML/CSS/JS — no build system, no frameworks, no tracking. MIT open source.

Why I built it vs. using existing solutions:
Most new tab extensions are either bloated (full productivity suites, news feeds, background images that lag on load) or privacy-invasive (syncing your habits to their servers).

I wanted something minimal: see the weather, see the time, get on with work.

Technical Notes for the Curious

The extension uses the browser's native Geolocation API to determine location, then hits the Open-Meteo API (completely free, no key needed) for weather data. Everything runs client-side — there's no backend, no analytics, nothing phoning home.

If you use Firefox, give it a try: addons.mozilla.org/firefox/addon/weather-clock-dashboard

What Firefox extensions are essential in your workflow? Drop them in the comments.

Designing Dark Mode for a Firefox Extension: Beyond Just Inverting Colors

Weather Clock Dash — Mon, 04 May 2026 04:47:44 +0000

Designing Dark Mode for a Firefox Extension: Beyond Just Inverting Colors

Every new tab extension should support dark mode. But good dark mode isn't just filter: invert() or flipping colors — it requires intentional design decisions. Here's how I implemented dark mode in the Weather & Clock Dashboard extension.

The Core Principle: Surfaces, Not Just Colors

Good dark mode thinks in surfaces:

Background: 0% lightness (true black) vs 12-15% (near-black)
Surface 1 (cards, panels): slightly lighter than background
Surface 2 (hover states): slightly lighter than Surface 1
Text primary: ~87% opacity white
Text secondary: ~60% opacity white

Material Design's dark theme guide is worth reading: this elevation-based approach prevents dark mode from looking flat.

CSS Custom Properties for Theming

:root {
  /* Light mode (default) */
  --bg-primary: #f0f2f5;
  --bg-surface: rgba(255, 255, 255, 0.85);
  --bg-surface-hover: rgba(255, 255, 255, 0.95);
  --text-primary: #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --border: rgba(0, 0, 0, 0.08);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --bg-primary: #0f0f14;
  --bg-surface: rgba(255, 255, 255, 0.06);
  --bg-surface-hover: rgba(255, 255, 255, 0.1);
  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.38);
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

Applying the Theme

const STORAGE_KEY = 'theme';

async function initTheme() {
  const { theme } = await browser.storage.local.get(STORAGE_KEY);
  applyTheme(theme || getSystemTheme());
}

function getSystemTheme() {
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  // Update toggle button state
  const toggle = document.getElementById('theme-toggle');
  if (toggle) toggle.setAttribute('aria-pressed', theme === 'dark');
}

async function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  applyTheme(next);
  await browser.storage.local.set({ [STORAGE_KEY]: next });
}

// Initialize on load
initTheme();

// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  browser.storage.local.get(STORAGE_KEY).then(({ theme }) => {
    if (!theme) applyTheme(e.matches ? 'dark' : 'light');
  });
});

The Toggle Button

<button 
  id="theme-toggle" 
  class="icon-btn theme-toggle"
  aria-label="Toggle dark mode"
  aria-pressed="false"
  title="Toggle dark/light mode (D)"
>
  <svg class="icon-sun" viewBox="0 0 24 24"><!-- sun icon --></svg>
  <svg class="icon-moon" viewBox="0 0 24 24"><!-- moon icon --></svg>
</button>

.theme-toggle .icon-sun {
  display: block;
}
.theme-toggle .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

Transition Animation

A smooth transition makes the theme switch feel polished:

body {
  transition:
    background-color 0.3s ease,
    color 0.2s ease;
}

/* Don't transition on page load — only on user action */
body.no-transition {
  transition: none !important;
}

async function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';

  // Enable transition
  document.body.classList.remove('no-transition');

  applyTheme(next);
  await browser.storage.local.set({ [STORAGE_KEY]: next });
}

// Prevent flash of wrong theme
async function initTheme() {
  // Disable transitions during init
  document.body.classList.add('no-transition');

  const { theme } = await browser.storage.local.get(STORAGE_KEY);
  applyTheme(theme || getSystemTheme());

  // Re-enable transitions after a frame
  requestAnimationFrame(() => {
    document.body.classList.remove('no-transition');
  });
}

Common Dark Mode Pitfalls

1. Images with white backgrounds

/* Invert images in dark mode if they have white backgrounds */
[data-theme="dark"] img.light-bg {
  filter: invert(0.85) hue-rotate(180deg);
}

2. Transparent inputs

input, textarea {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

/* Important: explicitly set color, not just background */
input::placeholder {
  color: var(--text-muted);
}

3. Third-party embeds (weather icons)

/* Soften bright weather icons in dark mode */
[data-theme="dark"] .weather-icon {
  opacity: 0.9;
  filter: brightness(0.9);
}

Respecting the System Default

A good extension respects prefers-color-scheme when no preference has been saved:

/* Pure CSS approach — no JS needed for the initial state */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #0f0f14;
    /* ... rest of dark theme variables */
  }
}

This prevents the flash of light mode before JS loads.

The Weather & Clock Dashboard uses this exact approach — try toggling dark mode after installing.

css #webdev #firefox #browserextension #darkmode