Forem: Weather Clock Dash

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

Browser Storage for Firefox Extensions: localStorage vs IndexedDB vs storage.local

Weather Clock Dash — Mon, 04 May 2026 04:01:09 +0000

Browser Storage for Firefox Extensions: localStorage vs IndexedDB vs storage.local

One of the first decisions when building a browser extension is where to store data. There are more options than you might expect, each with distinct tradeoffs.

The Options

localStorage — synchronous, 5-10MB limit, per-origin
sessionStorage — same as localStorage but clears on session end
IndexedDB — async, larger limits, supports complex queries
browser.storage.local — async, up to 10MB by default, extension-isolated
browser.storage.sync — synced across devices, 100KB limit, quota per item
browser.storage.session — in-memory, cleared on extension restart (MV3 only)

When to Use What

`browser.storage.local` — The Default Choice for Extensions

// Store data
await browser.storage.local.set({ 
  weatherData: { temp: 72, city: 'San Francisco' },
  lastUpdated: Date.now()
});

// Read data
const { weatherData, lastUpdated } = await browser.storage.local.get([
  'weatherData', 
  'lastUpdated'
]);

// Delete specific key
await browser.storage.local.remove('weatherData');

// Clear everything
await browser.storage.local.clear();

Use when: You need to persist data between sessions, and it's extension-specific (not shared with web pages). The API is clean and consistent across browsers.

`localStorage` — Quick and Dirty

// Synchronous — no await needed
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

Use when: Simple key-value data in your extension pages (popup, options, newtab). Not accessible from content scripts in a web page's origin.

Don't use when: You need to read data in background scripts reliably — background pages and your UI pages share localStorage, but service workers (MV3) do NOT have access to localStorage.

`browser.storage.sync` — Cross-Device Preferences

// User preferences that should follow them across devices
await browser.storage.sync.set({
  searchEngine: 'duckduckgo',
  temperatureUnit: 'celsius',
  timeFormat: '24h'
});

const prefs = await browser.storage.sync.get([
  'searchEngine',
  'temperatureUnit',
  'timeFormat'
]);

Limits:

Max 100KB total
Max 8KB per item
Max 512 items
1800 write operations per hour

Use when: Small user preferences that should persist across Firefox installations. Does NOT work if sync is disabled.

IndexedDB — Large or Complex Data

const db = await new Promise((resolve, reject) => {
  const req = indexedDB.open('weather-extension', 1);
  req.onupgradeneeded = (e) => {
    const db = e.target.result;
    db.createObjectStore('forecasts', { keyPath: 'date' });
  };
  req.onsuccess = (e) => resolve(e.target.result);
  req.onerror = (e) => reject(e.target.error);
});

// Store forecast data
const tx = db.transaction('forecasts', 'readwrite');
tx.objectStore('forecasts').put({ date: '2024-01-15', data: forecastData });

Use when: You need to store large amounts of data (historical weather, search history), or need to query/filter data.

The Pattern for Weather & Clock Dashboard

For the Weather & Clock Dashboard extension, I use:

// Persistent user preferences → browser.storage.local
const PREFS_DEFAULTS = {
  city: '',
  temperatureUnit: 'fahrenheit',
  timeFormat: '12h',
  theme: 'system',
  worldClocks: [
    { label: 'London', timezone: 'Europe/London' },
    { label: 'Tokyo', timezone: 'Asia/Tokyo' }
  ]
};

async function getPrefs() {
  const stored = await browser.storage.local.get(Object.keys(PREFS_DEFAULTS));
  return { ...PREFS_DEFAULTS, ...stored };
}

async function setPrefs(updates) {
  await browser.storage.local.set(updates);
}

// Weather cache → localStorage (same origin as newtab.html)
function getCachedWeather() {
  const raw = localStorage.getItem('weatherCache');
  if (!raw) return null;
  const { data, timestamp } = JSON.parse(raw);
  const age = Date.now() - timestamp;
  return age < 3600000 ? { data, age } : null; // 1 hour TTL
}

function setCachedWeather(data) {
  localStorage.setItem('weatherCache', JSON.stringify({
    data,
    timestamp: Date.now()
  }));
}

Listening for Storage Changes

