Search code examples
firefoxfirefox-addoninstallationuser-experiencefirefox-addon-webextensions

how to replace the gray puzzle-piece with red stopsign on WebExtension on InstallTrigger.install call


I have a Firefox WebExtension. It's duly signed by addons.mozilla.org and generally working correctly. But the user experience of installing it isn't very good.

I'm installing it from my own web site using the InstallTrigger.install() sequence documented here by Mozilla.

But this sequence seems to ignore the IconURL parameter. Instead my user gets a fairly scary popup box like this.

enter image description here

Is there any way to put my own icon on that box instead? Is there any way to simplify the installation sequence?

My code is pretty much cut and past from the mozilla docs. Here it is.

HTML button

          <button id="extension-button-1" type="button" 
            class="btn btn-default btn-primary"
            onclick="return EgetExtension(event);"
            data-xpi="/install/browserextension/extension.xpi"
            data-iconurl="/install/browserextension/icon32.png"
            data-hash="sha256:aacf102b0cc6c9ffe370redacteddd1a8cac05cd4b2e9redactedd31394fb1a0"> Cobrowse </button>

Javascript

    var params = {
        "Extennsion": {
            URL: event.target.getAttribute('data-xpi'),
            IconURL: event.target.getAttribute('data-iconurl'),
            Hash: event.target.getAttribute('data-hash'),
            toString: function () { return this.URL; }
        }
    };
    InstallTrigger.install(params);

manifest.json

{
  "name": "Cobrowse",
  "short_name": "C3PO",
  "version": "3.7.1.17",
  "manifest_version": 2,
  "author": "Example.",
  "description": "example. ",
  "homepage_url": "http://ww2.glance.net/products/panorama/co-browse/",
  "icons": {"128": "g128.png"},
  "background": {
    "scripts": ["background.js"],
    "persistent": true },
  "permissions": [
    "https://*/*",
    "http://*/*",
    "tabs",
    "storage"
  ],
  ... etc
}

Solution

  • What you desire is not possible. The Firefox source code (2) does not provide a way for you to specify this icon. It would be possible to change this if you had an extension or theme already installed which did so, but that is a bit counter to what you desire.

    The icon is assigned by CSS based on the popupid. This is done in chrome://browser/skin/browser.css at line 3749 (on Firefox 53.0). The popupid is assigned based on the reason that the notification is being shown. In this case that is addon-install-blocked.