Creating Customized Search Plugins for Firefox v2

***This tutorial is for Firefox version 2, it will NOT work with earlier versions. Firefox v2 can be downloaded here. This tutorial for versions prior to version 2 can be found here.***

This is a tutorial for creating a customized search plugin for Firefox2. The search add-ons are the search engines in the upper right corner of Firefox. Just by entering in some text, and switching it to the correct search engine and hitting the Enter key, you can get the results of that search instantly. By default, Firefox comes with some already installed and others can be installed also, but what do you do if there's not one for a website you use a lot? Simple, make your own!

I can't promise this method will work 100% of the time. You are at the discretion of the code that the website is using. If it doesn't work, keep tweaking it to see if it will.

In this tutorial, I will walk you through making a search plugin for the website www.cduniverse.com This site has lots of CDs and lots of information on those CDs. Click the link above to open the website.

What we are looking for on this page is the search box, seen here...

The information that search box takes and processes to the next page is what we need to make this search plugin work. Right-click anywhere on the page and select View Page Source. A new window will open up with code.

Now we need to find the specifics of that search box. Hold Control and hit the F key to bring up the find box on the bottom of the window.

In the find box, type in "input name" or "input" without the quotes. It will take you to the information we need.

In this example, the code shows "input id="HT_Search_Info". We need the "HT_Search_Info" part. The other information we need should be above this line of code. Look for "form" or "form action".

In the code, the form action shows the page that will return the search results. In this example it is "/sresult.asp" which will go to "http://www.cduniverse.com/sresult.asp". Also make note of the method, this one is "GET". Those should be the only two pieces of information we need from here.

Now we need to create the search engine plugin file. Here is the template from Mozilla's website on how to create these. You can download it here. Copy the text and paste it in a Notepad window. Before we change anything, let's save it to the correct format to the correct folder.

Click File, Save As..., and navigate to the following folder:

C:\Program Files\Mozilla Firefox\searchplugins

Save it under an easy to remember name, preferably one word, no spaces with a ".xml" after it. Make sure you change the "Save as type" to "All files". Once that is saved we can edit it. I saved mine as "cduniverse.xml".

Inside this file, there is just a few things to edit.

On the top of the page, in the "ShortName" section, you will see a variable that reads "engineName". This is what you will see as it's name when listed with the other search engines from the drop-down box. Change this to the name of the website, or whatever you wish.

Below that you see a "Description" section. Change "engineDescription" to a description of the site or anything you want.

Next you will see in the "InputEncoding" section. Change "inputEncoding" to
"UTF-8" minus the quotes.

The next part is in the "Image width" section. This is where you have to use a Base-64 string to represent your icon. Sounds tricky, but here's what to do. First you need to come up with an icon for this search engine. I like to take a screenshot of the actual webpage and cut out the webpage's logo to use, or you can make your own. Once you have a logo, trim all the excess whitespace around it and then the picture must be resized to 16x16 pixels. Would be best to save the picture as a bitmap (.bmp). Once you have that done, now that picture needs to be converted to a long Base-64 string. Vist this website on motobit.com Click the Browse button and select your picture then click the "Convert the source data" button. When that loads, the next page you see will have a lot of numbers, letters, symbols in the top box. That is the data we need. Put your cursor in the box, hit Control-A to select all and copy that data. Now right after "base64," in your .xml file delete "imageData" and the space between the comma and the "<". Then paste in your data from the Base64 conversion. That was the tricky part, we're almost done. If you don't want to make your own icon and use the one I made, get that text here. Here is what the icon looks like.

The next section you need to replace the "method" part. In our example it was "GET" so put that in there with quotes.

The next part is the "searchURL" part. This is the URL from the form action we found in the source code earlier. It is "http://www.cduniverse.com/sresult.asp" in my example. TIP-Some websites require a forwardslash "/ " following the website address. If it doesn't work the first time, try putting one in after the address.

Now the parameters. This is the information that is passed onto the search page. The actual text you type in the search engine box is what will be passed on for the search engine to look up. My example is for CDUniverse.com, so if I typed in "Green Day", the 'Green Day' text will be looked up on the website. The input id we found earlier is what goes here. Replace "paramName1" with "HT_Search_Info", including the quotes. Next to it is the value. If a website uses a certain type of value, that would go here. But in my example we want the value to be what YOU type in, so replace "paramName1" in the value section with
"{searchTerms}" including the quotes. Below that you see "..." and another line for parameters. This is if more than one parameter is used for the search. It is not used in my example, so delete the "..." line and the next Param line below that. Make it so right after the first param line is the </url> line.

The next part to change is the "suggestionURL" part. What this does is bring up suggestions as you type text in the search box. This part is beyond the scope of this tutorial. Look into more if you wish, otherwise just put in the URL of the website, in my example "http://www.cduniverse.com/" including the quotes.

The last part is the "searchFormURL". This is the main page it will go to if nothing is entered in the search engine text box and the Enter key is pressed. In my example, I made it go to the main webpage for cduniverse.com so I entered "http://www.cduniverse.com" WITHOUT the quotes.

Once you have all this done, save the .xml file. Remember, it should be saved in this folder...

C:\Program Files\Mozilla Firefox\searchplugins

Now that all this is saved, it must be tested! First close ALL firefox windows. Then reopen firefox. In the upper right corner, click the down arrow to see all your search engines. You should see the new one you created here. Select the one you created, type in something to search for and hit the Enter key. If everything works, the next webpage that should come up is the actual search results on the webpage you made it for. If it doesn't work, go back to the .xml code and try to find your mistake. Like I said before, usually this whole process is pretty simple, but every website is coded differently and they may not be using the traditional "form" and "input" fields, so it might be a lot more complicated or impossible to do by using this method.

My example can be downloaded here. I made 7 custom search engines myself, those can be downloaded here.