Pressing the Red Button

Accelerators in Internet Explorer 8 are a new feature that allows you to select text and perform actions on it (like look up a word, map an address, etc.). This tutorial creates an accelerator that lets you select a song title or artist and listen to the music.

IE 8 Context Menu

Code is included that utilizes a JQuery front-end against a PHP webservice. To get the demo working on your own machine, some familiarity with JQuery and PHP is required.

Try The Demo

If you are using IE8, you can install the demo with this link:

Install “Listen To Music” Accelerator

You will get the message below, check the “Make this my default…”, and click Add.

Add Accelerator Popup

Once you have it installed it, you can select text on a web page and right click to bring up the menu. Hover over “Listen to Music” for a selection of available songs.
contextmenu

Try it out by selecting an artist or title below:

Michael Jackson seems to be popular, and who doesn’t know Thriller.

Once a song is selected, you are forwarded to the GrooveShark site where you can listen to the full song for free.

The Tutorial

Step 1: Set Up Your Development Environment

You will need a web server that runs PHP (Apache or IIS will work). Create a virtual directory called “musiclookup”. Copy all the files included in the tutorial code to the “musiclookup” directory you created. In this demo, we use localhost as the server, if you have another server name, you can manually update the references to localhost in the code.

Step 2: Testing your Environment

Now you have to test that the code works on your own machine and the rest of the steps are a breeze. Test the lookup page by going to:

http://localhost/musiclookup/lookup.html?s=Thriller

If a song list appears, then you are good to go:

This is what should appear when testing your local install.

If you don’t get the song list, there are some troubleshooting tips in the trouble.txt file included in the source.

Step 3: Creating Your Accelerator Installation File

IE Accelerators are installed by reading a specially formatted XML file. We are going use a modified version of the default installation file that Microsoft provides:

<?xml version="1.0" encoding="UTF-8"?>
<os:openServiceDescription
    xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <os:homepageUrl>http://localhost/musiclookup</os:homepageUrl>
    <os:display>
        <os:name>Listen to Music</os:name>
        <os:icon>http://localhost/musiclookup/favicon.ico</os:icon>
        <os:description>Listen to music using GrooveShark's TinySong api.</os:description>
    </os:display>
    <os:activity category="Listen">
        <os:activityAction context="selection">
            <os:preview action="http://localhost/musiclookup/lookup.html?s={selection}" />
            <os:execute action="http://localhost/musiclookup/goto.php" method="get">
                <os:parameter name="s" value="{selection}" type="text" /> 
            </os:execute>
        </os:activityAction>
    </os:activity>
</os:openServiceDescription> 

We’ll start by editing the basic details. Open the file called lookup.xml in the musiclookup folder you created and review the following settings:

• homepageUrl: Modify this url if you used a server other than localhost.
• name: Change the name to “My Music Lookup” (or some other custom name)
• icon: The url of an icon that is displayed in the context menu. You can leave this.
• description: A simple description can be entered here. You can leave this also.

Step 4: Setting up the Preview Action

The preview action is the url that will display the preview page:

<os:preview action="http://localhost/musiclookup/lookup.html?s={selection}" />

We tested the preview page in step 2, so you can use the url here (unless you have a server name). One item to note is the “{selection}” text. This text is replaced with what the user selected when your preview page is displayed. Your preview page can then read this url variable and act on it. More url variables can be found in Micrsoft’s documentation.

Step 5: Setting up the Execute Action

The execute action is the url that you are forwarded to when you click the context menu.:

<os:execute action="http://localhost/musiclookup/goto.php" method="get">
  <os:parameter name="s" value="{selection}" type="text" /> 
</os:execute>

In our case we use a simple php page to redirect to the third party site that plays the music.

Step 6: Testing Your Accelerator

To test your accelerator, you must create a link to install it. A special Microsoft javascript function is used to call your xml file. You can see an example of this in the test.html file in the musiclookup folder:

Here you can test your accelerator.

Once you have it installed, you can select text on your page and see the preview. If you want to make changes to the configuration file, you can reinstall by simply clicking your install link again. You can also manually remove an Accelerator by going to the “Tools -> Manage Add-ons” menu item.

How The JQuery Front End Works:
What is neat about the preview action, is that it brings up a mini page that can run html and javascript like any other page. The preview page is a html page that references JQuery to call the web service and get some simple animation effects.

How the PHP Web Service Works:
The php code calls GrooveShark’s service (tinysong.com). It is a RESTful interface that returns results in plain text. The php code parses the results and reformats them into json to make it easier to use by the front end. The php web service also acts as a proxy because your preview page can not call a web service (tinysong) from another domain.

Making Improvements
There is certainly room for new feature and improvement. The preview page could be modified to include additional information or pull data from additional sources. While Grooveshark does not allow using their music player widgets, other services do (like Amazon, Real Networks or iTunes). The back end could be modified to pull from their web services and listen to the music directly on the preview page (although you don’t get to listen to the full song like you do when going to GrooveShark’s site).

The End
I hope you enjoyed the tutorial and that you get some use out of the accelerator. Feel free to ask any questions or make any suggestions.

Additional Resources

• Microsoft’s Documentation on Accelerators
• GrooveShark
• TinySong API Documentaion
• JQuery
• Parsing REST Results in PHP