How to Package a Browser Extension as a Snap for Cross-Browser Compatibility?

snapcraft
1

I am developing a browser extension that integrates with the LESCO Bill Checker website (https://lescobil.pk). The extension detects multiple tabs of the same website being opened and triggers a notification with a custom link. I want to distribute this extension as a snap package for Linux users to provide broader compatibility and easier installation.

What I’ve Done So Far

  1. Developed the Extension:
  • Includes functionality to track tab creation and trigger notifications.
  • Targets Chrome and Firefox browsers for now.Sample Code Snippet:

chrome.tabs.onCreated.addListener(function(tab) { chrome.tabs.query({}, function(tabs) { let tabCount = 0; tabs.forEach(t => { if (t.url.includes(‘lescobil.pk’)) { tabCount++; } });

    if (tabCount > 1) {
        chrome.notifications.create({
            type: 'basic',
            iconUrl: 'icon.png',
            title: 'Multiple Tabs Detected!',
            message: 'You have opened more than one tab of LESCO bill checker. Please close the extra tab.',
            buttons: [{
                title: 'Go to Website',
                iconUrl: 'icon.png'
            }]
        });
    }
});

});

Explored Snapping the Extension:

  • I used the Snapcraft CLI to package the extension but ran into issues when trying to integrate it with browsers.
  • Created a basic snapcraft.yaml file: name: lesco-bill-extension base: core22 version: ‘1.0.0’ summary: Browser extension for LESCO bill checker description: | This browser extension helps users detect multiple tabs of the LESCO Bill Checker website and triggers a notification with a helpful link. confinement: strict grade: stable

parts: extension: plugin: dump source: . organize: “*”: $SNAP/ stage-packages: - chromium-browser - firefox apps: lesco-extension: command: snap/bin/launch-browser plugs: - network - browser-support - desktop

Challenges and Questions

  1. Browser Integration:
  • How do I ensure the snap package integrates with both Chrome and Firefox?
  • Is there a way to include browser-specific setup in the snapcraft.yaml?
  1. Cross-Browser Compatibility:
  • Can the same snap handle extensions for multiple browsers?
  • Should I package separate snaps for each browser instead?
  1. Best Practices:
  • Are there any best practices or examples for snapping browser extensions?
  • Any suggestions on handling notifications through snaps?

Additional Information:

  • The extension uses Chrome’s tabs and notifications APIs.
  • The website URL is: https://lescobil.pk

Request: I’d appreciate any guidance, examples, or pointers to documentation/tutorials that can help with snapping browser extensions, especially for projects targeting multiple browsers.