Developer

How do I... Add TechRepublic as a search provider in my Web browser?

The download version of this blog entry contains the sample XML and JavaScript required to complete this project.

In this How do I... tutorial we are going to add TechRepublic as a search provider in both Internet Explorer 7 and Firefox 2. First, we need to create the base XML, which contains the configuration for the search provider. This XML file is in the OpenSearch format, and the sample configuration file we are using contains the elements shown in Table A.

Table A

XML Attribute

XML Attribute Value

ShortName This is the name that appears on the list of Search Providers.
Description This is a longer description of the Search Provider.
URL This is the URL that will be called including the provided search term.
Image This is the small image that will appear in the Search Providers drop-down in browsers, such as Firefox, that support them.
Developer This is the name of the developer(s) who developed the configuration file.
Contact This is the e-mail address of the named developer(s)

An example of the XML file is shown in Listing A.

Listing A

<?xml version="1.0" encoding="UTF-8"?>

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

<ShortName>Web Search</ShortName>

<Description>Example.Com Search Engine</Description>

<Url type="text/html" template="http://example.com/?q={searchTerms}"/>

<Image width="16" height="16">http://example.com/example.png</Image>

<Developer>Example.Com Developers</Developer>

<Contact>developers@example.com</Contact>

</OpenSearchDescription>

In the case of TechRepublic, the search URL, including search terms and searching for search engines, looks something like the following:

http://www.techrepublic.com/search/index.php?q=search+engines&c=1

All we need to do is replace the appearance of the keywords in the sample URL with the replacement variable {searchTerms}. When you execute a search via the search widget, the terms you have entered into the text box are put into the URL in place of this variable. Thus, our complete sample URL would look like the following:

http://www.techrepublic.com/search/index.php?q={searchTerms}&c=1

Adding to the search provider

Now that we have our search URL, we can populate the template XML file shown above with all the details we need to add TechRepublic as a new search provider. As with all XML files, don't forget to ensure that all the special characters, such as the "&" are escaped. Our final XML file will look like Listing B.

Listing B

<?xml version="1.0" encoding="UTF-8"?>

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

<ShortName>Search TechRepublic</ShortName>

<Description>TechRepublic Search Engine</Description>

<Url type="text/html" template="http://www.techrepublic.com/search/index.php?q={searchTerms}&c=1"/>

<Image width="16" height="16">http://www.techrepublic.com/images/favicon.ico</Image>

<Developer>Greg Griffiths</Developer>

<Contact>greg.griffiths@greggriffiths.org</Contact>

</OpenSearchDescription>
Now that we have created the XML configuration file, we need to have some method of presenting this to the user so that they can click on a link and have the search provider added to their list. We do this by using the JavaScript method window.external.AddSearchProvider('<URL>'), which is defined on MSDN (Microsoft Developer Network) and is supported by both Internet Explorer and Firefox. We put this function into a sample page, the source of which is shown Listing C.

Listing C

<html>

<head>

<title>Add Search Engine</title>

</head>

<body>

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

</body>

</html>
Note: You will likely need to change the URL path to the tr.xml file to match your environment. While this code will allow you to add a search provider to either IE7 or Firefox 2, the appearance of the engines within the browser is slightly different. Firefox shows the search providers in a similar way to a Web page's FavIcon. Figure A and Figure B show how IE and Firefox present our new search engine to the end user.

Figure A

Internet Explorer 7

Figure B

Firefox 2

Editor's Picks