Firefox’s biggest selling point is its security. Unfortunately for third-party developers, this means that users have to do several awkward steps before they can install a Firefox extension from an internet site, to protect them against malicious code. The best way to avoid this is to get your extension on the main add-ons site, addons.mozilla.org, since that’s trusted by default and your users won’t have to navigate any tricky security dialogs. There are some issues with this though. Since it requires a vetting process it can take weeks to months to get an extension added. It’s also possible that your extension doesn’t meet the criteria for inclusion if it’s specific to a particular product or niche market, rather than something that’s appropriate for the general public.
If you do need to install from your own site instead, you’ll need a way of guiding your users through the security process, and I’ll cover a technique I’ve found effective. Firefox extensions are packaged in .xpi files, which under the hood are just zip files with a special layout. To start installation, you just need to create a link to the .xpi file on your site, and Firefox will recognize the type when the user clicks on it. Because the site won’t have the right security privileges, the first thing the user sees will be this security warning at the top of their window, and installation will be blocked:
To restart installation, the user has to click on edit options, which brings up this dialog:
They then have to click on ‘Allow’, and click on the install link again once the dialog has closed. As you can imagine, it’s easy to lose users along the way with this multi-step process. I’ve found that providing a visual aid to guide them through it seems to help, using Javascript to draw an arrow pointing to the ‘Edit options’ button and providing brief instructions next to it:
I can’t claim credit for the idea, I first saw it with me.dium‘s extension, but I ended up writing my own version for GoogleHotKeys before it was accepted onto the official Mozilla site. It works by intercepting the install link mouse-click, revealing the guide at the top of the page and then trying to install the extension through scripting, which brings up the security warning it points to. Here’s a link to an example page showing the code in action
(you’ll need an image like this
for it too), and I’ve included the code below. You’re free to reuse this for your own projects.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>PeteSearch</title></head><body bgcolor="#eeeeee">
<script type="application/x-javascript">
<!–
function installInitialTry (aEvent)
{
showInstallEnable();
return attemptInstall(aEvent);
}
function attemptInstall(aEvent)
{
var params = {
"PeteSearch": {
URL: aEvent.target.href,
IconURL: aEvent.target.getAttribute("iconURL"),
toString: function () { return this.URL; }
}
};
InstallTrigger.install(params);
return false;
}
function showInstallEnable()
{
if ((document==null)||(document.getElementById==null))
return;
var content = document.getElementById("click_here_content")
if (content!=null)
return;
var placeholder = document.getElementById("click_here_placeholder");
placeholder.innerHTML =
"<table align=\"center\" bgcolor=\"#ffffff\" border=\"0\" width=\"100%\" id=\"click_here_content\"><tbody>"+
"<tr>"+
"<td align=\"right\"><p><font size=\"+2\"><b>Click here to enable installation<br>"+
"and then click <a href=\"http://petesearch.com/petesearch.xpi\" iconurl=\"iconsmall.png\" onclick=\"return attemptInstall(event);\">here</a> to install"+
"</b></font>"+
"</p></td>"+
"<td width=\"116\" align=\"right\">"+
"<img width=\"116\" height=\"165\" src=\"clickhere.png\"></td>"+
"</tr>"+
"<tr>"+
"<td align=\"right\"><p><font size=\"+2\"><b></p></td>"+
"</tr>"+
"</tbody></table>";
}
–>
</script>
<div id="click_here_placeholder">
</div>
<div align="center">
<a href="http://petesearch.com/petesearch.xpi" iconurl="iconsmall.png" onclick="return installInitialTry(event);">
install
</a>
</div>
</body></html>
Pete Warden's blog 
