IE: Browser Bar Details

Table of Contents

1. Introduction
2. HTML Anchor Technique
3. IE Favorite Technique
4. Windows Registry Technique
5. References
6. Resources

Introduction

A question was sent to the CODE4LIB listserv by Eric Lease Morgan, from the University of Notre Dame Library, asking how someone goes about creating browser toolbars.  This article describes how to launch Internet Explorer (IE) browser bars with content generated by dynamic HTML (DHTML).  There are several techniques that can be employed to launch an IE browser bar.  The browser bar can be launched from an HTML anchor element that targets IE's built-in search explorer bar, from an IE favorite, or integrated into IE using the Windows registry.  Each of these techniques are explored throughout the article using a common example. 

HTML Anchor Technique

The HTML anchor technique works by targeting IE's built-in search explorer bar.  An HTML anchor element is created in a Web document that includes a target attribute containing the value _search.  The href attribute of the HTML anchor element contains the URL of the content to display in IE's built-in search explorer bar.  When the link in the Web document is clicked, IE will open the search explorer bar with the contents of your document.  See reference [1] to learn more about IE's HTML anchor element.  The following is an example of what an HTML anchor element would look like:

<a target='_search' href='http://example.org/search.htm'>

You can launch a demonstration that will open IE's built-in search explorer bar with a sample search form.  This demonstration was tested in IE v6.0.2800.1106, but should also work in version 5.X.  Interestingly, this technique also works with Mozilla's Firefox v1.0.4 browser. 

After you have launched the browser bar, click the X at the top right of the browser bar to close it.  Go to IE's View―>Explorer Bar menu and select the Search menu choice.  The default search explorer bar will open with Microsoft's content.  Using this technique means that the end-user must always navigate to the Web document that contains the link so they can launch the browser bar. 

IE Favorite Technique

You can make the browser bar a more integral part of IE by using a favorite.  The end-user of the browser bar can create the favorite using several different methods in IE such as, using the Favorites―>Add to Favorites... menu choice, using the Add to Favorites... mouse context menu, or clicking an HTML anchor element in a Web document.  The IE favorite technique is more complex than the HTML anchor technique, previously described, since it requires the use of a JavaScript URL.  The JavaScript URL will mimic the HTML anchor technique by using the open method of the window object.  The open method of the window object takes a URL to a Web document and a target location.  We will use a target location with the value _search, just as we did in the HTML anchor technique.  See reference [2] to learn more about IE's window.open method.  The following is an example of what a JavaScript URL would look like:

javascript:void(window.open("http://example.org/search.htm","_search"))

When the end-user creates a favorite using IE's Favorites―>Add to Favorites... menu choice, they will need to enter a complex JavaScript URL, like the one above.  Having the end-user manually re-create a JavaScript URL is problematic and I would not recommend using this method, unless the instructions involved cutting and pasting the URL from the text of a Web document.  For example you could cut and paste the above JavaScript URL to manually create an IE favorite.  A better alternative would be to create an HTML anchor element in a Web document where the end-user could use IE's Add to Favorites... mouse context menu. 

Using IE's Add to Favorites... mouse context menu is similar to the HTML anchor technique described above.  You might ask: why not just use IE's Add to Favorites... mouse context menu on the link in the HTML anchor technique?  There is a subtle difference between using this method and the HTML anchor technique.  In the HTML anchor technique we used the target attribute of the HTML anchor element.  When you use IE's Add to Favorites... mouse context menu, it does not maintain the target attribute of the HTML anchor element.  Since this method uses a JavaScript URL with the window.open method, the target is maintained since it is part of the method invocation.  The following is an example of what an HTML anchor element would look like using the previous JavaScript URL:

<a href='javascript:void(window.open("http://example.org/search.htm","_search"))'>

To create the IE favorite, using this method, you would right click on the link and select the Add to Favorites... menu choice.  You will receive an IE scripting security alert since the href attribute contains a JavaScript URL.  Clicking Yes, to continue, will add the URL to your favorites.  When you launch the favorite from IE's Favorites menu, the favorite will automatically launch IE's search browser bar with a sample search form. 

It is important to note that you must use an absolute URL in the open method of the window object.  An absolute URL is needed since the end-user of the browser bar will have saved the URL to their local computer, which needs to communicate with the Web server displaying the content in the browser bar.  Another interesting point is that you can also launch the browser bar by clicking on the link, just as we did with the HTML anchor technique.  Unfortunately, this technique doesn't work in Mozilla's Firefox v1.0.4 browser even though they implemented the _search target for the HTML anchor tag.  It appears that they forgot to implement the _search target for the window.open object, otherwise there would be a simple cross browser solution. 

