Creating add-ons for IE 10 in VS 2012 using C#, VB.NET

Internet Explorer (IE) 10 is the next version of Internet Explorer from Microsoft. On Windows 8 you will have two different flavours of user interfaces; one is the traditional desktop browser application and the other a new Metro app.

In an effort to provide a faster, more reliable and safer browsing experience Microsoft does unfortunately not allow any add-ons for the Metro edition of Internet Explorer, however as with previous versions of Internet Explorer, the desktop edition of IE10 does supports add-ins.

In this post I’ll walk you through creating a simple IE 10 plug-in using Add-in Express for Internet Explorer version 8.

Hands on with Visual Studio 2012 and Add-in Express for IE

We’ll be using Visual Studio 2012 RC and the latest release of Add-in Express for Internet Explorer and .net. Start by creating a new IE Add-on project in Visual Studio 2012. You’ll find the project template under Other Project Types > Extensibility.

With Add-in Express for Internet Explorer you can create extensions for Internet Explorer 6 right up to the latest version, IE 10. We’ll focus on IE10 in this article, so we’ll select it from the Minimum supported Internet Explorer version drop-down list.

In the last step of the wizard you can choose to either generate a new strong name key file or use an existing one and click Finish to complete the New Internet Explorer Add-on project creation wizard.

Double-click on IEModule.cs in the Visual Studio Solution Explorer in order to open its designer surface.

If you’ve used Add-in Express for Internet Explorer in the past you’ll notice that the icons in the designer toolbar has gone metro!

Creating your own Advanced Explorer Bar for IE 10

We’ll create a fairly simple IE add-on that automatically populates certain fields in an html form and we’ll use an IE Advanced bar to give the user a UI with which they can specify what values to use when populating the html form.

To do this, add a new ADX IE Advanced Bar item to your project.

The design of our IE Bar should resemble the following:

Add the following code to the Save button’s Click event:

private void btnSave_Click(object sender, EventArgs e)
{
   Properties.Settings.Default.Name = txtName.Text;
   Properties.Settings.Default.Email = txtEmail.Text;
}

The code above assumes you’ve added two properties to your applications’ default settings.

Save the design and switch back to the IEModule designer and add a new ADXIEAdvancedBarsManager component to the designer surface.

Add a new Advanced bar item to the Advanced Bars Manager components by clicking on the ellipses(…) button next to its Bars property in the Visual Studio properties window.

Add a new item and set its BarType property to the Advance Bar item we’ve added earlier and its MenuText property to My Auto Form Populator.

Adding a custom item to the IE Command Bar

Next, we will add a button to the IE Command Bar which will auto-populate any html form fields and specify our name and e-mail on our IE Bar, when clicked.

To do this, click on the Edit Command Items button on the IEModule designer toolbar.

Add a new item to the collection and set its ActiveIcon and Caption properties.

Switch back to the IEModule designer surface and generate a new event handler for the OnConnect event by double clicking next to its name in the properties window.

We need to handle the OnClick event of the command item we’ve added earlier, to do this add the following code to the OnConnect event handler:

private void IEModule_OnConnect(object sender, int threadId)
{
  adxieCommandItem1.OnClick += adxieCommandItem1_OnClick;
}

To populate the form fields add the following to the Command Item’s OnClick event handler:

void adxieCommandItem1_OnClick(object sender, object htmlDoc)
{
    mshtml.IHTMLElementCollection inputCollection =
		(mshtml.IHTMLElementCollection)this.HTMLDocument.getElementsByTagName("input");
    foreach (mshtml.IHTMLElement element in inputCollection)
    {
        if (element.id != null)
        {
            if (element.id.ToLower().Contains("name"))
            {
                element.setAttribute("value", Properties.Settings.Default.Name);
            }
            if (element.id.ToLower().Contains("email"))
            {
                element.setAttribute("value", Properties.Settings.Default.Email);
            }
        }
    }
}

This code will scan all the input tags in the html document and if their ids’ contain the word ‘name’ or ’email’ it will automatically fill in the values we’ve specified on our IE Bar.

When you build, register and run your IE 10 addon project, Internet Explorer will have an Explorer Bar and your custom item on the IE Command Bar.

Thank you for reading. Until next time, keep coding!

Available downloads:

This sample add-on was developed using Add-in Express for Internet Explorer and .net:
Sample IE 10 add-on in C#