// React to storage changes from any part of the extension
browser.storage.onChanged.addListener((changes, area) => {
  if (area === 'local') {
    if (changes.theme) {
      applyTheme(changes.theme.newValue);
    }
    if (changes.city) {
      refreshWeather(changes.city.newValue);
    }
  }
});

This is how the options page and newtab page can stay in sync without direct messaging.

Checking Quota Usage

async function checkStorageQuota() {
  const usage = await browser.storage.local.getBytesInUse(null);
  console.log(`Storage used: ${(usage / 1024).toFixed(1)} KB`);

  // browser.storage.local.QUOTA_BYTES = 10485760 (10MB)
  const pct = (usage / browser.storage.local.QUOTA_BYTES) * 100;
  if (pct > 80) {
    console.warn('Storage > 80% full');
  }
}

Part of a series on building Firefox browser extensions.

Install the extension: Weather & Clock Dashboard on AMO

firefox #javascript #webdev #browserextension

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

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

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

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

Building a Search Bar for Your Firefox New Tab Extension

Weather Clock Dash — Mon, 04 May 2026 03:53:32 +0000

Building a Search Bar for Your Firefox New Tab Extension

A search bar is the highest-ROI feature for any new tab extension. Users type queries dozens of times per day — if your extension can save them from navigating to google.com first, that's real value.

Here's how I built the search bar in the Weather & Clock Dashboard extension.

The Basic HTML

<form id="search-form" class="search-form" role="search">
  <div class="search-wrapper">
    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <circle cx="11" cy="11" r="8"/>
      <path d="m21 21-4.35-4.35"/>
    </svg>
    <input 
      type="search" 
      id="search-input"
      class="search-input"
      placeholder="Search the web..."
      autocomplete="off"
      spellcheck="false"
      autofocus
    />
  </div>
</form>

Handling Form Submission

The key: submit to the right search engine based on user preference.

const searchEngines = {
  google: 'https://www.google.com/search?q=',
  bing: 'https://www.bing.com/search?q=',
  duckduckgo: 'https://duckduckgo.com/?q=',
  brave: 'https://search.brave.com/search?q=',
  ecosia: 'https://www.ecosia.org/search?q=',
};

document.getElementById('search-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const query = document.getElementById('search-input').value.trim();
  if (!query) return;

  // Check if it's a URL
  if (isUrl(query)) {
    const url = query.startsWith('http') ? query : `https://${query}`;
    window.location.href = url;
    return;
  }

  // Get preferred search engine
  const { searchEngine = 'google' } = await browser.storage.local.get('searchEngine');
  const baseUrl = searchEngines[searchEngine] || searchEngines.google;

  window.location.href = baseUrl + encodeURIComponent(query);
});

function isUrl(text) {
  // Basic URL detection: has a dot and no spaces, or starts with http
  return /^https?:\/\//.test(text) || 
         (/\.[a-z]{2,}/.test(text) && !text.includes(' '));
}

Keyboard Shortcut to Focus Search

document.addEventListener('keydown', (e) => {
  // Focus search on '/' key (like many web apps)
  if (e.key === '/' && document.activeElement !== document.getElementById('search-input')) {
    e.preventDefault();
    document.getElementById('search-input').focus();
    document.getElementById('search-input').select();
  }

  // Clear on Escape
  if (e.key === 'Escape') {
    const input = document.getElementById('search-input');
    if (document.activeElement === input) {
      input.blur();
      input.value = '';
    }
  }
});

Search Suggestions with OpenSearch

For basic suggestions (Google supports this via their suggest API):

async function getSuggestions(query) {
  if (query.length < 2) return [];

  try {
    // Google suggest API
    const url = `https://suggestqueries.google.com/complete/search?client=firefox&q=${encodeURIComponent(query)}`;
    const response = await fetch(url);
    const data = await response.json();
    return data[1] || []; // [query, [suggestions]]
  } catch {
    return [];
  }
}

let suggestTimeout;
document.getElementById('search-input').addEventListener('input', (e) => {
  clearTimeout(suggestTimeout);
  const query = e.target.value.trim();

  if (!query) {
    hideSuggestions();
    return;
  }

  suggestTimeout = setTimeout(async () => {
    const suggestions = await getSuggestions(query);
    showSuggestions(suggestions, query);
  }, 200);
});

function showSuggestions(suggestions, query) {
  const list = document.getElementById('suggestions-list');
  if (!suggestions.length) { hideSuggestions(); return; }

  list.innerHTML = suggestions.slice(0, 6).map(s => `
    <li class="suggestion" data-query="${escapeHtml(s)}">
      <svg class="search-icon-sm">...</svg>
      ${highlightMatch(s, query)}
    </li>
  `).join('');

  list.classList.remove('hidden');
}

function hideSuggestions() {
  document.getElementById('suggestions-list').classList.add('hidden');
}

Search Engine Switcher

Allow users to pick their search engine:

const engineOptions = [
  { id: 'google', name: 'Google', favicon: 'https://google.com/favicon.ico' },
  { id: 'duckduckgo', name: 'DuckDuckGo', favicon: 'https://duckduckgo.com/favicon.ico' },
  { id: 'bing', name: 'Bing', favicon: 'https://bing.com/favicon.ico' },
  { id: 'brave', name: 'Brave', favicon: 'https://brave.com/favicon.ico' },
];

async function buildEngineSelector() {
  const { searchEngine = 'google' } = await browser.storage.local.get('searchEngine');

  const selector = document.getElementById('engine-selector');
  selector.innerHTML = engineOptions.map(e => `
    <button class="engine-btn ${e.id === searchEngine ? 'active' : ''}" data-engine="${e.id}">
      <img src="${e.favicon}" alt="${e.name}" width="16" height="16">
    </button>
  `).join('');

  selector.addEventListener('click', async (event) => {
    const btn = event.target.closest('.engine-btn');
    if (!btn) return;

    const newEngine = btn.dataset.engine;
    await browser.storage.local.set({ searchEngine: newEngine });

    // Update active state
    selector.querySelectorAll('.engine-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    // Focus search input
    document.getElementById('search-input').focus();
  });
}

CSS

.search-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  font-size: 16px;
  border: none;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  backdrop-filter: blur(10px);
  transition: background 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* Remove browser's default search cancel button */
.search-input::-webkit-search-cancel-button {
  display: none;
}

The search bar in Weather & Clock Dashboard supports Google, Bing, DuckDuckGo, and Brave Search with a quick toggle.

firefox #javascript #ux #browserextension #webdev

Testing Firefox Extensions with Playwright: End-to-End Testing Guide

Weather Clock Dash — Mon, 04 May 2026 03:51:31 +0000

Testing Firefox Extensions with Playwright: End-to-End Testing Guide

Extension testing is one of those things everyone knows they should do but few actually do. I've been using Playwright for end-to-end tests on the Weather & Clock Dashboard extension and it's changed how I think about extension quality.

Why E2E Testing for Extensions?

Unit tests don't cover the biggest failure modes:

Does the extension actually load in Firefox?
Does the new tab override work?
Does dark mode actually change the theme?
Does the weather display when location is set?

E2E tests catch all of these.

Setup: Playwright with Firefox Extensions

npm install --save-dev @playwright/test
npx playwright install firefox

playwright.config.ts:

import { defineConfig, devices } from '@playwright/test';
import path from 'path';

const EXTENSION_PATH = path.resolve(__dirname, '.');

export default defineConfig({
  testDir: './tests',
  use: {
    browserName: 'firefox',
  },
  projects: [
    {
      name: 'firefox-extension',
      use: {
        ...devices['Desktop Firefox'],
        launchOptions: {
          args: [
            `-load-extension=${EXTENSION_PATH}`,
            '-extension-arg',
          ]
        }
      }
    }
  ]
});

Note: Firefox extension loading in Playwright uses a different API than Chrome. Here's the Firefox-specific approach:

import { chromium, firefox } from 'playwright';

async function launchFirefoxWithExtension(extensionPath: string) {
  const browser = await firefox.launch({
    headless: false, // Firefox requires headful for extensions in dev mode
    firefoxUserPrefs: {
      'extensions.autoDisableScopes': 0,
      'extensions.enabledScopes': 15,
    }
  });

  const context = await browser.newContext();

  // Load extension
  await context.addInitScript(() => {
    // Extension-specific initialization
  });

  return { browser, context };
}

Simpler Approach: Test the HTML Directly

For new tab extensions, the most reliable approach is to load the HTML file directly in tests:

import { test, expect } from '@playwright/test';
import path from 'path';

const NEWTAB_URL = `file://${path.resolve(__dirname, '../newtab.html')}`;

test('renders weather widget', async ({ page }) => {
  // Mock the weather API
  await page.route('**/api.openweathermap.org/**', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        name: 'San Francisco',
        sys: { country: 'US' },
        weather: [{ main: 'Clear', description: 'clear sky', icon: '01d' }],
        main: { temp: 72, feels_like: 70, humidity: 45 },
      })
    });
  });

  // Set city in localStorage
  await page.addInitScript(() => {
    localStorage.setItem('city', 'San Francisco');
  });

  await page.goto(NEWTAB_URL);
  await page.waitForTimeout(1500);

  // Assertions
  await expect(page.locator('#weather-temp')).toContainText('72');
  await expect(page.locator('#weather-city')).toContainText('San Francisco');
  await expect(page.locator('#weather-description')).toContainText('clear sky');
});