With a simple change to the prior HTML anchor element we can automate adding the browser bar link to the end-user's favorites.  This can be accomplished by using the AddFavorite method of the window.external object.  The AddFavorite method of the window.external object takes a URL that will be used for the favorite and optionally the title to name the favorite.  See reference [3] to learn more about IE's window.external.AddFavorite method.  The change to the JavaScript URL has a minor complication due to nested double quotes that will need to be quoted so the URL works correctly.  The following is an example of what the new HTML anchor element would look like:

<a href=
 '
  javascript:window.external.AddFavorite
  (
   "javascript:void(window.open(\"http://example.org/search.htm\",\"_search\"))",
   "IE Browser Bar Sample"
  )
 '
>

You can launch a demonstration that automates the process of adding an IE favorite which will open IE's built-in search explorer bar with a sample search form.  This demonstration was tested in IE v6.0.2800.1106, but should also work in version 5.X. 

The Windows registry technique allows the browser bar to be integrated directly into IE's View―>Explorer Bar menu.  Initially, the end-user will run a Windows registry script that will install the appropriate entries into their registry.  After the Windows registry script is run, the end-user can launch the browser bar by selecting the appropriate browser bar menu choice from IE's View―>Explorer Bar menu.  This technique requires the end-user to manually run a Windows registry script, which can be problematic in corporate environments where computers have been locked down.  It is possible to create a standard Windows installer package that would install the appropriate Windows registry entries and provide the ability to uninstall the changes by using the standard Add or Remove Programs from the Windows Control Panel, however creating the installer package is currently beyond the scope of this document. 

Below are Windows registry scripts that will permanently install or uninstall the browser bar as an alternative to using the IE favorite technique.  After you run the install registry script you will need to close IE and reopen it, otherwise the new menu selection will not show up under IE's View―>Explorer Bar menu.  When you reopen IE go to the View―>Explorer Bar menu.  You will notice that there is a new menu choice for IE Browser Bar Sample.  Select the IE Browser Bar Sample menu choice and IE will open the browser bar with a sample search form. 

For your convenience, you can download the Windows registry scripts by clicking on the names of the scripts.  Alternately, you can copy the install or uninstall script to the Windows clipboard and place it into a text file that has a name ending in the .reg extension.  To run the Windows registry script, right click on the text file you downloaded or created and select the Merge menu choice. 

REGEDIT4

[HKEY_CLASSES_ROOT\CLSID\{4294FBB6-0330-615C-4D54-57696C4A6F6E}]
@="IE Browser Bar Sample"
[HKEY_CLASSES_ROOT\CLSID\{4294FBB6-0330-615C-4D54-57696C4A6F6E}\Implemented Categories]
[HKEY_CLASSES_ROOT\CLSID\{4294FBB6-0330-615C-4D54-57696C4A6F6E}\Implemented Categories\{00021493-0000-0000-C000-000000000046}]
[HKEY_CLASSES_ROOT\CLSID\{4294FBB6-0330-615C-4D54-57696C4A6F6E}\InProcServer32]
@="Shdocvw.dll"
"ThreadingModel"="Apartment"
[HKEY_CLASSES_ROOT\CLSID\{4294FBB6-0330-615C-4D54-57696C4A6F6E}\Instance]
"CLSID"="{4D5C8C2A-D075-11d0-B416-00C04FB90376}"
[HKEY_CLASSES_ROOT\CLSID\{4294FBB6-0330-615C-4D54-57696C4A6F6E}\Instance\InitPropertyBag]
"URL"="http://example.org/search.htm"

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Explorer Bars\{4294FBB6-0330-615C-4D54-57696C4A6F6E}]
"BarSize"=hex:C8,00,00,00,00,00,00,00

REGEDIT4

[-HKEY_CLASSES_ROOT\CLSID\{4294FBB6-0330-615C-4D54-57696C4A6F6E}]
[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Explorer Bars\{4294FBB6-0330-615C-4D54-57696C4A6F6E}]

You can use the above registration scripts as a template for your own browser bar.  However, you will need to change the text marked in red.  It is important to note that each browser bar is stored in the Windows registry under a globally unique identifier key, known as a GUID.  You must generate a new GUID for each browser bar you develop.  This means that you will need to replace the occurrences of the GUID {4294FBB6-0330-615C-4D54-57696C4A6F6E} in the Windows registry scripts with the GUID generated for the browser bar you are developing.  There are many utilities available for generating GUID's, but the following Windows command script will create a VB.NET console application that can be used to generate a GUID. 

@setlocal
@set ScriptDir=%~dp0
@set ScriptFile=%~nx0
@set ScriptName=%~n0
@set exeFile=%ScriptDir%%ScriptName%.exe
@set vbFile=%ScriptDir%%ScriptName%.vb
@set v10=%windir%\Microsoft.NET\Framework\v1.0.3705\vbc.exe
@set v11=%windir%\Microsoft.NET\Framework\v1.1.4322\vbc.exe
@set vbc=
@for %%f in ("%v10%" "%v11%") do @set vbc=%%~f
@if "%vbc%" == "" @goto :NotFound
@del /F /Q "%vbFile%" 2>nul:
@echo Module guid >> "%vbFile%"
@echo   Sub Main() >> "%vbFile%"
@echo     System.Console.WriteLine("{{{0}}}",System.Guid.NewGuid.ToString.ToUpper) >> "%vbFile%"
@echo   End Sub >> "%vbFile%"
@echo End Module >> "%vbFile%"
@"%vbc%" "%vbFile%" "/out:%exeFile%"
@goto :End
:NotFound
@echo Cannot find the VB.NET compiler.
@goto :End
:End
@endlocal

For your convenience, you can download a pre-compiled .NET executable that is ready to run.  To generate a new GUID just run the executable from a Windows command prompt.  The GUID will appear in the command prompt window where you can copy and paste it into any application.  It is important to note that you must have the .NET Framework runtime installed to execute the pre-compiled application.  If you are unsure whether the .NET Framework runtime is installed you can check the list of applications generated by Add or Remove Programs under the Windows Control Panel.  You can download the .NET Framework runtime from Microsoft's Web site. 

Alternately, you can download or copy the above Windows command script to the Windows clipboard and place it into a text file that has a name ending in the .cmd extension.  It is important to note that you must have the .NET Framework SDK, either version 1.0 or 1.1, installed in the default directory on your computer.  If you are unsure whether the .NET Framework SDK is installed you can check the list of applications generated by Add or Remove Programs under the Windows Control Panel.  You can download the .NET Framework SDK from Microsoft's Web site. 

Should you be unable to run the pre-compiled application or be able to re-create the application from the Windows command script, you can download a Microsoft Access database that will allow you to keep track of the GUID's you create.  The Access database contains one table named GuidTable and it contains two columns.  The first column is named GUID and the contents will be automatically generated by Access.  The second column is named Comment and it indicates the scope of the GUID's usage, e.g., I created this GUID for browser bar X.  After you have entered a comment you can copy the GUID in the first column to the Windows clipboard where you can paste it into any application. 

References

[1]

TARGET Attribute | target Property.  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 25].  Available from: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/target.asp

[2]

open Method (window).  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 25].  Available from: http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/open_0.asp

[3]

AddFavorite Method .  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 25].  Available from: http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/addfavorite.asp

Resources

1. Adding Explorer Bars.  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 25].  Available from: http://msdn.microsoft.com/workshop/browser/ext/tutorials/explorer.asp
2. Creating Custom Explorer Bars, Tool Bands, and Desk Bands.  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 25].  Available from: http://msdn.microsoft.com/library/en-us/shellcc/platform/Shell/programmersguide/shell_adv/bands.asp
3. Explorer Bar Style Guide.  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 25].  Available from: http://msdn.microsoft.com/workshop/browser/ext/overview/overview.asp
4. Extending Explorer with Band Objects using .NET and Windows Forms.  Toronto Ontario: Code Project; ©2002 [posted 2005 Apr 30; cited 2005 May 25].  Available from: http://www.codeproject.com/csharp/dotnetbandobjects.asp
5. IE Advanced Toolbar Article for Favorite site navigation and log-in using .NET band objects.  Toronto Ontario: Code Project; ©2005 [posted 2005 Jan 23; cited 2005 May 25].  Available from: http://www.codeproject.com/useritems/IE_Advanced_Toolbar.asp
6. Microsoft .NET Framework Version 1.1 Redistributable Package.  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 28].  Available from: http://www.microsoft.com/downloads/details.aspx?FamilyID=262d25e3-f589-4842-8157-034d1e7cf3a3
7. .NET Framework SDK Version 1.1.  Redmond (WA): Microsoft Corporation; ©2005 [cited 2005 May 28].  Available from: http://www.microsoft.com/downloads/details.aspx?FamilyID=9b3a2ca6-3647-4070-9f41-a333c6b9181d
8. Programming Microsoft Internet Explorer 5. Redmond (WA): Microsoft Press; ©1999 Scott Roberts.  ISBN: 0-7356-0781-8.  See: chapter 10 Web Accessories, section Creating Explorer Bars Using DHTML and Script.