How To Create a Custom IE8 Accelerator

The real IE8 is out! Accelerator is one of the many attractive features that helps get things done faster. It provides immediate in-page access to the services of your choice. This article shows how to build your own IE8 Accelerator.

Getting Things Done Faster

Years ago when I used Skype, I was suprised to see numbers resembling phone numbers on a webpage getting highlighted.



I found it to be an interesting plug (although useless as I don't voice-chat a lot) by Skype to encourage users to make a call directly with it. It was interesting because it reduces the number of steps to make a voice call.

(I later figured out that this functionality was due to the browser extension that Skype had installed automatically.)

The built-in Browser Search Box which is now present in all popular browsers similarly fetches search results with fewer steps. It however has a limitation. It can work only with Search Providers you configure. You cannot however be used directly to map an address, translate a word. That's where IE8 Accelerators come in.

As the official documentation explains:
The new Accelerators in Internet Explorer 8 help you quickly perform your everyday browsing tasks without navigating to other websites to get things done. Simply highlight text from any webpage, and then click on the blue Accelerator icon that appears above your selection to obtain driving directions, translate and define words, email content to others, search with ease, and more. For example, with the "Map with Live Maps" Accelerator in Internet Explorer 8, you can get an in-place view of a map displayed directly on the page.

Building an IE 8 Accelerator is a simple 2 step process -
Step 1: Fill values into a XML template file.
Step 2: Host the Accelerator XML file though an install button.

We will see how to build a custom IE8 Accelerator and a web page for users to access it from.

Background about the custom Accelerator

When I run into web pages with links to PDF or MS Word files, I hate downloading such files without previewing them. I love the PDF / Word to HTML conversion feature that Google Search & GMail offer with the “View as HTML” link whenever you encounter a PDF or Word file in search results or in email attachments. As this facility is not available when you are surfing in the wild, I use an excellent web-based open-source Online viewer from Samuraj Data. You just have to provide a URL of the PDF, PostScript or Word file & the service will convert into HTML for immediate viewing. As the URL of the file to convert is passed as a querystring, this service can also be used programmatically. Let's see how we can utilize this service directly through a customized IE8 Accelerator.

The terse but informative OpenService Accelerators Developer Guide on MSDN has all the detailed info we need to build an Accelerator. The key points mentioned there summarize the theory of Accelerator -
  • Accelerators appear on the right-click shortcut menu of the Web page in Internet Explorer. They are grouped by function so that users can quickly access the task that they want.
  • Accelerators enable two types of scenarios: users can "preview" information without leaving a Web page or "execute" to send content directly to an application or Web service.
  • An XML-based Accelerator uses XML file to describe the format of HTTP requests to the Web server. Data from the target context (selection, link, or document) is passed as variables in URL parameters and/or form data.
  • To install XML-based Accelerators from a Web site, use the window.external.AddService method to prompt the user.


Step 1: Fill values into a XML Accelerator template file

We will adapt  the example in the Guide, of a XML-based Accelerator, describing the interaction between the browser and a mapping service, as a template for our specific requirement.

So here is the original sample -

<?xml version="1.0" encoding="UTF-8"?>
<os:openServiceDescription
    xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <os:homepageUrl>http://maps.example.com</os:homepageUrl>
    <os:display>
        <os:name>Map with MyMap</os:name>
        <os:icon>http://www.example.com/favicon.ico</os:icon>
        <os:description>Map addresses easily with MyMap.</os:description>
    </os:display>
    <os:activity category="Map">
        <os:activityAction context="selection">
            <os:preview action="http://maps.example.com/preview.php?addr={selection}" />
            <os:execute action="http://maps.example.com/" method="get">
                <os:parameter name="addr" value="{selection}" type="text" />
            </os:execute>
        </os:activityAction>
    </os:activity>
</os:openServiceDescription>


and this is the modified XML for our "ViewAsHTML with SamurajData" Accelerator -

<?xml version="1.0" encoding="UTF-8"?>
<os:openServiceDescription
    xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <os:homepageUrl>http://view.samurajdata.se/</os:homepageUrl>
    <os:display>
        <os:name>ViewAsHTML with SamurajData</os:name>
        <os:description>Online viewer for PDF, PostScript and Word</os:description>
    </os:display>
    <os:activity category="convert">
        <os:activityAction context="link">
            <os:execute action="http://view.samurajdata.se/ps.php" method="get">
                <os:parameter name="url" value="{link}" type="text" />
            </os:execute>
        </os:activityAction>
    </os:activity>
</os:openServiceDescription>


To explain what the lines in the XML file mean, I'll paraphrase from a blog entry by Sudeep.

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 are mandatory.

There are 3 main sections following it -
  1. homepageUrl
  2. display
  3. activity
The homepageUrl element 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 is a child of the 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 optional child elements under the display element:
<icon>URL</icon> – Holds the URL of the Favicon associated with the website. This will show up in the context menu. I excluded this line in my version as there is no Favicon for the Online Viewer.
<description>Your Accelerator description</description> – Description for the Accelerator.

The next section describes the Accelerator and its capabilities
The <activity> element contains all of the functionality of an Accelerator. The category attribute describes the type of functionality that the Accelerator offers like Add, Blog, Send, Search, Map, Translate or Define. You can define your own category but there must be only one instance of this element. As Accelerator we are constructing converts from one file format to another we specify the category as "convert"

The <activityAction> element is a required element that specifies the interaction with the service provider based on the target of the Accelerator.  The optional context attribute specifies how the Accelerator will interact with the  service; whether it will act on the  text selected by the user (context="selection"),  the entire document (context="document") or only on links in the webpage (context="link"). As our custom Accelerator will look out for hyperlinks to files which are of PDF or Word format, we specify context="link"

The <preview> element is optional. It is well suited for a Map Accelerator but not for our scenario and therefore ignored.

The optional parameter element defines the name and values you want to pass to the service URL when executing. As the Online viewer service that we are trying to customize uses the "url" querystring to submit the file to convert to HTML through HTTP "GET" method, we set the parameter's name attribute as "url" and  value attribute as "{link}". The value attribute represents an Accelerator variable.

The <execute> 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.

Step 2: Host the Accelerator XML file though an install button

Typically, users can install Accelerators from the Internet Explorer 8 Service Gallery or through any Web site that advertises them. Place the following line of code into any web page though which you want to invite interested users to try out your custom Accelerator

<button id="myButton"
    onclick="window.external.AddService('http://www.example.com/samurajdata.xml')">
    ViewAsHTML with SamurajData</button>


Replace the URL of the custom Accelerator XML file within the AddService method.

Try it!

Install the custom "ViewAsHTML with SamurajData" IE8 Accelerator by visiting my Code Gallery page that hosts that Accelerator by clicking on the Install button.




After you approve and Add the Accelerator you will receive a confirmation that it is successfully added.




Once you have installed the custom IE8 Accelerator, you will see the "ViewAsHTML with SamurajData" option in the context menu directly if you set it as default for that category or you may have to go to the "All Accelerator" option in the same context menu & choose the "ViewAsHTML with SamurajData" from there. Click on the example PDF link in the Accelerator hosting page or choose any PDF or Word file link to view it in HTML format.



Accelerators are easy to create, test, and deploy to users. They provide quick access to a service from any webpage and help get things done faster.
By mv ark   Popularity  (10710 Views)
Picture
Biography - mv ark
M.V. 'Anil' Radhakrishna is a seasoned developer who enjoys working with Microsoft tools & technologies. He blogs his little discoveries and about Web development tips, tricks and trivia quite regularly. You can find some of his unusual code samples & snippets at his Code Gallery.