Buttons not showing up in Firefox WebExtension notifications

Question

I am working on a Firefox WebExtension in which I am trying to display a notification with a button. I have this working in Chrome. According to the docs, this is supported in Firefox. Buttons are listed as Optional in the NotificationOptions.

chrome.notifications.create(notificaitonId, {
        type: "basic",
        iconUrl: chrome.extension.getURL("images/unknown.svg"),
       title: "Blah",
       message: "A Message",
       buttons: [{title: "Get More Details"}]
});

When I run this code, I see the notification. But, I don't see a button. Am I missing something? Is it actually not supported? The only example for notifications doesn't use buttons so that hasn't been helpful.

Answer 1

Unfortunately, buttons are not, as of 2016-03-18, implemented for WebExtension notifications.

The NotificationOptions documentation on MDN states [emphasis/formatting mine]:

The first four properties - type, iconUrl, title, message - are mandatory in notifications.create(), and optional in notifications.update(). Firefox currently supports only these four properties.

and in the Browser compatibility section:

Firefox only supports: type, iconUrl, title, message.

The important parts of this ("Firefox currently supports only these four properties" and Firefox only supports: type, iconUrl, title, message.) were added to the documentation on 2016-03-07. Thus, if you looked at the documentation prior to that date there would have been no indication that buttons was not yet implemented.

In addition, the source code has the comment:

// FIXME: Lots of options still aren't supported, especially
// buttons.

You can also find the source code that is currently in use for this in your browser at: chrome://extensions/content/ext-notifications.js

Solution: Implement buttons yourself:

In WebExtensions:
It might be possible to implement buttons yourself from within WebExtensions. However, I am not familiar enough with WebExtensions to be able to say if it is possible, or not. If so, you will probably want to take a look at the source code that implements notifications and notification buttons for other types of Firefox add-ons.

For Firefox, generally:
If it was something I needed, I would probably choose to go ahead and implement buttons, and any other options I needed, for the entirety of Firefox and submit the code to Mozilla for review and inclusion in Firefox. I know this might sound like it is a big deal and a pain in the rear, but it really shouldn't be that difficult.

If you do desire to work on it, it should not take any special setup. The JavaScript code which implements notifications for WebExtensions is the file ext-notifications.js which is contained in the chrome\toolkit\content\extensions directory within the omni.ja file (just a .zip file with the extension changed to .ja) which is located in the Firefox install directory. Note there are actually 3 different omni.ja files within the install directory hierarchy. The one you want is in the root of install hierarchy, not the ones in either the browser or webapprt sub-directories.

Working on it would be as simple as extracting that file, modifying it, making an updated omni.ja file and putting the updated omni.ja file into the release directory. For a while, I did this routinely upon every release of Firefox because I wanted a longer bookmark MRU file list. I eventually broke down and just made an overlay extension, Change Bookmark Recent Folder List Length, to replace the file I was making changes to. If you want, you could do the same thing to implement the changes needed to support buttons. That would, of course, result in your current extension being dependent on the other one being installed until such time as the code was integrated into Firefox. But, it would result in both your having the functionality you desire now for your development, and the functionality getting into Firefox at least somewhat faster than waiting for someone else at Mozilla to implement it. An overlay extension like that just takes a install.rdf file, a two line chrome.manifest file and the updated ext-notifications.js file you are wanting to override/replace over the current one.