Develop custom IE toolbar for IE6 - IE11.
Add a custom button in C#, VB.NET, C++.

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

Add-in Express Home > Add-in Express for Internet Explorer > Online Guide > Creating custom IE toolbars

Creating custom IE toolbars

This page highlights all essential aspects of the Internet Explorer toolbar development. You can create a custom IE toolbar in the two following Add-in Express project types:

• Creating an IE Toolbar project
• Creating toolbar in an IE Add-on project

The toolbars developed as part of any of the project types above can provide the same functionality but there's a difference. If the toolbar is developed as part of an add-on project, then the BHO part of the add-on can turn the toolbar on when IE starts up. And Add-in Express provides a simple property LoadAtStartup that functions exactly in this way.

Creating an IE Toolbar project

Before running Visual Studio make sure that you have administrative permissions. If you have Windows Vista, Windows 7, Windows 8, or Windows 10, run Visual Studio via Run as Administrator.

In Visual Studio, open the New Project dialog and navigate to the Extensibility folder.

Choose ADX IE ToolBar and click OK. This will start the IE toolbar project wizard.

Next, select your programming language of choice, either C#, VB.NET or C++, and specifying the oldest IE version you want to support.

We choose VB.NET as a programming language and IE 6 as the minimum version because we want the toolbar to show up across all versions of Internet Explorer of IE6 to IE11, and click Next.

If you don't know anything about strong names or don't have a special strong name key file, choose Generate new. If you need to use a specific strong name key file at a later point of time, you will be able to specify its name on the Signing tab of your project properties; you are required to unregister your IE toolbar project before using another strong name.

Choose Generate new or specify an existing .snk file and click Next.

The project wizard creates and opens a new solution in Visual Studio.

The solution contains the only project, IE toolbar project. The project contains the IEToolbarModule.vb (or IEToolbarModule.cs) file.

IE Toolbar module

IEToolbarModule.vb (or IEToolbarModule.cs) is the core part of the project. It is a container for components essential for the functionality of your IE toolbar. You specify add-on properties in the module's properties, add the components to the module's designer, and write the functional code of your IE toolbar in this module. To review its source code, in the Solution Explorer, right-click IEToolbarModule.vb (or IEToolbarModule.cs) and choose View Code.

In the code of the module, pay attention to the following points:

• the comment line in the constructor of the module
  
  It suggests that you write any initialization code in the OnConnect event of the module, not in the constructor. Why? The fact is that an instance of the module is created when the IE extension is being registered or unregistered. That is, the constructor of the module can be executed when the module isn't loaded in IE and if your code doesn't expect this, an exception may occur. On the other hand, OnConnect is the very first event the module generates when it is loaded into IE. So, following that recommendation saves your debugging time.
  
  
• the IEApp and HTMLDocument properties
  
  These properties are added by the IE toolbar project wizard. You use them as entry points to the corresponding object models; see Intercepting IE Events and Intercepting HTML Events.

IE Toolbar Module designer

In the Solution Explorer, right-click the IEToolbarModule.vb (or IEToolbarModule.cs) file and choose View Designer in the popup menu.

The designer view provides access to the following areas:

• IE Toolbar module designer - (#1 in the screenshot below) it is a usual designer;
• Help panel - see #2 in the screenshot below.

The areas are shown in the screenshot below:

The module provides a number of properties and commands. The properties are available in the Properties window when you click the designer surface of the module. The properties include Position and Title. The commands are available in the context menu of the module's designer.

On the other hand, ADXIEToolbarModule descends from System.Windows.Forms.UserControl and that means you can add any .NET control onto the designer surface of the module.

Let's add a button showing a message box. The code below demonstrates how to do this correctly, doing this in any other way may show the message box behind the IE window:

			Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) _
				Handles Button1.Click
				Dim window As MyWinApiWindow = New MyWinApiWindow(Me.ParentHandle)
				System.Windows.Forms.MessageBox.Show(window, _
					"This is my first button in IE", Me.Title)
			End Sub
			

MyWinApiWindow above is a simple class implementing the System.Windows.Forms.IWin32Window interface (see MyWinApiWindow Class). The window handle for MyWindow is supplied by the ParentHandle property of the module that returns the handle (hwnd) of the window, which is the parent of the IE toolbar window; you might also need to use handles provided by TabWindowHandle or MainWindowHandle properties of the ADXIEToolbarModule.

Your custom toolbar in Internet Explorer

Here is how your custom Internet Explorer toolbar may look like:

Creating a custom IE toolbar in an add-on project

If you have an IE add-on project created as described at Programming Internet Explorer add-on, you can add a toolbar to your project following the steps below:

How to build custom IE toolbars

In the Add New Item dialog, you choose the Add-in Express IE Toolbar item and click OK.

This adds an Add-in Express IE toolbar to your project.

The Add-in Express IE toolbar is based on ADXIEToolbar, which descends from System.Windows.Forms.UserControl. You populate the designer surface of the Add-in Express IE with controls that constitute the user interface of your toolbar.

To provide the IE module with information on how to deal with your IE toolbar class, you create an ADXIEToolbarItem object and add it to the Toolbars collection of the IE module. You activate the designer of the IE module and perform the steps below:

• open the property editor of the Toolbars property;

• add an ADXIEToolbarItem to the Toolbars collection and set item properties; pay attention to the ToolbarType property, it's where you specify the name of the toolbar class.

To access the IE toolbar from your IE module, you use theModule.Toolbars to get a collection of ADXIEToolBarItem objects; every object provides access to the ToolBarObj property, which returns the corresponding ADXIEToolbar. For instance, the code below demonstrates calling a public method defined in an ADXIEToolbar from the IE module:

Calling a method defined in an ADXIEToolbar from the IE Module

VB.NET code sample

			Dim toolbarItem As AddinExpress.IE.ADXIEToolBarItem = Me. ToolBars(0)
			Dim toolbarObj As AddinExpress.IE.ADXIEToolbar = toolbarItem. ToolBarObj
			Dim myToolbar As MyIEAddon1.MyIEToolBar1 = _
				CType(toolbarObj, MyIEAddon1.MyIEToolBar1)
			myToolbar.MyMethod()
			

C# code sample

			AddinExpress.IE.ADXIEToolBarItem toolbarItem = this.ToolBars[0];
			AddinExpress.IE.ADXIEToolbar toolbarObj = toolbarItem.ToolBarObj;
			MyIEAddon1.MyIEToolBar1 myToolbar = toolbarObj as MyIEAddon1.MyIEToolBar1;
			myToolbar.MyMethod();
			

To access the IE module form the IE toolbar, use ADXIEToolbar.Module.

Your custom toolbar in IE

Your own IE toolbar can look something akin to this: