Creating an Add-on for Internet Explorer with Add-In Express

Introduction

For some time I have had a few ideas for Internet Explorer add-ons that I’d like to create.  One of the biggest challenges was with creating the wrapper that is required to encapsulate the executing code.  You could create context menu actions pretty easily through the registry, but you were limited to what you could do via JavaScript.

That being said, I was doing some research to see how I could accomplish this.  Almost immediately I came across Add-In Express which makes a product called Add-In Express for Internet Explorer.  They have a number of products available that help build add-ons around Microsoft Office and Microsoft Internet Explorer.

I thought I’d give it a try, so I sent them an email to see about getting an evaluation copy.  Within a couple of days they provided me with an evaluation key good for 45 days. 

This would be enough time for me to kick around the product a bit and see how easy they made it to create a add-on for Internet Express.

Test Project: Instapaper Add-on for Internet Explorer

Have you heard of Instapaper?  Instapaper is this cool “project” founded by Marco Arment.  The idea behind Instapaper is that you are surfing the web, find a webpage that you like and you want to bookmark it for later review.  This is really handy if you’re catching up on your Twitter feed and come across a link you want to visit, you can “send it to Instapaper”, then use an Instapaper application (available for iPhone, Android, and other platforms) to go back and catch-up on the pages you wanted to revisit.  I use this a lot especially when traveling.  I’ll go back to my Instapaper list and read the articles that I didn’t previously have time for, but wanted to review otherwise.  Instapaper also has the option to export your “list” to your Kindle or other eReader device.

When I am on my desktop, and using Internet Explorer, how are you suppose to keep track of things you don’t have time for now, but want to go back and read?  You use Instapaper and my Instapaper Add-on for Internet Explorer!

Installation

A very straight-forward installation process.  Basically during the installer you specify which versions of Visual Studio you want to create add-ons for so it can register it’s templates appropriately.  In my development environment, I use Visual Studio 2010, so I checked that box and continued on allowing the product to finish it’s installation process.

Creating the New Project

Like any other new project in Visual Studio, you select the project type you want to create.  The templates for Add-in Express for Internet Explorer are located under “Other Project Types > Extensibility”.

Once you select that you want to create an Internet Explorer add-on, the Add-in Express Wizard kicks in and asks a few questions about the solution we’re building.  These answers help craft the project that it will create.

Once you clicked Finish, our new project is generated and we’re ready to start creating our add-in.

In addition to the creation of the add-on project, it is creates a customized installation project that you can use to distribute your add-on in all it’s glory.  This is cool and really makes the process that much more smoother.

Writing Code

Next, the majority of our action is going to take place in the IEModule.cs class file.  This is the “core” to our add-on and provides us the access to the objects that we’re going to need to draw information from within Internet Explorer.  The HTML document and all of it’s properties are exposed in the form of an HTMLDocument object which makes accessing the specifics of a webpage so easy!

You can see in my Instapaper project that I have created some additional classes that I am using to communicate with the Instapaper API in addition to a few dialogs in Win Forms.

Creating context menus and other options within the add-on are simplified through the properties dialog boxes.  By defining menus and their properties, events and methods are easily exposed ensuring that even the most novice of developers can create add-ons with little code!

Using the Add-on

Since the project creates the installer for me, the installation is easily executed in the form of an MSI package. 

When I launch Internet Explorer I can use the context menu to customize my options for the add-on.  In this case, in order to save it to my Instapaper account I have specify a username and password.  I also have the option to give me confirmation when the URL is successfully saved to my Instapaper account.  This form allows for the configuration of the Instapaper Add-on.

Once I have configured my settings, I can use the same context menu to capture a webpage to my Instapaper account.  There are two options for capturing.  First, you can send the URL of the current webpage that is being shown in the browser to Instapaper.  Secondly, you can also right-click on a link that exists in a particular webpage and send the link’s destination URL to Instapaper.  Swell!

Can I try the Instapaper Add-on?

I am working on making this add-on available to the general public, but need to add some additional features to the code and complete more testing.  Watch this post for more information on it’s availability.

Add-In Express for Internet Explorer Information

Add-In Express for Internet Explorer is a visual tool to create thread-safe, secure, isolated, deployable and context-sensitive add-ons for Internet Explorer, 6, 7 and 8 in VB.NET, C#, managed C++ and Delphi Prism.

The product current is supported in a number of IDEs including C#, VB.NET, C++ (Visual Studio 2005, 2008, 2010), Delphi Prism 2009/2010.  It current supports Internet Explorer 6,7,8, and soon to be IE9.

There are several different editions available starting at $249 per license.

Conclusion

Add-In Express has made the process of developing add-ons for Internet Explorer so simple.  A developer can create an add-on in little time with minimal development as it pertains to the wrapper.  As a point of reference, from start to functional, it took me about 2 hours to create my Instapaper add-on.  Put your time and thought into your applied code, let Add-In Express handle the integration.