Joe Shirey - Writing a simple Internet Explorer Accelerator

Writing a simple Internet Explorer Accelerator

With the release of Internet Explorer 8 (IE8), there is some new functionality that enables a developer to extend the browser pretty easily. One of my particular favorites is the ability to create accelerators. Accelerators allow a user to invoke a service from another site based on the text selected in the current page. Some examples of accelerators that are available by default include:

Take what ever text is selected and search on Bing
Select an address and see the map inline with Bing Maps
Select text in a foreign language and translate it on the fly (below is an on the fly translation from the Al Jazeera site)

It is pretty easy to write your own accelerators for search. In a recent presentation I showed how to write a fairly basic one for searching Stack Overflow. It is just an XML file that describes to the browser how to handle the activity. Here is the code for that particular accelerator:

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://www.stackoverflow.com/</homepageUrl>
<display>
    <name>Search on Stack Overflow</name>
    <icon>http://www.stackoverflow.com/favicon.ico</icon>
</display>
<activity category="Search">
    <activityAction context="selection" >
      <execute method="get" action="http://stackoverflow.com/search?q={selection}" />
    </activityAction>
</activity>
</openServiceDescription>

Let’s take a look at each of the pieces that need to be changed to create a new accelerator. In this example I will write one that will take the selected text and search on weather.com. I think about this as the example where I might have my online itinerary and can select a zip code or city name and be taken directly to where I can see the upcoming weather.

First thing we need to do is change the <homepageUrl> element.

<homepageUrl>http://www.weather.com/</homepageUrl>

Next we need to create the icon/text the use will see when they invoke the accelerator. Note that most sites that use an icon that appears in the browser have their icon stored at the root web under the name favicon.ico, but that isn’t universal – double check to ensure that it is there.

<display>
<name>Check weather on Weather.com</name>
<icon>http://www.weather.com/favicon.ico</icon>
</display>

Finally, we need to give an action for the browser. In this case we will open up a new tab with the search performed. To figure out the URL, I usually do a search on the site and grab the URL. I usually search for the term “selection” which will give me the direct URL. In the case of weather.com we get a URL of

http://www.weather.com/search/enhancedlocalsearch?whatprefs=&what=WeatherLocalUndeclared&lswe=selection&lswa=WeatherLocalUndeclared&from=searchbox_localwx&googleTypeSearch=on&where=selection

I played with the URL a little bit to get rid of any extraneous information and found that the following URL worked also

http://www.weather.com/search/enhancedlocalsearch?where=selection

So the activity section of the XML would be:

<activity category="Search">
    <activityAction context="selection" >
      <execute method="get" action="http://www.weather.com/search/enhancedlocalsearch?where={selection} “/>
    </activityAction>
</activity>

Notice that I have taken the text “selection” and surrounded it with curly braces. This tells IE to replace the text when opening up the URL. So the final XML file for the accelerator would be:

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://www.weather.com/</homepageUrl>
<display>
    <name>Check weather on Weather.com</name>
    <icon>http://www.weather.com/favicon.ico</icon>
</display>
<activity category="Search">
    <activityAction context="selection" >
      <execute method="get" action="http://www.weather.com/search/enhancedlocalsearch?where={selection}”/>
    </activityAction>
</activity>
</openServiceDescription>

Next we need to write an html page that will trigger IE to install the accelerator. This is done by firing a piece of JavaScript that only works on IE8. Here is the simple HTML to fire that JavaScript when a button is pressed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Weather.com Accelerator Install</title>
</head>
<body>
    <p>
         <button id="WeatherButton"
                     onclick="window.external.AddService('http://localhost/Accelerators/Weather/WeatherSearch.xml')">
                     Install Weather.com Accelerator
         </button>
     </p>
</body>
</html>

Note the “window.external.AddService” call. The argument of that method needs to point to the location of the xml file we created above.

If you would like to try out the install experience you can go to the install page on my site. If you would like to download the files we have created above you can find them on my public SkyDrive folder.

4-Sep-2009 11:26 AM