Image file size limit on browser action icon?


(AE Creations) #1

I’m the author of Panic Button, a Firefox add-on that adds a browser action (toolbar button in the browser UI). The add-on lets users to set a custom browser action icon by uploading an image file (PNG, JPEG) of their choice.

In Firefox 64 and older, it was possible to set a custom browser action icon, via browser.browserAction.setIcon(), using data from an image file of any size. The image file is obtained by the user uploading it through an <input type="file"> element in the add-on preferences page. The image is automatically scaled down to fit the browser action button (16x16 pixels, I believe).

But starting in Firefox 65, I’ve noticed that setting the browser action icon to an image file that is large is causing the browser action toolbar button to be blank. This is happening on both Windows and macOS.

I did a few tests: setting the browser action icon to an image from a file that is 765 KB will correctly show the scaled-down image on the toolbar button, but a 795 KB image file will result in a toolbar button with a missing icon.

The WebExtension API browser.browserAction.setIcon() doesn’t reject the promise if attempting to set the icon using data from an image file that is supposedly too big. There are no error messages appearing in the error console, either.

Since it appears that larger image files are no longer being accepted, what is the maximum image file size that browser.browserAction.setIcon() can handle?

Also, I could not find any documentation about this new file size limit in the Firefox 65 for developers page. Shouldn’t such changes be listed there?


(Tomislav Jovanovic) #2

I don’t know offhand where the limit comes from or what it might be, but you should be able to easily use a canvas to draw the user selected image to a size more appropriate for an “icon”.

You could still file this as a bug, but it’s unlikely to get a high priority since there is an easy/sensible workaround.


(AE Creations) #3

Thanks for the hint! The solution to use a <canvas> works perfectly.