Mozilla & Internet Explorer Search Plugin's / Opensearch Tutorial

Date: Apr 07 2009

Let’s keep this one real quick and simple. Since I love to shop for the best price and I am lazy I wanted to make a Pricegrabber quick search tool for Firefox or Internet Explorer 7 because there was none to be found.
Since it was so easy and I didn’t find any good tutorials I figured I would write one up. Ok so lets dig into this.

The opensearch item is nothing more than an xml file with a couple attribute.

The only three meaningful parts to get things working are the Image section, Search Url and Search String.

 
 
	Pricegrabber
	Pricegrabber - Comparison Shopping
	UTF-8
	<img alt="" width="16" height="16" />data:image/x-icon;base64,AAABAAEAEBAAAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAPiIgAAAAAAAeIiId3AAAAd4CIAAiPAAB4AAiHiIcAAIiICP+AgAAAf3h49wCAAAAAiH/3gAAAAACIh3eICAAAAIiIiAiAgAAAgIeICIAHAAAIcHgICIAACAcACIAAiICAcAAAAAAIiIgAAAAAAACADwAAAAAAAHj//wAAg/8AAIA/AAAADwAAAA8AAAAfAAAAHwAAwB8AAMAPAADABwAAwAMAAMQjAACOcQAAH/gAAD/8AAC//AAA
 
 
 
	http://www.pricegrabber.com/

To understand it in a http type format

http://www.pricegrabber.com/search.php?form_keyword=commodore+64

Url > template is the path to the search script, similar to your post action for a form
form_keyword is the form field that would be the search text
Image: here you either have the option to do a hard link to a png/ ico file or encode your ico/png right into the xml file. This is probably the most favored method.

Using option one the hard link to your icon file your image arrtibute would look something like this

<Image width="16" height="16">http://ai.pricegrabber.com/favicon.ico</Image>

The other method encoding your ico/png file you would need to get your icon file and use
a base64 binary encoder.

<Image width="16" height="16">data:image/x-icon;base64,paste image data here</Image>

Its pretty simple and if you want to make a quick search for you any site all you have to do is have a look at their search form.

Our xml opensearch would look something like this

 
 
	Backcountry
	Backcountry - Outlet for Outdoor gear
	UTF-8
	<img alt="" width="16" height="16" />http://content.backcountry.com/images/icon/bcs.ico
 
 
 
	http://www.backcountry.com/

Now lets go over how to have the end user have a nice simple install.

There are two options at hand and you can use both.

OPTION #1
make a <a> link that can install like this one.
add the pricegrabber search engine – It’s pretty easy and this works for IE7+ as well.

<a href="javascript:window.external.AddSearchProvider('http://url_path/opensearch_file.xml');">add the engine</a>

OPTION #2
Have auto discovery of search engine plugin embedded in your page like this. which resides in the head of your html pages.

LIST OF MY CUSTOM OPENSEARCH PLUGINS

Chemlab Blog – Auto Discovery Set

Backcountry.com OpenSearch Install – coming soon

dogfunk.com OpenSearch Install – coming soon

Newzbin Opensearch Install

Pricegrabber.com Opensearch Install