How can I set a Safari Browser button icon?

Question

I am trying to set the icon in my Crossrider extension using appAPI.browserAction.setResourceIcon (see code) but it does not work. What am I doing wrong?

appAPI.ready(function($) {
 appAPI.browserAction.setResourceIcon('buttonIcon.jpg');
});

Answer 1

Unlike other browsers, Safari uses the extension's icon as the image for the button as noted in the Crossrider docs and quoted here for your convenience:

• Unlike other browsers that use setResourceIcon, the Safari button icon uses the default extension icon as set in the IDE (Settings > General Settings).
• For optimal appearance, the icon must be 128x128 pixels with resolution 72dpi.
• Once set, the icon cannot be changed.
• All transparent pixels are rendered in white and all other pixels are rendered in black. Hence, icons that do not have any transparent pixels appear as a black square.

[Disclosure: I am a Crossrider employee]