Handling Offline Mode in Firefox Browser Extensions

When building extensions that depend on network data — like my Weather & Clock Dashboard — offline handling is critical. Users notice immediately when your extension shows stale data or broken UI.

The Problem

Browser extensions run at browser startup. If the user is on a train, airplane, or just has spotty WiFi, your fetch calls will fail. Without proper handling, users see errors or empty states.

Detecting Online Status

The browser gives you two ways to check connectivity:

// Passive check if ( ! navigator . onLine ) { showCachedData (); return ; }

// Listen for changes window . addEventListener ( ' online ' , () => { console . log ( ' Back online — refreshing data ' ); fetchFreshData (); });

window . addEventListener ( ' offline ' , () => { console .…