It’s For-IE-day: Week 5
Last week when I wrote about some of the new search capabilities in IE8, I touched on the accelerator feature in IE8, since each search provider is by default installed as an accelerator. Today, we’ll talk about how to build custom accelerators to take additional actions like mapping, blogging, or finding the definition of a word.
Prior to IE8 Beta 2 what we now call accelerators were called activities, and I’m pretty happy with the name change, because they truly do accelerate tasks we do all the time – like cutting and pasting an address from one page into another, say Live Maps, to get directions.
Here’s a registration page for our upcoming Northeast Roadshow. When I select the address, I get a visual cue (the blue-box with arrow) that there’s an accelerator available. Clicking this yields the list of accelerators, and I can now highlight the Map with Live Search option to get a map overlay, as part of what’s known the preview action. If I actually click the menu item, I’ll get a new page at maps.live.com with the address populated; this is what’s known as executing the accelerator.
At its core, an accelerator is a web service that is invoked via the standard HTTP methods of GET or PUT, possibly passing in some input parameters. For instance, when I selected the address text and hovered over Map with Live Search above, IE called out to a page at maps.live.com and passed in the currently selected text as a query parameter. The request sent by IE looked something like this:
GET /geotager.aspx?b=45+Commerce+Drive+Augusta+Maine+&
clean=true&w=320&h=240&client=ie&format=full HTTP/1.1
Accept: */*
Accept-Language: en-us
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; Trident/4.0; …
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: maps.live.com
The result of that request is what provides the preview map on the page. Likewise, if I actually click the Map with Live Search menu item, IE will issue a slightly different HTTP GET request, one that will actually bring up the default Live Search Maps site in a separate tab with my address already entered.
Building a URL Shrinking Accelerator
So to get an idea of how all this works, let’s build an accelerator from scratch. Now a task I seem to do a lot when preparing presentations is creating tiny URLs for reference links in my PowerPoint slides. Tiny URLs are obviously much shorter and therefore quicker and less error-prone to transcribe if folks are taking notes.
On my end though, it’s just like a tedious map look up; I’m looking at the page I want to reference, but then I have to open another site like tinyurl.com or is.gd, paste the URL in, get the result, then copy and paste that into my slides. It sure would be nice to just right click on the page and have an option that shrinks the URL, perhaps creates a nice anchor, and then puts it in the clipboard so I can Ctrl-V it into my PowerPoint slide. So that’s our goal, and in getting there we should touch on most of what makes accelerators tick.
Defining the Accelerator
The definition of an accelerator is contained in a XML file that uses OpenService Description Format… hmm, sounds a lot like OpenSearch Description format that we discussed last week, and it is. The OpenService Description Format includes a number of components, including
homepageURL– the homepage of the service providerdisplay– what the user sees in IE as the menu text (<name>) and icon (<icon>) for the acceleratoractivity– essentially what the accelerator does, including what service is consulted for the preview action and what service (or page) is displayed for the execute action. Actions are applied to contexts, so an accelerator might be available only if text is selected on the page, or the accelerator might apply to the entire document or just a link selected on the page.
Now we need to come up with an XML document that will describe our URL shrinking accelerator. There’s a number of services out there that will compress URLs, but I’ll use tinyurl.com here (for a reason that will be come clear later). TinyURL actually has an API, but it’s not all that discoverable from their site. A quick Live Search reveals that it amounts to a simple HTTP GET request passing the URL to be shrunk as a parameter called url.
So, for instance, to get a tiny URL of my blog, you’d issue the following HTTP request (which you can actually do just by pasting in your browser’s URL field):
https://tinyurl.com/api-create.php?url=https://blogs.msdn.com/jimoneil
When I do that, I get the following, which is exactly what I’m looking for!
Next, we need to build up our OpenService Description File to make that GET request, passing in the URL of the current page (since we’re presuming that page contains the content to be referenced in my presentation).
Here’s the XML, with a more-or-less line by line explanation below it.
1: <?xml version="1.0" encoding="UTF-8"?>
2: <openServiceDescription
xmlns="https://www.microsoft.com/schemas/openservicedescription/1.0">
3: <homepageUrl>https://tinyurl.com</homepageUrl>
4: <display>
5: <name>Shrink with TinyURL</name>
6: </display>
7: <activity category="Shrink">
8: <activityAction context="document">
9: <preview
action="https://tinyurl.com/api-create.php?url={documentUrl}" />
10: <execute method="post"
action="https://tinyurl.com/create.php">
11: <parameter name="url" value="{documentUrl}" type="text" />
12: </execute>
13: </activityAction>
14: </activity>
15: </openServiceDescription>
The top level element in the document (line 2) is the openServiceDescription which points to the schema for the namespace.
homepageURL on line 3 provides the host of the service, and in line 4 is the display element which provides the text we’ll see in the IE Accelerator menu. (I didn’t provide an icon here). Best practice is to use a name of the format “verb with service name,” where verb indicates the general service category, like Search, Blog, Translate, etc. The category defines the organization of the accelerators in the menu and in the Manage Add-ons dialog in IE.
In line 7, I define the activity and assign it a category of Shrink, which is a new custom category, since none of the built-in ones seemed to fit the bill.
Within the activity can be multiple actions, where each action can have a different context. My particular accelerator applies to the current document (line 8), but you can see where I might also want my accelerator to shrink a specific link I’ve selected within the page. For that, I’d add another activityAction and use a context of link. The other context value is selection, which we saw in action with the Map with Live Search functionality at the beginning of this post.
An activityAction can have a preview and an execute. The optional preview provides the floating display as you hover over the accelerator menu item in IE. It’s designed for a quick preview and has definite size constraints (320 pixels wide and 240 high), so you typically won’t want to cram a lot of information in there, or add controls that would require scrolling.
For the preview (line 9), we use the API URL I mentioned earlier, and we can pass it some information from the context. Here, we pass {documentURL}, which is the URL of the page we’re currently viewing in the browser. Different contexts (document, selection, link) enable different variables, the list of which can be found in the OpenService Format Specification.
The execute action (line 10) refers to what happens when we select the accelerator menu item (versus just hover over it). So, here, we’ll mimic the actions a user would take directly on the TinyURL site by sending an HTTP POST operation with the URL parameter passed as a form variable (hence the parameter definition on line 11). The result of the execute action will be a new tab page in IE that shows the TinyURL result page with our shrunken URL.
Installing the Accelerator
To get the accelerator to your users, you need to provide a tiny bit of JavaScript, just as we did to install the Search Provider last week. So, for example, the following bit of markup will put a button on your page that when pressed will prompt the user to install the accelerator. (Ignore the seemingly odd file name; that URL does indeed point to the XML document hosted on my blog site.)
<input type="button" Value="Add TinyURL Accelerator" onclick='window.external.AddService("https://blogs.msdn.com/jimoneil/attachment/9583410.ashx");' >
And here’s the button that will do just that:
There’s also a isServiceInstalled method on the window.external object, so you can check if it’s already there and then not include the redundant link to install.
Previewing the Accelerator
Now that the accelerator is installed (and if you pressed the button above, it should be), you’ll see the option “Shrink with TinyURL” under All Accelerators on your IE8 context menu. For instance, here you can see the shrunken URL for last week’s post in the preview for the accelerator.
Granted, it doesn’t look like much, but the URL https://tinyurl.com/dbj8lb definitely goes to the right place.
What I really wanted to be able to do here is cut-and-paste this text (or automatically push it to the clipboard) so I could quickly put it in my PowerPoint slide. Unfortunately, while I can select the text, I can’t copy it here. I’m not sure why, but am trying to find out if this is by design. So unfortunately at this point, I’d be relegated to re-keying in the URL in my PowerPoint document… yuk.
Of course, I could add another layer in here, and have my accelerator point to a service that I have created which goes out to TinyURL, gets the shortened URL and then builds a slightly more capable preview with a link (or button) that could provide more functionality and a nicer view. I’ll forego doing that for this exercise.
Executing the Accelerator
The other action is, of course, executing the accelerator, which occurs when you select the associated menu item, versus just hovering over it. What occurs then, as defined in our OpenService Description file, is that we POST a request to tinyurl.com, just as if it had been initiated on the tinyurl.com home page. The result is a new tab in IE with our translated URL… or you might see the following:
TinyURL actually tries to copy the shrunken URL to your clipboard, which is something I want to do, so I’ll Allow access and we end up with the following page, as well as the URL in my clipboard, ready for pasting into PowerPoint!
Now if you’re feeling adventurous, you can set your preferences to automatically allow clipboard access so you’re not met with that prompt. This is configurable via IE’s Tools>Internet Options dialog on the Security tab for whatever zone you’re interested in. Keep in mind that allowing programmatic access may enable a nefarious site to read what’s on your clipboard as well as write to it.
So, this isn’t quite as slick what I had in mind, and now I end up with a new tab in my browser that I really don’t need, but it got me what I wanted in a clunky sort of way. If I were willing to invest some time providing a wrapper service for TinyURL (or whatever other shrink service is out there), I could probably get a better experience.
For what it’s worth, I thought I’d try to game it by making the preview action the same as the execute action. I knew the result would look pretty awful given the size of the preview, but if it prevented a new tab, that might be worth it. Unfortunately, while the action works, I’m not prompted to allow clipboard access, and if I explicitly allow clipboard access, still no joy.
Additional Resources
That should be enough to get you going, but before you re-invent the wheel, keep in mind there’s quite a few accelerators already out there – including one for TinyURL and others for similar services – in the Add-ons Gallery. I didn’t spot one including the preview action that I was hoping for though.
For documentation on configuration of accelerators and the format of the OpenService Description file, refer to the following MSDN articles:
Of course, there’s a number of folks that have blogged on this topic as well and a few Channel 9 videos here:
Let’s see, for next week the likely topic is Web Slices.