Testing Dark Mode

test('dark mode toggle persists', async ({ page }) => {
  await page.goto(NEWTAB_URL);

  // Initially light mode
  await expect(page.locator('body')).not.toHaveClass(/dark/);

  // Toggle dark mode
  await page.click('#theme-toggle');
  await page.waitForTimeout(300);

  // Should be dark
  await expect(page.locator('body')).toHaveClass(/dark/);

  // Reload — should persist
  await page.reload();
  await page.waitForTimeout(500);
  await expect(page.locator('body')).toHaveClass(/dark/);
});

Testing the World Clock

test('world clock shows correct city', async ({ page }) => {
  await page.addInitScript(() => {
    localStorage.setItem('worldClocks', JSON.stringify([
      { label: 'Tokyo', timezone: 'Asia/Tokyo' },
      { label: 'London', timezone: 'Europe/London' }
    ]));
  });

  await page.goto(NEWTAB_URL);
  await page.waitForTimeout(1000);

  const clocks = await page.locator('.world-clock').all();
  expect(clocks).toHaveLength(2);

  await expect(clocks[0]).toContainText('Tokyo');
  await expect(clocks[1]).toContainText('London');

  // Both should show a valid time (HH:MM format)
  const tokyoTime = await clocks[0].locator('.clock-time').textContent();
  expect(tokyoTime).toMatch(/\d{1,2}:\d{2}/);
});

Testing Offline Behavior

test('shows cached data when offline', async ({ page }) => {
  // First, cache some data
  await page.addInitScript(() => {
    const cachedWeather = {
      data: { name: 'Cached City', main: { temp: 65 } },
      timestamp: Date.now() - 1000 // 1 second ago
    };
    localStorage.setItem('cache_weather', JSON.stringify(cachedWeather));
  });

  // Simulate offline by blocking API requests
  await page.route('**/api.openweathermap.org/**', route => {
    route.abort('failed');
  });

  await page.goto(NEWTAB_URL);
  await page.waitForTimeout(2000);

  // Should show cached data
  await expect(page.locator('#weather-city')).toContainText('Cached City');
  await expect(page.locator('#weather-temp')).toContainText('65');

  // Should show offline indicator
  const status = await page.locator('#weather-status').textContent();
  expect(status?.toLowerCase()).toContain('offline');
});

Running Tests

// package.json
{
  "scripts": {
    "test": "playwright test",
    "test:ui": "playwright test --ui",
    "test:headed": "playwright test --headed"
  }
}

npm test                    # Run all tests headlessly
npm run test:headed         # Run with visible browser
npm run test:ui             # Interactive UI mode
npx playwright test --debug # Step through tests

CI Integration

# .github/workflows/test.yml
- name: Run E2E tests
  run: |
    npx playwright install firefox
    npm test

For the Weather & Clock Dashboard, these tests run on every PR before merging.

Install the extension: Weather & Clock Dashboard on AMO

Part of a series on building Firefox browser extensions.

firefox #testing #playwright #webdev #browserextension

Keyboard Shortcuts in Firefox Extensions: A Complete Guide

Weather Clock Dash — Mon, 04 May 2026 03:46:55 +0000

Keyboard Shortcuts in Firefox Extensions: A Complete Guide

