Creating a Custom Firefox Search Plugin

I decided to make a Firefox Search Plugin for this site, mostly because I was wondering how hard would it be. Surprisingly enough, it is a really easy task. You should be able to create one without any experience in writing FF plugins. All you need is the ability to edit 3 or 4 lines of XML. A half retarded monkey could do it. But since I do not have any monkeys around, I’m just going to show it to you people.

Firefox keeps the search plugins in two different places. One is the global directory which holds common plugins for all users:

By default when you install new search plugins, they go into the user directory. If you look inside you will find bunch of xml files inside. After a brief inspection of these files you can see that they have a very similar structure.

In fact, let me show you my own plugin here and then we can go over the changes you need to make to it to adopt it to your own site:

Line 1 is just a standard boilerplate – leave it alone. Line 2 text will show up in the search box when it is not in use – so put your sites name here. Description is really nonessential, but feel free to add yours. Same goes for encoding – leave it UTF unless you need to use a different standard.

I clipped line 5 for size. The base64 encoded data was actually spanning over 10 lines, but it would be pointless to put it all here. This is line tells Firefox what icon to display on the search box. I used the default Terminally Incoherent icon:

You will want to embed your image in the xml file. How do you do it? It’s simple – you encode it in base 64. You can do it online using this nifty online converter written by Antonnin Foller. Or you can pick another one – there are dozens of them on the web.

You will end up with a long alphanumeric string representing your image. Just paste it in after:

data:image/x-icon;base64,

As long as you use a popular image encoding, and make sure the image is 16×16 you should be fine. My icon is really a PNG file, but I’m pretty sure a JPG or a GIF would work just as well.

Lines 6, 7 and 8 are crucial. This is where you tell Firefox where your search box lives. Make sure you provide proper URL and specify the name of the search box. For example on my site this is “s”. If you don’t know what your’s is look at the HTML source for your search form. If you can’t figure it out, you are to dumb to do this and I can’t help you. :mrgreen:

Perhaps this is not the best written search plugin with respect to the style, or formating but it works. If it strikes your fancy, you can go ahead and download the plugin below:

8 Responses to Creating a Custom Firefox Search Plugin

This is a pretty cool tutorial, easy to understand. ;) A couple months ago i played around with adding a few search engines, but didn’t think of adding one for your site. So I had to download it ya know. haha. Maybe you might consider adding a download page here and putting this in it, why not? In time it will be buried in your blog and new readers might not find it. And by the way I can take a hint, Tweaking Firefox User-Agent Value :D

A great thing about Firefox is it has an extension for nearly everything. I found this today in a blog i read every few days, OpenSearchFox. This claims to adds a search plugin to FF for any site with a search box. I tested it here haha but found out I first had to set its preferences to “ Always choose the first submit button” in order to get it to work. Anyway pretty cool.

And by the way I didn’t even have Ubuntu when ya wrote the tweaking user agent thing, I just wanted my post here to reflect the fact I’m using Ubuntu whenever I am, instead of the generic linux thing it was giving :D So i definitely didn’t think it was like targeted at like me or anything. haha

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Currently you have JavaScript disabled. In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page.Click here for instructions on how to enable JavaScript in your browser.