Ihoss Extension: Update tutorial

Installing Extensions Tutorial

How do I install extensions, themes and search engiens - 13/2-2005

So, now you have made the most awsome extension, theme or a new search engine and you want to share it with the world. If you have a website then this tutorial will tell you how to install extensions, themes and search engines on visitors Firefox.

The types

There are three things you can install on firefox; extensions, themes and search engiens. Extensions add useful functions to your browser, themes give it a new look and search engiens add to the search bar. This means you have to learn 3 ways of installing, one for extensions, one for themes and one for engiens. Lets take extensions first.

Extensions

There are actually 2 ways to install extensions, one using javascript (which is the prefered) and one using .htaccess (which is easier). I will do the javascript version first.

<!-- Put this one the page -->
<a href="url" onclick='return installE({name: {URL: "url", IconURL: "iconURL"}});'>Install Extension!</a>

<!-- And put this in the head part of your site -->
<script type="text/javascript">
function installE (params){
	if ((typeof window.sidebar == "object") && (typeof  window.sidebar.addSearchEngine == "function")){
		InstallTrigger.install(params);
		
		return false;
	}else{
		errorMsg("You do not have the right browser. Get FireFox!");
	}
}
</script>

What you need to change there is:
url: This is the url of the extension.
iconURL: This is an icon that will show when you install the extension. use the URL of the icon.
name: This is just the name of the extension.

You can test this function by clicking here. It should pop up a dialog like this:


As I said there is an easier way to do it too. If you have an apache or another http-d server you can edit the .htaccess file. If you serve the xpi file with a mime type "application/x-xpinstall" then Firefox will install it as an extension. This is a much easier way to do it, so why did I tell you about the other way then? Because you don't get that fancy little icon when you install it.
Below is the code you need to add to the .htaccess file:

AddType application/x-xpinstall .xpi

Themes

Installing themes is very much like installing extensions with javascript.

<!-- Put this one the page --> 
<a href="url" onclick='return installT("name", "url");'>Install Theme!</a>

<!-- And put this in the head part of your site -->
<script type="text/javascript">
function installT(name,url){
	if ((typeof window.sidebar == "object") && (typeof  window.sidebar.addSearchEngine == "function")){
		InstallTrigger.installChrome(InstallTrigger.SKIN,url,name);
		
		return false;
	}else{
		errorMsg("You do not have the right browser. Get FireFox!");
	}
}
</script>

What you need to change there is:
url: This is the url of the theme.
name: This is just the name of the theme.

As you see it is almost identical to the extension installation. The main difference is that it callse the InstallTrigger.installChrome function instead of the InstallTrigger.install function. You can test the function and see what it looks like by clicking here. A dialog like the one below should popup:

Search Engines

<!-- Put this one the page --> 
<a href="url" onclick='return addEngine("name", "ext", "class");'>Install Engien!</a>

<!-- And put this in the head part of your site -->
<script type="text/javascript">
function addEngine(name,ext,cat){ //Search Engine
	if ((typeof window.sidebar == "object") && (typeof  window.sidebar.addSearchEngine == "function")){
		window.sidebar.addSearchEngine("http://www.yoursite.com/"+name+".src","http://www.yoursite.com/"+name+"."+ext,name,cat );
		return false;
	}else{
		errorMsg("You do not have the right browser. Get FireFox!");
	}
}

What you need to change there is:
url: This is the url of the theme.
yoursite.com: Instead of passing the whole URL we only pass the name. This means you have to add the name to the rest of the url.
ext: This is the extension of the image. The image has the same name as the search engine but the extension can change (png/gif/jpeg/bmp).
cat: Category is the type of search. I simply use web here.

After changing the red parts you can put this function on your page. You can test it by clicking here. A message like the one should below appear:

Not working?

Ok, so you have added everything and it still does not work?

• Use the javascript console to see if all the code is correct.
• Make sure the fiels are in the right directories on your server.
• Extensions and themes require that you restart Firefox before they work.

Finaly

That's it. Add the functions to your page and test it out! A smart thing to do is to place all the functions in a seperate js file and load it into every page. That way you only have to edit one file if you find a mistake. If you have any questions or ideas send me a mail and I will gladly help you.
Ihoss - Feb/2005