Keyboard shortcuts make extensions feel native. A new tab extension that users can control without clicking feels much more polished. Here's how to add them to your Firefox extension.

Declaring Commands in manifest.json

{
  "manifest_version": 2,
  "commands": {
    "toggle-dark-mode": {
      "suggested_key": {
        "default": "Ctrl+Shift+D",
        "mac": "Command+Shift+D"
      },
      "description": "Toggle dark/light mode"
    },
    "refresh-weather": {
      "suggested_key": {
        "default": "Ctrl+Shift+R"
      },
      "description": "Refresh weather data"
    },
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+W",
        "mac": "Command+Shift+W"
      }
    }
  }
}

The special _execute_browser_action command opens your extension's popup.

Handling Commands in Background Script

// background.js
browser.commands.onCommand.addListener((command) => {
  switch (command) {
    case 'toggle-dark-mode':
      toggleDarkMode();
      break;
    case 'refresh-weather':
      refreshWeatherData();
      break;
  }
});

async function toggleDarkMode() {
  const { theme } = await browser.storage.local.get('theme');
  const newTheme = theme === 'dark' ? 'light' : 'dark';
  await browser.storage.local.set({ theme: newTheme });

  // Notify all open new tab pages
  const tabs = await browser.tabs.query({ url: 'about:newtab' });
  tabs.forEach(tab => {
    browser.tabs.sendMessage(tab.id, { type: 'theme-changed', theme: newTheme })
      .catch(() => {}); // Tab might not have content script
  });
}

Keyboard Shortcuts Within the New Tab Page

For shortcuts that only work within your new tab page, use regular DOM event listeners:

// newtab.js
document.addEventListener('keydown', (e) => {
  // Ignore when user is typing in a text field
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

  switch (e.key) {
    case 'd':
    case 'D':
      if (!e.ctrlKey && !e.metaKey) toggleDarkMode();
      break;

    case 'r':
    case 'R':
      if (!e.ctrlKey && !e.metaKey) refreshWeather();
      break;

    case '/':
      // Focus the search bar
      e.preventDefault();
      document.getElementById('search-input')?.focus();
      break;

    case 'Escape':
      // Blur search, close any open dropdowns
      document.activeElement?.blur();
      closeAllDropdowns();
      break;
  }
});

Showing Available Shortcuts to Users

A quick help modal makes shortcuts discoverable:

// Show keyboard shortcuts modal with ?  key
document.addEventListener('keydown', (e) => {
  if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
    toggleShortcutsModal();
  }
});

function toggleShortcutsModal() {
  const modal = document.getElementById('shortcuts-modal');
  if (!modal) {
    createShortcutsModal();
  } else {
    modal.classList.toggle('hidden');
  }
}

function createShortcutsModal() {
  const shortcuts = [
    { key: '/', description: 'Focus search' },
    { key: 'D', description: 'Toggle dark mode' },
    { key: 'R', description: 'Refresh weather' },
    { key: 'Esc', description: 'Clear focus' },
    { key: '?', description: 'Show this help' },
  ];

  const modal = document.createElement('div');
  modal.id = 'shortcuts-modal';
  modal.innerHTML = `
    <div class="shortcuts-overlay" onclick="this.parentElement.classList.add('hidden')"></div>
    <div class="shortcuts-content">
      <h3>Keyboard Shortcuts</h3>
      <table>
        ${shortcuts.map(s => `
          <tr>
            <td><kbd>${s.key}</kbd></td>
            <td>${s.description}</td>
          </tr>
        `).join('')}
      </table>
      <p class="shortcuts-note">Ctrl+Shift+D — Toggle dark mode (works from any tab)</p>
    </div>
  `;

  document.body.appendChild(modal);
}

CSS for the kbd element

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  font-family: monospace;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.dark-mode kbd {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
}

Managing Commands in code (MV3)

In Manifest V3, you can update command shortcuts programmatically:

// Get all registered commands
const commands = await browser.commands.getAll();
commands.forEach(cmd => {
  console.log(cmd.name, cmd.shortcut, cmd.description);
});

// Reset to default
await browser.commands.reset('toggle-dark-mode');

Conflict Avoidance Tips

