Creating Internet Explorer add-on in C#, VB.NET, C++. How to
build IE toolbars, custom explorer bar, context menu items.

Video HowTo - Create Internet Explorer add-on step-by-step

Add-in Express™
for Internet Explorer® and Microsoft® .net

Add-in Express and Internet Explorer

Add-in Express makes Internet Explorer add-on development quick and easy. It implements everything required by the IE API; you focus on the application code only. Using visual designers of Add-in Express you can add a custom button to the IE toolbar, build a custom Explorer bar, context menu item, or a pop-up item, or add a command to the Internet Explorer interface with a few clicks. Just follow the steps below and you will see that the development of Internet Explorer plug-ins with Add-in Express can be something you can enjoy. You may want to download a sample Internet Explorer add-on with the source code.

1. Create a new Internet Explorer add-on solution

In your Visual Studio IDE, run the Add-in Express IE Add-on wizard located in the "Other Projects | Extensibility Projects" item of the "New Project" dialog box.

IE add-on project wizard in Visual Studio

Then choose the programming language for your add-on solution (it is VB.NET in our Browser extension project; but Visual C#, C++ and Delphi Prism are also available) and click Finish.

IE add-on project settings

The wizard creates an Internet Explorer add-on solution that consists of two projects: the add-on project itself and its setup project used for add-on deployment.

2. The IE Module

The main element of the Internet Explorer add-on project is the IE Module, it is the "heart" of your add-on (see the picture below).

First, the IE Module is a descendant of the ADXIEModule class - the ancestor of any IE add-on - that implements required COM-interfaces, registration and deployment features, etc.  In addition, the IE Module serves as a container for any other components such as datasets and data binding sources. You can also add the Keyboard Shortcut component using the context menu of the module's designer window. Finally, you concentrate your work around this module since it is a browser helper object that provides "access points" for handling Internet Explorer objects. All in all, this RAD module is the place where your write your applied code.

IE module designer

Several IE Module properties available at design-time are important for you, namely:

  • Commands - a collection of commands you add to Internet Explorer.
  • ContextMenu - a collection of pop-up menu items for all IE context.
  • Bars - each item of this collection registers the specified control (a descendant of UserControl) as a custom Explorer bar.
  • Toolbars - Bars - each item of this collection registers the specified control (a descendant of UserControl) as a custom IE toolbar.
  • HandleShortcuts - enables custom keyboard shortcuts for your add-on.
  • LoadBehavior - loads your add-on at IE startup or on demand.

3. Adding custom commands in Internet Explorer

To add a custom command to the IE user interface, you use the Commands collection of the IE Module.

Creating a command for IE

Its visual designer allows you to add and sort out your custom commands and customize their properties at design-time. The properties are:

  • ActiveIcon and InactiveIcon - active and inactive command icons; the icons must be located in the Resources folder of your add-on project;  these properties are required if ShowInToolbar is true.
  • Caption - the caption text for your command.
  • HelpText - the help text for your command.
  • ShowInMenu - shows your command in the Tools or Help menu of Internet Explorer or disables your command display.
  • ShowInToolbar - places your command on the built-in toolbar of Internet Explorer.

The properties suggest that a command can be shown in the Internet Explorer toolbar and / or in the IE menu:

  • To show the command on the built-in IE toolbar, set the ShowInToolBar property to True. Note that the ActiveIcon and InactiveIcon properties are required in this case. That's why Add-in Express for IE provides two sample icons when generating an IE add-on project; you can find them in the Resources folder of your project.
  • To show the command in the IE menu, you use the ShowInMenu property; it provides Tools, Help and Don't Show self-explanatory values.

The only event provided by the command is OnClick.

4. Building custom context menu items in IE

To add a custom context menu item to some or all Internet Explorer context menus (pop-up menus), you use the ContextMenu collection of your IE Module.

Creating a context menu item

The visual designer of the ContextMenu collection (see the picture above) allows you to add new context menu items at design-time. For every item, you specify the caption and contexts in which the context menu item will be shown.

The only event provided by the context menu command is OnClick.

5. Creating custom IE toolbars

Add-in Express for Internet Explorer contains a special component that you use to build a custom Internet Explorer toolbar. The first step to add a custom toolbar to IE is to add an instance of the component to your add-on project; you can find the component in the Add New Item dialog of the add-on project.

IE Toolbar control

This component, of the AddinExpress.IE.ADXIEToolBar type, derived from UserControl is a ready-to-use custom toolbar in Internet Explorer. In its context menu, you can find the Add Keyboard Shortcut command, add the Keyboard Shortcut component to your IE toolbar and make sure that the HandleShortcuts property of the toolbar is set to true (see the picture below). You can add any .NET control onto the toolbar just by using the Toolbox in the Visual Studio IDE.

Designing the IE toolbar

Now, when the toolbar itself is prepared, you go on to the second step: add an item to the ToolBars collection of the IE module, bind the item to the toolbar and set the remaining properties of the item (see below).

Binding the IE toolbar to the add-on

Here are the properties of an AdxieToolBarItem:

  • LoadAtStartUp - when false, the toolbar is not shown; the user has to check the View | Toolbars | %MenuText% item in the IE menu.
  • MenuText - the caption of the item is in the View | Toolbars menu; this menu item controls the visibility of the toolbar.
  • NoGripper - when true, the user cannot change the position of the IE toolbar.
  • Position - there are two values available: Default, when IE decides where to show the toolbar, and NewRow which is self-explanatory, isn't it?
  • Title - if it is a non-empty string, it will be shown on the toolbar.
  • ToolbarType - binds the item to the toolbar component. 

Also note that AddinExpress.IE.ADXIEToolBar provides all IE events, see a complete list of available Internet Explorer events. Event handling is described below.

See also how to add a button and menu item to IE toolbar.

6. Developing custom Explorer bars

The Internet Explorer SDK allows adding custom Explorer bars.  In the IE UI, the menu items that control the visibility of such bars are located in the View | Explorer Bar | %MenuText% menu. With Add-in Express, Internet Explorer bars can be created in two logical steps: you build a bar itself, and then you specify its settings.

To make an Explorer bar, you choose the Add-in Express IE Bar item template in the Add New Item dialog (see the picture below) and click the Add button.  

IE bar (Explorer bar) control

This adds a new class to your IE add-on project. This class, derived from UserControl and named AddinExpress.IE.ADXIEBar, is just an empty Explorer bar. Now, you can use standard Visual Studio tools to create UI and business logics of your Explorer bar. Note that in its context menu, it provides the Add Keyboard Shortcut command; you use the command to add an appropriate component to your bar.

Designing the IE bar control

The final step of creating a custom Explorer bar is to tuning it. You add an item to the Bars collection of the IE module. This item binds the Explorer bar component to a number of settings shown below. The settings allow specifying startup behaviour, docking position, size restrictions and text properties related to the visualization of the Explorer bar: caption, menu title, and text to be shown in the Status bar. They also describe the button associated with the Explorer bar that can be shown on the built-in IE toolbar. The most important property is BarType: it binds the IE bar to the item of the Bars collection. More about creating custom Explorer bars.

Binding the bar control to the add-on

7. Handling Internet Explorer events

Add-in Express for Internet Explorer delivers all Internet Explorer events in the IE module as well as in ADXIEBar and ADXIEToolBar components. Naturally, you use them like you use any other events in .NET: create an event handler and write your code. Note that the list of events contains some IE 7-specific  events; clearly, they will not be triggered when the add-on is loaded by IE 6.

IE module provides all IE events.

IE events are listed and described in WebBrowser Control Events on MSDN.

8. Building, registering and running your Internet Explorer add-on

Close all IE instances and build your IE add-on. If the add-on isn't registered yet, register it (see the Register Add-in Express Project command in the Build menu of the VS IDE). Now you can run Internet Explorer and see your add-on in action.

To debug your add-on, specify iexplore,exe (on my PC it's here: C:\Program Files\Internet Explorer\iexplore.exe) in the Start External Program property of your add-on project and run the project.

9. Deploying your IE add-on

To deploy your add-on, build the setup project and deliver its output to the end-user. Administrative privileges are required for the add-in to install. More about IE add-on deployment.

How to develop a custom IE Toolbar - Flash video