Sidebar for Firefox and Popup for Firefox for Android in a Single Plugin

Add-ons Development
#1

Hi,

I’m working on a Plugin that supports both Firefox Desktop and Firefox for Android. On Firefox Desktop, the plugin uses a Sidebar. From the manifest:
“sidebar_action”: {
“default_panel”: “sidepanel.html”,
“default_title”: “My Title”,
“open_at_install”: true
}

On Android, as Sidebars are not available, I’m falling back to a Popup:
“browser_action”: {
“default_title”: “My Title”,
“default_popup”: “popup.html”
}

Currently, I’m using two different version that are built separately and thus have two different manifests one for Desktop and one for Android. Is there any way to unify both versions into one single plugin/manifest so that I can upload a single plugin to AMO?

Thanks for your help!

Best
Stef

#2

Hello Stef,
So, what is the desired result? Can you describe?

Because you can put both of them in the manifest and if the platform supports it, it will work, and if not, it won’t - but the other one will.
The only “issue” is that the desktop will have a toolbar icon too. But they are by default hidden anyway in the puzzle icon.

Note that you can also customize toolbar icon behavior:


Or react to clicks, and for example open a toolbar instead:
2 Likes
#3

Thanks so much for the answer!

Having both the sidebar and the popup in the manifest works well already, especially on mobile.

The only remaining issue on Desktop, as you already mentioned, is that the toolbar icon now toggles the Popup. What I want to achieve instead is to toggle the sidebar when clicking the toolbar icon on Desktop.

Without popup, this has already worked with

Browser.browserAction.onClicked.addListener(() => {
   Browser.sidebarAction.toggle();
 });

However, once both sidebar and popup are defined, the browserAction seems to be overriden and the toolbar icon always opens the popup on click. I have a few ideas I still need to try though.

#4

Try this - don’t specify default_popup in the manifest file.
Then in your background script, detect Android platform: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/getPlatformInfo
And if it is Android, use setPopup to set the html you need.
And if it’s not Android, use the onClicked handler to open sidebar (well, if you are using Manifest V3, you’ll need to register the handler on top level and only inside the handler detect Android/Desktop and open the sidebar… aaaactually, that won’t work either, since opening a sidebar requires a user-action which is lost with the async call, so just open the sidebar in the callback :slight_smile: ).

I wish we had a “synchronous way” to detect Android :frowning:.

2 Likes
#5

As discussed in this thread IMO the root problem is that the user action must be handled synchronously. I don’t think this requirement makes sense in a world where the background context is started in response to events and must asynchronously fetch data in order to process an event. (In Firefox you may be able to work around this by synchronously accessing pre-fetched data saved to localStorage in your event handler, but that won’t work in all browsers since service workers don’t have access to that API.)

I’d very much like to start a conversation in the WECG about adopting a concept like transient activation for WebExtensions events like action.onClicked and commands.onCommand some time in the next couple weeks.

1 Like
#6

Thanks for the hint! Setting the popup dynamically based on the platform indeed does the trick.

I’ve also tried to use the navigator.userAgent. I just saw that this has also been proposed in the linked thread, but of course might be more brittle in some cases.

Thanks again for your help, it is very much appreciated!

1 Like