Detecting Firefox add-ons

As a web developer you might make use of detecting browser plugins with your javascript code once in a while (If you haven’t, then you might want to learn about it in my blog post on browser plugin detection). But did you ever think about the possibility of detecting some of the most popular firefox add-ons? Well, this used to be quite easy by using the internal chrome://-protocol of Firefox to load an image of an extension (see this post by Jeremiah Grossman for more info). However, accessing the chrome://-protocol was considered a security risk and therefore has been disabled. Nonetheless you can still accomplish to detect an extension with the image-load trick. Why? Because extension developers may mark their extension as web-accessible setting the property “contentaccessible=yes” inside the chrome.manifest file of the extension. This is e.g. the case for the two famous plugins Firebug and Web Developer Toolbar. Therefore I have appended a quite trivial little javascript snippet using the example of Firebug and the also well-known Web Developer Toolbar showing how it works.

var firebug = null;
var web_dev_bar = null;
 
//Create img tags
var firebug_img = document.createElement("img");
var web_dev_img = document.createElement("img");
 
/*
 * Add event listeners for both "load"- and "error"-event
 * Set the variable showing the existence of the extension by
 * setting it to "true" or "false" according to the fired event
 */
firebug_img.addEventListener("load", function(e){
    firebug = true;
}, false);
firebug_img.addEventListener("error", function(e){
    firebug = false;
}, false);
web_dev_img.addEventListener("load", function(e){
    web_dev_bar = true;
}, false);
web_dev_img.addEventListener("error", function(e){
    web_dev_bar = false;
}, false);
 
/*
 * Set the src-attribute to an internal image resource
 * of the extensions using the chrome protocol
 */
firebug_img.setAttribute("src", "chrome://firebug/content/firebug32.png");
web_dev_img.setAttribute("src", "chrome://webdeveloper/content/images/logo/large.png");

Not too hard after all, is it? To complete this post, the following list will explain how you can find out for yourself if an extension has a web-accessible image you can try to load.

1. Install the add-on you are willing to detect.
2. Locate the folder where your Firefox extensions reside. On Windows machines the path should be: “C:/Users/{yourName}/AppData/Roaming/Mozilla/Firefox/Profiles/{yourProfile}/extensions/”
3. There you will find all of the extensions currently installed. If you have a look inside one of these folders you will find a file called “chrome.manifest”. Open it and look for the property “contentaccessible=yes”.
4. If it isn’t present you are unfortunate. Loading an image to detect the extension won’t be possible. If, however, the property is present you are in luck and should continue with the next step.
5. Dig through the “chrome/content” folder of the extension and look out for an image.
6. If you have found one, take the whole path to the image starting with the content-folder, and put the chrome-protocol as well as the extension’s name in front (e.g. chrome://firebug/).
7. Try to load this path inside an image tag as described above.
8. Image loading successful? Congratulations! There is your way to detect the extension.