nstraints. Coordinates are resolved client-side via the Geolocation API, then passed directly to the forecast endpoint.

// That's literally it.
const response = await fetch(
  `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true&daily=weathercode,temperature_2m_max,temperature_2m_min&forecast_days=4&timezone=auto`
);

2. State Management & Persistence

browser.storage.local provides scoped, async, and restart-safe persistence. It replaces localStorage/cookies, eliminating cross-origin boundary issues and ensuring settings survive session resets.

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

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

3. Theming Engine

Dark mode is implemented via CSS custom properties scoped to a root attribute. State changes are written to storage and reflected instantly without DOM class toggling overhead.

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

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

4. Debugging & Deployment Workflow

New tab pages cannot be inspected via standard F12. The correct workflow requires navigating to about:debugging, selecting "This Firefox", locating the extension, and clicking "Inspect" to spawn a dedicated DevTools instance. For AMO submission, avoid webpack/bundling for small projects. Reviewers prioritize readable, unminified source to verify permission scope and rule out remote code execution.

Pitfall Guide

1. Relying on Key-Based Weather APIs: Proprietary services require authentication, enforce rate limits, and implicitly share location data with third parties. Open-Meteo's zero-auth model eliminates tracking vectors and reduces latency.
2. Incorrect DevTools Access for New Tab Pages: Standard browser DevTools do not attach to extension new tab contexts. Developers must use about:debugging -> "This Firefox" -> Inspect to access the correct execution environment.
3. Misusing localStorage or Cookies for Extension State: localStorage lacks async support, suffers from cross-origin scoping, and does not guarantee persistence across browser restarts. browser.storage.local is the native, scoped alternative.
4. Over-Bundling for AMO Submission: Webpack, minification, and obfuscation obscure source code, forcing reviewers to request unminified artifacts and delaying approval. Keep small projects unbundled for transparent review.
5. Overcomplicating Dark Mode Implementation: JS-heavy class toggling or inline style manipulation increases render blocking. Use :root[data-theme] with CSS variables and sync state via storage for deterministic theming.
6. Ignoring Permission Scope in Manifest: Requesting broad or unnecessary permissions triggers AMO security flags. Declare only the exact origins, storage scopes, and geolocation permissions required by the extension.

Deliverables

• Architecture Blueprint: Client-side geolocation → Open-Meteo fetch → browser.storage.local state sync → CSS variable theming → isolated DOM render. Zero external telemetry, fully offline-capable after initial load.
• AMO Submission Checklist:
  • Verify manifest permissions match actual API usage
  • Remove all eval() and remote code execution patterns
  • Submit unbundled, unminified source for transparent review
  • Confirm no third-party tracking or analytics scripts
  • Test about:debugging inspection workflow pre-submission
• Configuration Templates:
  • manifest.json minimal schema (host permissions, storage, geolocation)
  • CSS variable theming scaffold (:root[data-theme] structure)
  • browser.storage.local read/write wrapper pattern for settings persistence