How to build a Simple IE8 Accelerator
How to build a Simple IE8 Accelerator
This post is a step by step guide for building IE8 Accelerators.
A Short Introduction to IE8 Accelerators
Accelerators are used to make the user more productive while surfing the net, by:
1. Speeding up the process of getting additional information about a meaningful string (address, stock quote, a product, a twitter account name, etc). In this sample
2. Allowing user to perform a quick action on a selected text.
From a technical perspective, Accelerators define 2 actions: Preview and Execute. When the user selects some text and hover over an accelerator, the Preview action is being performed - the selected text is sent to a defined url, that returns a 320x240 web page with a preview of the data.
When the user clicks the Accelerator, the Execute action is performed and the browser navigates to a page passing it the selected text as a parameter.
To build IE8 Accelerators, we have several steps to do:
- Building an Accelerator Page
- Defining the Accelerator OpenService Xml
- Registering the Accelerator with IE8
- Using the Accelerator
To make sure this guide is generic enough for every Accelerator you may think of and not just for Twitter profiles, I am leaving the twitter logic to the last part of this post.
1. Building an Accelerator Page
Create a new ASP.Net Web Application in Visual Studio 2008 or open an existing one.
Add a new Web Form for the Accelerator Preview. In the page code behind, extract the query string parameters write them to the Response object:
protected void Page_Load(object sender, EventArgs e)
{
foreach (string param in Request.QueryString.AllKeys)
{
Response.Write(param + " = " + Request.QueryString[param] + "<br />");
}
}
Test the page: Navigate to the accelerator’s url, and add several parameters. For example:
http://localhost:16319/ShowTwitterUser.aspx?data1=guy&data2=burstein
Defining the Accelerator OpenService Xml
In order to register the Accelerator with a user’s browser, we have to create an xml file with the details of the Accelerator.
Add an Xml file to the web application that defines the Accelerators metadata required by the browser.
<openServiceDescription
xmlns=http://www.microsoft.com/schemas/openservicedescription/1.0>
<homepageUrl>http://www.bursteg.net/</homepageUrl>
<display>
<name>Twitter Profile Accelerator</name>
<icon>http://www.twitter.com/favicon.ico</icon>
</display>
<activity category="Define">
<activityAction context="selection">
<preview action="http://www.bursteg.net/Twitter/ShowTwitterUser.aspx">
<parameter name="selection" value="{selection}" />
</preview>
<execute action="http://www.bursteg.net/Twitter/ShowTwitterUser.aspx">
<parameter name="documentUrl" value="{documentUrl}" />
<parameter name="documentTitle" value="{documentTitle}" />
<parameter name="documentDomain" value="{documentDomain}" />
<parameter name="documentHost" value="{documentHost}" />
<parameter name="selection" value="{selection}" />
</execute>
</activityAction>
</activity>
</openServiceDescription>
Few things to notice in the Accelerator Xml:
1. There is some meta data about the accelerator such as homepage Url and the display name and icon.
2. The Activity node defines a category to which this accelerator belongs to. There are some default categories like Map, Translate, Blog etc, but users can manage their categories using the Manage Add-ons Dialog.
3. As described earlier, the accelerator defines 2 actions, preview and execute, each defines a Url to call to when clicked / previewed, and several parameters to pass to the target page.
Register the Accelerator with the User’s Browser
In a page of your chose (for example Default.aspx) add a button that registers the accelerator when clicked:
<input id="btnRegister" type="button" value="Add Accelerator to IE8"
onclick="BLOCKED SCRIPTwindow.external.AddService('TwitterProfileAccelerator.xml');" />
When the user clicks on the above button, a dialog pops us asking his permission to add this accelerator to his browser, and whether to make it the default accelerator in its category.
Using the Accelerator
After the user has added the accelerator to his browser he can start using it. Select some text and the accelerator box will appear next to it. Click on it add hover over the new accelerator. This should make an HTTP request to the accelerator page passing it the text you have selected.
If you click on the accelerator, IE8 will open the target page in a new tab passing it the selected text and additional information as defined in the accelerator xml.
Summary
In this pot I took the steps needed to build an accelerator. You can follow them you build your own accelerators and add additional logic to provide more interaction with your uses.
Enjoy!