Firefox Extension Icons: Sizes, Formats, and SVG vs PNG The icon is the first thing users see in AMO search results and the add-ons bar. Getting it right matters. For a complete Firefox extension, provide icons at these sizes: { "icons": { "16": "icons/icon-16.png", "32": "icons/icon-32.png", "48": "icons/icon-48.png", "96": "icons/icon-96.png", "128": "icons/icon-128.png"
AMO Review Process: What Happens After You Submit a Firefox Extension Submitting a Firefox extension to addons.mozilla.org (AMO) is the end of development but the beginning of a review process. Here's what to expect. Listed as "Recommended" only after manual review Listed immediately but with a warning banner until reviewed Review takes days to weeks depending on queue No AMO listing — distribut
Internationalizing a Firefox Extension: i18n Without a Library Firefox extensions have a built-in i18n system that covers most use cases without any external library. Here's how to use it. _locales Directory Structure extension/ ├── manifest.json ├── _locales/ │ ├── en/ │ │ └── messages.json │ ├── fr/ │ │ └── messages.json │ ├── de/ │ │ └── messages.json │ └── ja/ │
Keyboard Shortcuts in Firefox Extensions: A Complete Guide Good keyboard support separates a great extension from a mediocre one. Here's everything you need to know. For global keyboard shortcuts (accessible even when the extension isn't focused): { "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+Shift+W" }, "description": "Open Weather & Cl
Search Bar in a Firefox New Tab Extension: Which Engine, How to Handle Adding a search bar to a new tab extension sounds simple — it's just a text input and a redirect. But there are enough details to get right that it's worth writing down. <form id="search-form" role="search"> <input type="search" id="search-input" placeholder="Search..." autocomplete="off" autofocus />
Dark Mode in Firefox Extensions: Respecting System Preferences Firefox users who prefer dark mode shouldn't have to manually toggle it in every extension. Here's how to automatically respect the system preference. /* Default: light mode */ :root { --bg: #ffffff; --text: #1a1a1a; --card-bg: #f5f5f5; --border: #e0e0e0; } /* Auto dark mode from system */ @media (prefers-color-scheme: dark)
How to Test Firefox Extensions Without Publishing: Local Development Tips Publishing to AMO every time you want to test a change is slow and painful. Here's the full toolkit for local development. The fastest way to load your extension: Open Firefox and go to about:debugging Click This Firefox in the left sidebar Click Load Temporary Add-on... Navigate to your extension folder and select manif
Using browser.storage.sync vs storage.local in Firefox Extensions: When to Use Each Firefox extensions have two main storage options: browser.storage.sync and browser.storage.local. Picking the wrong one leads to frustrating UX. Here's how to think about it. storage.sync storage.local Synced across devices Yes (via Firefox Sync) No Quota 100KB (8KB per item) 10MB Requires Firefox Syn