Title: Creating custom search providers for Firefox and IE7
Slug: creating-custom-search-providers-for-firefox-and-ie7
Date: 2008-07-25 05:07:00
Author: Kartones
Lang: en
Tags: Tools, Development
Description: A guide on creating custom search providers for Firefox and Internet Explorer 7.

 <p> </p> <p>Firefox and Internet Explorer 7 use search providers based on the <a href="http://www.opensearch.org/Specifications/OpenSearch/1.1">OpenSearch 1.1 specification</a>. This means that anyone can develop their custom providers and add them to their browsers.</p> <p>So, I've learned a bit of how to create them and created one of each to "connect" with the blog community search page (so you can search all blog posts for specific info).</p> <p><b><u>Firefox</u></b></p> <p>Starting with Firefox, info about creating custom search engines can be found in <a href="http://developer.mozilla.org/en/docs/Creating_OpenSearch_plugins_for_Firefox">this page</a>.</p> <p>Here is the markup code for our custom Kartones.Net search provider (notice the <b>[SOMEDATAHERE]</b> tag, it is to avoid placing base64 binary image data in the post).</p> <p><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">SearchPlugin</font><font color="red"> xmlns</font><font color="blue">="http://www.mozilla.org/2006/browser/search/"&gt;</font></font><font color="black"><br></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">ShortName</font><font color="blue">&gt;</font><font color="black">Kartones.Net</font><font color="blue">&lt;/</font><font color="maroon">ShortName</font><font color="blue">&gt;</font></font><font color="black"><br></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Description</font><font color="blue">&gt;</font><font color="black">Kartones.Net Community Search</font><font color="blue">&lt;/</font><font color="maroon">Description</font><font color="blue">&gt;</font></font><font color="black"><br></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">InputEncoding</font><font color="blue">&gt;</font><font color="black">UTF-8</font><font color="blue">&lt;/</font><font color="maroon">InputEncoding</font><font color="blue">&gt;</font></font><font color="black"><br></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Image</font><font color="red"> width</font><font color="blue">="16"</font><font color="red"> height</font><font color="blue">="16"&gt;</font><font color="black">data:image/gif;base64,<b>[SOMEDATAHERE]</b></font><font color="blue">&lt;/</font><font color="maroon">Image</font><font color="blue">&gt;</font></font><font color="black"><br></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Url</font><font color="red"> type</font><font color="blue">="text/html"</font><font color="red"> method</font><font color="blue">="GET"</font><font color="red"> template</font><font color="blue">="https://kartones.net"&gt;</font></font><font color="black"><br><font face="Courier New">  </font></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Param</font><font color="red"> name</font><font color="blue">="q"</font><font color="red"> value</font></font><font face="Courier New"><font color="blue">="{searchTerms}"/&gt;<br>&lt;/</font><font color="maroon">Url</font><font color="blue">&gt;</font></font><font color="black"><br></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">SearchForm</font><font color="blue">&gt;</font><font color="black">https://kartones.net</font><font color="blue">&lt;/</font><font color="maroon">SearchForm</font><font color="blue">&gt;</font></font><font color="black"><br></font><font face="Courier New"><font color="blue">&lt;/</font><font color="maroon">SearchPlugin</font><font color="blue">&gt;</font></font><font color="black"></font></p> <p>Basically, we setup:</p> <ul> <li>A short name (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">ShortName</font><font color="blue">&gt;</font></font>)  </li><li>A description (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Description</font><font color="blue">&gt;</font></font>)  </li><li>The input encoding, usually UTF-8 (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">InputEncoding</font><font color="blue">&gt;</font></font>)  </li><li>An image (<font color="blue">&lt;</font><font color="maroon">Image</font><font color="blue">&gt;</font>, can be converted to base-64 <a href="http://software.hixie.ch/utilities/cgi/data/data">here</a>)  </li><li>The URL that performs the search (<font face="Courier New">&lt;Url&gt;</font>) and its parameters (<font face="Courier New">&lt;Param&gt;</font>, our typed search will be in the <font color="#0000ff" face="Courier New">{searchTerms}</font> value)  </li><li>A reference to the search form page (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">SearchForm</font><font color="blue">&gt;</font></font>)</li></ul> <p> As you might have noticed, it simply creates a querystring similar to the ones the webpage creates (example: https://duckduckgo.com/?q=RPG+site%3Ablog.kartones.net), and create info (image, name, description...).</p> <p>Here is a screenshot of the added search engine:</p> <p><img src="https://images.kartones.net/posts/screenshots/firefox_custom_searchprovider.png"></p> <p><u><b>Internet Explorer 7</b></u></p> <p>Creating a IE7 provider is very simple too. Microsoft had an MSDN page that explains quite simply the process.</p> <p>First the markup code:</p> <p><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">?xml</font><font color="red"> version</font><font color="blue">="1.0"</font><font color="red"> encoding</font><font color="blue">="UTF-8"</font><font color="red"> ?</font><font color="blue">&gt;</font></font><font face="Courier New"><font color="black"> <br></font><font color="blue">&lt;</font><font color="maroon">OpenSearchDescription</font><font color="red"> xmlns</font><font color="blue">="http://a9.com/-/spec/opensearch/1.1/"&gt;</font></font><font color="black"><br><font face="Courier New">  </font></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">ShortName</font><font color="blue">&gt;</font><font color="black">Kartones.Net</font><font color="blue">&lt;/</font><font color="maroon">ShortName</font><font color="blue">&gt;</font></font><font face="Courier New"><font color="black"> <br>  </font><font color="blue">&lt;</font><font color="maroon">Description</font><font color="blue">&gt;</font><font color="black">Kartones.Net Search Engine</font><font color="blue">&lt;/</font><font color="maroon">Description</font><font color="blue">&gt;</font></font><font face="Courier New"><font color="black"> <br>  </font><font color="blue">&lt;</font><font color="maroon">Tags</font><font color="blue">&gt;</font><font color="black">Kartones Blog Blogs Community Development .NET C# Java ASP.NET Hardware</font><font color="blue">&lt;/</font><font color="maroon">Tags</font><font color="blue">&gt;</font></font><font color="black"><br><font face="Courier New">  </font></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Contact</font><font color="blue">&gt;</font><font color="black">admin@kartones.net</font><font color="blue">&lt;/</font><font color="maroon">Contact</font><font color="blue">&gt;</font></font><font color="black"><br><font face="Courier New">  </font></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Image</font><font color="red"> height</font><font color="blue">="16"</font><font color="red"> width</font><font color="blue">="16"</font><font color="red"> type</font><font color="blue">="image/x-icon"&gt;</font><font color="black">//kartones.net/favicon.ico</font><font color="blue">&lt;/</font><font color="maroon">Image</font><font color="blue">&gt;</font></font><font color="black"><br><font face="Courier New">  </font></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Developer</font><font color="blue">&gt;</font><font color="black">Kartones</font><font color="blue">&lt;/</font><font color="maroon">Developer</font><font color="blue">&gt;</font></font><font color="black"><br><font face="Courier New">  </font></font><font face="Courier New"><font color="blue">&lt;</font><font color="maroon">InputEncoding</font><font color="blue">&gt;</font><font color="black">UTF-8</font><font color="blue">&lt;/</font><font color="maroon">InputEncoding</font><font color="blue">&gt;</font></font><font face="Courier New"><font color="black"> <br>  </font><font color="blue">&lt;</font><font color="maroon">Url</font><font color="red"> type</font><font color="blue">="text/html"</font><font color="red"> template</font><font color="blue">="https://duckduckgo.com/?q={searchTerms}+site%3Ablog.kartones.net"</font><font color="red"> </font></font><font face="Courier New"><font color="blue">/&gt;<br>&lt;/</font><font color="maroon">OpenSearchDescription</font><font color="blue">&gt;</font><font color="black"></font></font></p> <p>Once again, we have to setup some info: </p> <ul> <li>Short name (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">ShortName</font><font color="blue">&gt;</font></font>)</li> <li>Description (<font color="blue">&lt;</font><font color="maroon">Description</font><font color="blue">&gt;</font>)</li> <li>Few tags about the site (<font color="blue">&lt;</font><font color="maroon">Tags</font><font color="blue">&gt;</font>)</li> <li>A contact email (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Contact</font><font color="blue">&gt;</font></font>)</li> <li>An image (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Image<font color="blue">&gt;</font></font></font>, this time can be a favicon and there's no need to base-64 encode it)</li> <li>Name of the developer/author (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">Developer</font><font color="blue">&gt;</font></font>)</li> <li>Input encoding (<font face="Courier New"><font color="blue">&lt;</font><font color="maroon">InputEncoding</font><font color="blue">&gt;</font></font>)</li> <li>Search URL, including the earch terms (<font color="blue">&lt;</font><font color="maroon">Url<font color="blue">&gt;</font></font>, again <font color="#0000ff" face="Courier New">{searchTerms}</font> will contain our typed search)</li></ul> <p>Very straighforward too, no need for explanations.</p> <p>Here's another screenshot of the search engine added to my IE7:</p> <p> </p> <p><img src="https://images.kartones.net/posts/screenshots/ie7_custom_searchprovider.png"></p> <p>And that's all, I've created two different XMLs because I didn't wanted to spend too much time, probably with more patience could be merged into a single one valid for both browsers (I haven't tried either adding the IE7 one in FFox).</p>
