DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

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

#firefox #webextensions #tutorial #javascript

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
}
Enter fullscreen mode Exit fullscreen mode

MV3:

"background": {
  "service_worker": "background.js"
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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/*"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)