Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing Firefox addon install icon

I'm working on developing a Firefox add-on using the Add-on SDK. I changed my package.json file to include entries for a 32x32 icon and a 64x64 icon.

{
    ...
    "icon": "icons/icon-32.png",
    "icon64": "icons/icon-64.png",
    ...
}

Furthermore, I placed icon-32.png and icon-64.png in the directory icons inside my package directory before running cfx xpi inside the package directory.

The icons correctly display in the addon manager from Tools > Add-ons, but the installation dialog still uses a puzzle piece icon.

I am self-hosting the Firefox add-on.

At first, I thought it might be because I wasn't yet signing the xpi file, but I noticed that there are many other add-ons that are not signed but still have the correct icon in the installation dialog.

I also thought that it might be because the icon wasn't located in the right place within the xpi file or perhaps that the install.rdf wasn't correctly generated by the add-on SDK, but I unzipped the xpi and found that cfx had put the icons in the root directory and renamed them to the default names (icon.png and icon64.png) and had omitted the filenames in the install.rdf (pointing them to the default icons).

How can I change the installation icon?

Can installation icons only be changed when hosting with Firefox?

like image 829
fixedpoint Avatar asked Feb 09 '12 07:02

fixedpoint


People also ask

How do I change the default icon in Firefox?

If you don't like using resource hacker and modifying the exe, you can use the change icon setting by right clicking Firefox shortcut from C:\ProgramData\Microsoft\Windows\Start Menu\Programs and setting it to the old firefox icon.

How do I add an extension to Firefox icon?

Look for Add-ons and themes. Click on Add-ons and themes and drag it into your toolbar. To add an individual add-on to your toolbar, look for the add-on icon on the page and drag it into the toolbar.

How do I change the icons on my Firefox toolbar?

To begin customizing, click View > Toolbars > Customize or right-click the area next to the Menu Bar and left-click Customize. Drag and drop icons from the selection list to or from the Toolbar. Commonly moved buttons include Print, History and Bookmarks. You can also check the box for smaller icons if you prefer.


1 Answers

The installation dialog doesn't take the icon from the package, it uses the information supplied by the web page. Your web page needs to use InstallTrigger to start the installation, along these lines:

function install(link)
{
  params = {};
  params[link.getAttribute("addonName")] = {
    URL: link.href,
    IconURL: link.getAttribute("iconURL")
  };
  InstallTrigger.install(params);
}

And your link would look like this:

<a href="foo.xpi" addonName="Foo" iconURL="foo.png"
   onclick="install(this); return false;">
  Install
</a>

Note that it still has to be a link - if the user has JavaScript disabled your install() function will not be called. The user will simply follow the link instead and installation will start regardless.

like image 110
Wladimir Palant Avatar answered Sep 21 '22 20:09

Wladimir Palant