Creating a custom accelerator for internet explorer 8

  • Article

Internet Explorer 8 is expected to be available in the near future. It packs a whole lot of features. I downloaded the latest RC1 build from the Microsoft site and did some testing. This version packs in a whole lot of browser extensibility features besides many other CSS improvements.

One of the extensibility features is Accelerators. Accelerators allow users to quickly send information to a web service and get back some information. For example, you may be browsing a web page and came across a word for which you want to lookup the meaning. This is one of the scenarios where you can use accelerators. Websites can offer to install Accelerators as part of their service. A end user can then install Accelerators of his choice and just highlight a word on the web page and then select an Accelerator to use from a list of installed Accelerators. Internally, Internet Explorer 8 sends the highlighted text as a parameter to the selected Web Service and opens a new Internet Explorer Window OR a preview window where you can see the results.

So, how do you create a new accelerator for your website? It’s really simple! Here’s how to create one.

Step 1: Offer to install the Accelerator from your web page. For example, in your web page, add the following:

    1: <h1>Dictionary Lookup Accelerator</h1>

    2: <button onclick="window.external.AddService('https://www.mysite.com/dictionary.xml')"></button>

So what is window.external.AddService() method? That’s one of the new extensibility API in IE 8. More information is here

Step 2: Create your Accelerator definition XML file.

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

    2: <openServiceDescription xmlns="https://www.microsoft.com/schemas/openservicedescription/1.0">

    3:     <homepageUrl>https://www.mysite.com/HomePage.asp</homepageUrl>

    4:     <display>

    5:         <name>Lookup in Dictionary</name>

    6:     </display>

    7:     <activity category="Define">

    8:         <activityAction context="selection">

    9:                 <preview method="post" action="https://www.mysite.com/Dictionary.asp">

   10:                     <parameter name="txtSearchFor" value="{selection}" type="text" />

   11:                 </preview>

   12:                 <execute method="post" action="https://www.mysite.com/Dictionary.asp">

   13:                     <parameter name="txtSearchFor" value="{selection}" type="text" />

   14:                 </execute>

   15:         </activityAction>

   16:     </activity>

   17: </openServiceDescription>

The XML file we just created is called the service description file and it contains specific description about the service provider and type of service it provides.

The first 2 lines define the OpenServiceFormat using the xml file version and the namespace. The namespace merely defines all elements in this specification. These lines must be in there.

The <homepageUrl> property : Defines the home page of the service provider. This domain name value must match the other URLs defined in this XML file, or you will get an error when Internet Explorer 8 attempts to install the accelerator. This is to avoid spoofing.

The <display> element : Defines the text that is presented to the user when they attempt to install the accelerator. A popup window appears on the browser that shows information about the type of Accelerator. This is where you provide that information. There can be only one definition of display element in the XML file.

The <name> element : The child of display element & contains the name of the service. There can only be one instance of this element in the XML file and the number of characters cannot exceed 50.

You can add 2 more child elements under the display element : 

  • <icon>URL</icon> – Holds the URL to the icon associated with the service.
  • <description>Your accelerator description</description> – Holds the description about the service.

The next section describes the Accelerator and its capabilities

The <activity> element : Describes the activities of this accelerator. The category attribute defines what the category of the accelerator such as Search, Map, Define. You can define your own category but there must be only one instance of this element.

The <activityAction> element : Child of <activity> element. This section defines information that is specific to a context of the activity using a context attribute. The context attribute indicates on what the accelerator should act upon. It can be one of the following values:

  • Selection (default) – The text selected by the user.
  • Document – The entire document.
  • Link – The URL, if selected by the user.

The <preview> element : Child of <activityAction> element. You can preview the information without opening the site. Internet Explorer 8 will open a box where you can preview the information without actually opening the web page. The preview element defines the action for preview. In the above example, we asked it to post the information to a specific web service URL – dictionary.asp using the action attribute. This is similar to the action attribute in a web page. The method attribute is self explanatory.

The <parameter> element : Child of <preview> or <execute> element. The <parameter> element defines the name and values you want to pass to the URL when executing a preview or execute. This is the posted data to the service. If you are not sure what the parameter names are for a service, such as live search or Encarta dictionary, you can use Fiddler to figure it out. The {selection} is like a variable. It will be replaced by the user selected value when invoking the web service. The Type defines the parameter data type.

The <execute> element : This element defines the action to take upon executing the accelerator. Typically this opens a new instance of the browser and displays the results using the posted data.

If you want to get started quickly, simply copy the XML from above and modify the parameters and use it. If you don’t yet have a site or IIS, simply download and install Visual Web Developer from here. Then

  • Create a new ASP.net website using File System option.
  • Create a new HTML file and paste the HTML above.
  • Create the XML file with the desired parameters.
  • Press CTRL + F5 to run your web page and install the Accelerator.
  • You can then use it with any website out there.

Isn’t it simple and really cool feature?

That’s it for now. Hope you will have fun creating your own accelerators and improve your browsing experience.