Firefox Add-On Support for Widgetify Extension

[aKamrani]

Add Firefox Support to Widgetify Extension

This PR adds full Firefox compatibility to the Widgetify extension, allowing users to install and use it in Firefox browsers.

Why This Is Needed

• Firefox users currently cannot use Widgetify
• The extension uses WebExtensions APIs which Firefox supports, but had some Chrome-specific code
• Adding Firefox support expands the user base significantly

Testing

• ✅ Extension builds successfully for Firefox
• ✅ Extension installs and runs in Firefox (tested via web-ext)
• ✅ All linting passes with 0 errors
• ✅ Tab groups feature gracefully degrades in Firefox (opens tabs without grouping)
• ✅ All existing Chrome functionality remains intact

Files Changed

1. src/layouts/bookmark/utils/tabManager.ts - Added Firefox compatibility check for tab groups
2. package.json - Added webextension-polyfill dependency

Changes Summary

This explains how I converted the Widgetify Chrome extension to work with Firefox, what we fixed, and how to build and install it.

1. Added Firefox compatibility check for Chrome-only tab groups API in src/layouts/bookmark/utils/tabManager.ts
2. Added missing dependency webextension-polyfill required for cross-browser compatibility
3. Added development tools web-ext for Firefox extension development and testing

Why This Was Needed

The extension was built for Chrome but uses WebExtensions APIs, which Firefox also supports. However, there were a few Chrome-specific features that needed adjustment. The main issue was that Chrome uses chrome.* APIs while Firefox uses browser.* APIs - they're similar but not identical.

Why webextension-polyfill?

The extension uses @wxt-dev/webextension-polyfill, which is a wrapper that needs the actual webextension-polyfill package to work. This polyfill is crucial because:

1. API Compatibility: It provides a unified browser.* API that works across both Chrome and Firefox
2. Promise Support: Firefox's browser.* APIs return Promises, while Chrome's chrome.* APIs use callbacks - the polyfill normalizes this
3. Cross-browser Code: Instead of writing separate code for Chrome and Firefox, we can write once and it works everywhere

What Has Fixed

Tab Groups API (Chrome-only feature)

Problem: The bookmark feature tried to group tabs, but Firefox doesn't support tab groups.

Fix: Added a check before using tab groups in src/layouts/bookmark/utils/tabManager.ts:

// Now checks if the API exists before using it
if (tabIds.length > 0 && browser.tabs.group && browser.tabGroups) {
    // Use tab groups (Chrome only)
} else {
    // Fallback behavior for Firefox
}

Build & Install

1. Install Dependencies

npm install --legacy-peer-deps
npm install webextension-polyfill --legacy-peer-deps

The --legacy-peer-deps flag is needed because react-joyride expects React 15-18, but the project uses React 19. This is safe - the extension works fine.

2. Build for Firefox

npm run build:firefox:clean

This creates the extension in .output/firefox-mv2/

3. Create ZIP Package

npm run zip:firefox

This creates .output/widgetify-webapp-1.0.59-firefox.zip

4. Installing in Firefox (Debug mode)

Unpacked extension method: about:debugging → Load Temporary Add-on on Firefox

This installs without needing Mozilla's signature:

1. Open Firefox and go to about:debugging
2. Click "This Firefox" in the sidebar
3. Click "Load Temporary Add-on..."
4. Select: .output/firefox-mv2/manifest.json

The extension will stay installed (despite the "Temporary" label) until you manually remove it.
This launches Firefox with the extension and auto-reloads on file changes.
Future: Submit to Mozilla Add-ons (AMO) for signed distribution