Accelerators are a new feature in Internet Explorer 8 that help you do routine tasks like searching, email, blogging, etc. right from the contextual menu of your IE 8 browser.

For instance, you can select an address on a web page, right click and preview the location directly on a pop-up map without having to copy-paste that address on a separate mapping website. Check the Internet Explorer Gallery for a list of useful Accelerators that you may add to your IE 8 browser.

ie8 accelerator screenshot

How to Create an IE 8 Accelerator

Let’s write an Accelerator that will allow people to search your website(s) directly from the contextual menu in Internet Explorer 8. I will try to keep this simple but you may refer to MSDN Library for technical details.

So let’s get started. The default HTML code of a search box inside any website (see example) looks something like this:

  1: <form action="http://www.google.com/cse">
  2:  <input type="hidden" name="cx" value="010722013183089041389:nu0knrjwib8" />
  3:  <input type="text" name="q" size="28" />
  4: </form>

To convert this HTML search box into an IE8 Accelerator, open Notepad and copy paste the following code into your text editor. You may have to edit the homepage URL of your search engine (Line 3), the Accelerator name (Line 5), location of the favicon image (Line 6) and the form search parameters (Line 10-12).

  1: <?xml version="1.0" encoding="UTF-8"?>
  2: <openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  3:   <homepageUrl>http://www.google.com/cse</homepageUrl>
  4:   <display>
  5:     <name>Search Digital Inspiration</name>
  6:     <icon>http://search.labnol.org/favicon.ico</icon>
  7:   </display>
  8:   <activity category="Search">
  9:     <activityAction context="selection">
 10:       <execute action="http://www.google.com/cse">
 11:         <parameter name="q" value="{selection}" type="text" />
 12:         <parameter name="cx" value="010722013183089041389:nu0knrjwib8" type="text" />
 13:       </execute>
 14:     </activityAction>
 15:   </activity>
 16: </openServiceDescription>

*The {selection} value on Line 11 refers to the text that you may highlight on a web page before performing the search.

Now save this text file with a .xml extension and upload it to your web server (see example). Congratulations! Your first IE 8 Web Accelerator is ready.

Add an IE8 Accelerator Installation Button

Now that your IE 8 accelerator is ready for serving, let’s add a button (or hyperlink) to our website that help enable IE8 users to install our accelerator into their browsers.

Text Link:

<a href="javascript:window.external.AddService('http://example.com/search.xml')">Install Accelerator</a>

Live example -  Install Digital Inspiration Search Accelerator

HTML Button:

<button onclick="window.external.AddService('http://example.com/search.xml')">Add Search Accelerator</button>

Write an IE 8 Accelerator with Auto-Preview

What you just saw is a plain vanilla Accelerator where you highlight text on a page and it turns that selection into a search query. You can easily do that with bookmarklets so why install an Accelerator.

A very cool feature of Accelerators is auto-preview that is displayed when you hover the mouse over the accelerator name. This is handy for translating a phrase, for word meanings and so. Watch this screencast video or install the translate accelerator to understand how in-place view works.

The preview feature inside IE 8 accelerator works like this – you pass the document URL, selected text and other values from IE 8 to an external script via the GET or POST method. The script parses these URL parameters and renders the results in an HTML web page that is then displayed inside IE 8 in a 320×240 pop-up window.

That connection between the script and IE8 is made possible via the <preview> node in your accelerator – see source code.

<preview action="http://example.com/translate.php?text={selection}" />

The translate.php script takes the highlighted text, auto-detects the language and translates the selection to English using the Google Translate API. Here’s the full code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Translate to English</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load("language", "1");
  function initialize() {
    google.language.translate("<?php echo $_GET['text']; ?>", "", "en", function(result) {
     if (!result.error) {
       var container = document.getElementById("translation");
       container.innerHTML = result.translation;
     } });
    }
   google.setOnLoadCallback(initialize);
  </script>
</head><body>
 <div id="translation"></div>
</body></html>

You may replace "en" with "hi" to auto-translate selected text into Hindi, "de" for German, "fr" for French and so on.

Related: How to write Web Slices for IE 8