What I Learned Building Two Firefox Extensions from Scratch

In this account, I share the experiences gained from developing two Firefox extensions, Tab Manager & Session Saver and NightOwl, beyond what the official documentation covers.

Firstly, when deciding between browser.storage.local and browser.storage.sync, it's crucial to consider the limitations. Sync offers the advantage of data syncing across devices but has a limited 100KB total quota. For Tab Manager, where each session contains a JSON object with tab URLs, titles, and timestamps, and a user with 20 sessions of 30 tabs could quickly exhaust the sync quota, local storage was chosen instead.

Similarly, for NightOwl, while per-domain settings are small key-value pairs, cross-device syncing could become cumbersome if a user visits many sites. Local storage ensures user data remains on their machine. Always default to local storage unless cross-device synchronization is an essential feature, explicitly disclosing the quota constraints.

Next, transitioning from the older Manifest Version 2 (MV2) to the newer Manifest Version 3 (MV3) requires careful navigation. Background scripts in MV3 are now background.service_worker, and the state in memory can be lost at any time. Information stored should be moved to browser.storage.local. Permissions in MV3 are more cleanly separated into host permissions and API permissions.

It's essential to read permission documentation carefully, avoiding unnecessary permissions like all_urls, which builds user trust. Content scripts remain consistent between MV2 and MV3, as NightOwl's CSS injection, requiring only minor adjustments during the migration.

The AMO (Add-on Marketplace) review process is often faster than anticipated, typically clearing within three days. During the review, the code is examined for issues such as using eval(), obfuscating code, or requesting unnecessary permissions. To expedite approval, submit clean, readable code without minification, provide a clear description of each permission's usage, avoid external network requests, and ensure the source code matches the described functionality.

Content script injection timing is critical. For NightOwl's CSS injection, injecting at document_start prevents the flicker of white content before dark mode activation. Using document_idle, the default setting, results in a white flash on each page load, which is unacceptable for a dark mode extension. For Tab Manager, iterating over tabs with browser.tabs.query({}) is necessary, but keep in mind that tabs are returned in the order they appear in their windows, and there's no guarantee of cross-window ordering.

Store the window context separately if saving tabs across multiple windows. The url property in tab objects necessitates the tabs permission; otherwise, undefined is returned even if other tab properties function correctly. Pinned tabs (tab.pinned) should be handled differently as users often want them to behave uniquely from regular tabs.

Lastly, the decision between a popup and a sidebar for the extension's UI presents tradeoffs. Most simple extensions use a popup, which is opened by clicking an icon. For Tab Manager, a sidebar was chosen, a persistent panel on the left side of the browser that remains open across tab switches. This is ideal for tools where users frequently switch between the panel and page content.

However, sidebars have limited UX options, and some users may find them confusing. A popup is more suitable if the extension performs a one-time action, such as toggling dark mode or saving the current session. While both extensions are simple and focused, the crucial lesson is to scope aggressively, launch a minimal version, and observe user needs before expanding the functionality.

Successful extensions typically focus on one thing exceptionally well, rather than attempting to be comprehensive productivity suites.