Create Internet Explorer add-on: C#, VB.NET, C++. How to
develop IE extension, toolbar, explorer bar, context menu

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

How to create IE add-ons

Add-in Express allows creating plug-ins for all versions of Internet Explorer, from IE 6 to IE 11, and 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 develop an Internet Explorer extension, add a custom button to the IE toolbar, build a custom Explorer bar, context menu item, or a pop-up item and add your command to the Internet Explorer interface with a few clicks. Just follow the steps below and you will see that Internet Explorer plugin development can be something you can enjoy:

• Create an IE add-on solution
• Add a custom command
• Add your own context menu items
• Customize the IE main menu
• Make an IE toolbar
• Develop a custom Explorer bar
• Handle Internet Explorer and HTML events
• Deploy and update an IE add-on

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.

Then choose the programming language for your IE plugin (it is VB.NET in our Browser extension project; but Visual C#; and C++ are also available) and click Finish.

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 deploying your IE extension.

2. The IE Module

The main element of the Internet Explorer add-on project is the IE Module, it is the heart of your IE plugin (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 a number of Add-in Express components e.g. the Keyboard Shortcut component using the toolbox 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 the applied code of your IE plug-in.

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

• Bars - each item of this collection registers the specified control (a descendant of UserControl) as a custom Explorer bar.
• Commands - a collection of commands you add to Internet Explorer.
• ContextMenu - a collection of pop-up menu items for all IE context.
• 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 Internet Explorer add-on.

3. Adding custom commands to Internet Explorer

To add a custom command to the IE user interface, you click the corresponding button in the toolbox or use the Commands collection of the IE Module.

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

• ActiveIcon - - active command icon; the icon must be located in the Resources folder of your IE add-on project; this property is 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. An event handler of this event is provided with the HTMLDocument of the active page.

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; the editor of this collection is also accessible through the corresponding button in the toolbox.

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 context menu command provides the OnClick event. It allows the developer to learn the current selection as well as the HTMLElement right-clicked. To fine-tune the creation of an IE context menu item, the developer uses the OnCreateMenuItem. To fit the context menu item into a custom drawing style, you use the OnMeasureMenuItem and OnDrawMenuItem events.

5. Customizing the IE main menu

You use the toolbox to add an ADXIEMainMenu component to the IE addon module.

The visual designer of the ADXIEMainMenu.Items collection allows adding new menu items, popups and separators to the IE main menu: File, Edit, View, Tools, and Help.

Main menu items provide events similar to that of context menu items. You use the OnClick event to find out the current selection as well as the HTMLElement clicked. To fully control how your custom items are drawn on the main menu of Internet Explorer, you use the OnMeasureMenuItem and OnDrawMenuItem events.

6. Creating a custom IE toolbar

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 IE add-on project; you can find the component in the Add New Item dialog of the add-on project.

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 custom 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.

Now, when the IE 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).

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. IE Event handling is described below.

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

7. Developing a custom Explorer bar

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.

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.

The final step of creating a custom Internet 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 and Advanced IE bars.

8. Handling Internet Explorer and HTML 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 events of all Internet Explorer versions, from IE6 to IE11; naturally some events that appeared in later versions will not be triggered when the IE add-on is loaded in an earlier version, e.g. IE 6.

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

You can also connect to events of the HTML elements composing the current HTML page. You use the context menu of the add-on module's designer surface to add an ADXIEHTMLDocEvents component onto the module.

You configure the component by specifying the HTML element types the events of which you need to handle. Then, just handle required events.

9. Building, registering and running your Internet Explorer plug-in

Close all IE instances and build your IE add-on. If the addon 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 plugin in action.

To debug your IE addon, specify iexplorer.exe in the Start External Program property of your add-on project and run your Internet Explorer plugin.

10. Deploying and updating your IE add-on

Add-in Express automatically generate a setup project compliable to an MSI installer. The supported setup project types are:

• Regular Visual Studio setup project
• InstallShield setup project
• WiX setup project

More about Creating MSI installers.

You can install and update your IE extension over the web using the ClickTwice technology. You can also prefer just to build the setup project and deliver its output to the end-user. Administrative privileges are required for the plug-in to install. More about IE addon deployment.

You may want to download a sample IE add-on in C#, VB.NET with the source code.