Avoid single letters as Ctrl+Letter shortcuts — many are already taken (Ctrl+R = refresh, Ctrl+T = new tab, etc.)
Use three-key combos like Ctrl+Shift+D for global shortcuts
Single letter shortcuts within the page (like / for search) are fine when you skip text inputs
Check for conflicts at about:addons → Manage Extension Shortcuts

The Keyboard Shortcut Settings Page

Users can view and change extension shortcuts at:

about:addons → gear icon → Manage Extension Shortcuts

Link directly to it from your extension's options page:

// Opens about:addons in a new tab, then user navigates to shortcuts
browser.tabs.create({ url: 'about:addons' });

The Weather & Clock Dashboard uses the / shortcut to focus the search bar — one of the most-used features.

firefox #javascript #ux #browserextension #webdev

How I Used GitHub Actions to Auto-Publish to AMO on Every Release

Weather Clock Dash — Mon, 04 May 2026 03:45:57 +0000

How I Used GitHub Actions to Auto-Publish to AMO on Every Release

Manually uploading extension files to AMO (Mozilla's Add-On Observatory) is tedious. After the fifth time forgetting to increment the version number, I automated it with GitHub Actions.

Here's exactly how I set up the pipeline for the Weather & Clock Dashboard extension.

What the Pipeline Does

Trigger on new GitHub release
Validate the manifest version matches the release tag
Bundle the extension into a .zip
Submit to AMO via the web-ext CLI
Wait for AMO review completion (or fail gracefully)

Setting Up AMO API Credentials

First, create API credentials at addons.mozilla.org:

Go to AMO → User menu → Developer Hub → API Credentials
Create a new credential
Note your JWT issuer and JWT secret

Store these in GitHub Secrets:

AMO_JWT_ISSUER = user:12345678:123
AMO_JWT_SECRET = your-secret-here

The Workflow

# .github/workflows/publish.yml
name: Publish to AMO

on:
  release:
    types: [published]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install web-ext
        run: npm install -g web-ext

      - name: Verify version matches release tag
        run: |
          MANIFEST_VERSION=$(node -p "require('./manifest.json').version")
          RELEASE_TAG="${GITHUB_REF#refs/tags/v}"
          echo "Manifest version: $MANIFEST_VERSION"
          echo "Release tag: $RELEASE_TAG"
          if [ "$MANIFEST_VERSION" != "$RELEASE_TAG" ]; then
            echo "Version mismatch! manifest.json has $MANIFEST_VERSION but release is $RELEASE_TAG"
            exit 1
          fi
          echo "Version match confirmed: $MANIFEST_VERSION"

      - name: Build extension package
        run: |
          web-ext build \
            --source-dir . \
            --artifacts-dir ./web-ext-artifacts \
            --overwrite-dest
          ls -la ./web-ext-artifacts/

      - name: Sign and publish to AMO
        run: |
          web-ext sign \
            --source-dir . \
            --api-key "$AMO_JWT_ISSUER" \
            --api-secret "$AMO_JWT_SECRET" \
            --channel listed
        env:
          AMO_JWT_ISSUER: ${{ secrets.AMO_JWT_ISSUER }}
          AMO_JWT_SECRET: ${{ secrets.AMO_JWT_SECRET }}

      - name: Upload artifact to GitHub Release
        uses: softprops/action-gh-release@v1
        with:
          files: ./web-ext-artifacts/*.zip

The `web-ext sign` Command Explained

web-ext sign \
  --source-dir .              # Where your extension files are
  --api-key $AMO_JWT_ISSUER   # From AMO API credentials  
  --api-secret $AMO_JWT_SECRET # From AMO API credentials
  --channel listed            # 'listed' for public, 'unlisted' for private
  --timeout 900000            # 15 min timeout for review queue

Important: --channel listed means your extension goes through AMO's review process. The command will wait (up to the timeout) for AMO to review and approve the submission.

For unlisted, the signing happens immediately.

Handling AMO Review Delays

AMO review can take anywhere from hours to days. For listed extensions, the web-ext sign command might time out. Handle this gracefully:

- name: Submit to AMO
  continue-on-error: true  # Don't fail the workflow if review is pending
  run: |
    web-ext sign \
      --api-key "$AMO_JWT_ISSUER" \
      --api-secret "$AMO_JWT_SECRET" \
      --channel listed \
      --timeout 300000  # 5 minutes, then continue

Local Testing with web-ext

Before triggering CI, test the web-ext commands locally:

# Install globally
npm install -g web-ext

# Build and check for errors
web-ext build

# Lint your extension
web-ext lint

# Run in Firefox for local testing
web-ext run --firefox=/Applications/Firefox.app/Contents/MacOS/firefox

Creating a Release to Trigger the Workflow

# 1. Update version in manifest.json
jq '.version = "1.2.0"' manifest.json > tmp.json && mv tmp.json manifest.json

# 2. Commit and push
git add manifest.json && git commit -m "chore: bump version to 1.2.0"
git push

# 3. Tag and create release
git tag v1.2.0
git push origin v1.2.0

# Then create the release in GitHub UI or via CLI:
gh release create v1.2.0 --title "v1.2.0" --notes "What changed"

This triggers the workflow and publishes to AMO automatically.

What Gets Submitted

The web-ext CLI automatically excludes files listed in .gitignore and certain development files. I also add a .web-ext-config.json:

{
  "build": {
    "overwriteDest": true,
    "filename": "weather-clock-dashboard-{version}.zip"
  },
  "ignoreFiles": [
    ".github",
    "*.md",
    "tests/**",
    "scripts/**",
    "node_modules"
  ]
}

The Result

Now every GitHub release automatically:

Validates version consistency
Publishes to AMO
Attaches the built .zip to the release

Check out the extension: Weather & Clock Dashboard on AMO

Part of a series on building and publishing Firefox browser extensions.

firefox #github #cicd #webdev #browserextension

Forem: Weather Clock Dash

Building a New Tab Extension: Why I Chose No Framework

The Case Against Frameworks in Extensions

1. Bundle size matters more in extensions

2. No build tooling = no attack surface

3. Extensions live in a privileged context

What I Actually Used

State management

Reactivity

Dark/light mode

Where This Approach Falls Short

The Result

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

The Design Philosophy

Using Open-Meteo for Weather

Auto-detecting Location

World Clocks Without a Library

The Result

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

Quick Context: Why MV3 Matters

What Changed in MV3

1. Background Scripts → Service Workers

2. webRequest → declarativeNetRequest

3. Content Security Policy Changes

4. Host Permissions

What Stayed the Same in Firefox

My New Tab Extension Setup

Key Takeaway

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

Why Open-Meteo?

The Approach

Step 1: Get user location

Step 2: Geocode city name (optional fallback)

Step 3: Fetch weather data

Step 4: Map weather codes to icons

Result

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

1. uBlock Origin — Ad/Tracker Blocking

2. Firefox Multi-Account Containers

3. Vimium-FF — Keyboard Navigation

4. Tree Style Tab — Tab Management

5. Weather & Clock Dashboard — New Tab Replacement

Technical Notes for the Curious

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

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

The Core Principle: Surfaces, Not Just Colors

CSS Custom Properties for Theming

Applying the Theme

The Toggle Button

Transition Animation

Common Dark Mode Pitfalls

1. Images with white backgrounds

2. Transparent inputs

3. Third-party embeds (weather icons)

Respecting the System Default

css #webdev #firefox #browserextension #darkmode

Browser Storage for Firefox Extensions: localStorage vs IndexedDB vs storage.local

Browser Storage for Firefox Extensions: localStorage vs IndexedDB vs storage.local

The Options

When to Use What

browser.storage.local — The Default Choice for Extensions

localStorage — Quick and Dirty

browser.storage.sync — Cross-Device Preferences

IndexedDB — Large or Complex Data

The Pattern for Weather & Clock Dashboard

Listening for Storage Changes

Checking Quota Usage

firefox #javascript #webdev #browserextension

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

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

The Core Principle: Surfaces, Not Just Colors

CSS Custom Properties for Theming

Applying the Theme

The Toggle Button

Transition Animation

Common Dark Mode Pitfalls

1. Images with white backgrounds

2. Transparent inputs

3. Third-party embeds (weather icons)

Respecting the System Default

`browser.storage.local` — The Default Choice for Extensions

`localStorage` — Quick and Dirty

`browser.storage.sync` — Cross-Device Preferences

The `web-ext sign` Command Explained