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:

%PROGRAMFILES%\Mozilla Firefox\searchplugins
/usr/lib/firefox/searchplugins

The other location is your local user profile:

%APPDATA%\Mozilla\Firefox\Profiles\default.bae\searchplugins
~/.mozilla/firefox/ /searchplugins

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:

1. <SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
2. <ShortName>Terminally Incoherent</ShortName>
3. <Description>Terminally Incoherent Site Seatch</Description>
4. <InputEncoding>utf-8</InputEncoding>
5. <Image width="16" height="16"> data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUg </Image>
6. <SearchForm>http://terminally-incoherent.com/blog/</SearchForm>
7. <Url type="text/html" method="GET" template="http://terminally-incoherent.com/blog">
8. <Param name="s" value="{searchTerms}"/>
10. </Url>
11. </SearchPlugin>

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: TI 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:

[Terminally Incoherent Search Plugin]

This should actually also work in IE7 since the code should conform to the OpenSearch standard. Unfortunately it doesn’t because the SearchForm and Param tags are not supported. Meh… Screw IE7.

I also added auto discovery on this website. You can do this too by adding this to your header:

<link rel="search" type="application/opensearchdescription+xml" title="Title of Your site" href="URL of your searchplugin">

This will make the search box icon glow blue when someone browses to your website, and give them an option to install it automatically.

[tags]firefox, firefox search plugin, search plugin, open search, search[/tags]

This entry was posted in programming and tagged , . Bookmark the permalink.



8 Responses to Creating a Custom Firefox Search Plugin

  1. Starhawk UNITED STATES Mozilla Firefox Ubuntu Linux says:

    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

    Reply  |  Quote
  2. Luke UNITED STATES Mozilla Firefox Windows says:

    Well, I figured that auto discovery thing would take care of that. :)

    Oh, btw – the tweaking user agent was something I did on one of my machines to make the icons under my comments prettier. It was not really targeted at anyone who posts here. :)

    Reply  |  Quote
  3. Starhawk UNITED STATES Mozilla Firefox Ubuntu Linux says:

    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

    Reply  |  Quote
  4. Luke UNITED STATES Mozilla Firefox Windows says:

    Yeah, I saw the Open Search thing the other day too. :)

    If you use the Firefox from the repositories it should say Ubuntu. But I think Dapper repositories still only have FF 1.5 for some reason.

    The linux binary from Firefox website is a generic one, so it does not specify the distribution.

    Reply  |  Quote
  5. What is a “Site Seatch”

    Just wondering ;)

    Reply  |  Quote
  6. Luke UNITED STATES Mozilla Firefox Windows says:

    Seatch is a typo. :mrgreen:

    Reply  |  Quote
  7. teamcoltra UNITED STATES Mozilla Firefox Windows says:

    :D just wondering… I thought it might be one of those new web 2.0 things ;)

    Reply  |  Quote

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>