HTML Source Explorer Bar

Application Features

• Internet Explorer 5.0+ plug-in.
• Shows HTML Source for any page.
• Shows syntax highlighted script code the page executes.
• Shows information about images and applets on the page.

Description

HTML Source Bar is an Internet Explorer 5 (or better) Explorer Bar that shows you the source contents of the viewed HTML pages.
An Explorer Bar integrates directly into the Internet Explorer workspace. This one presents the hierarchy of elements contained in the currently viewed web page.

The HTML source code can be viewed, as well any scripting code (JavaScript, VBScript or any client-side script code) used. In addition, information about the images, applets and links are displayed.

The information presented is gathered after the Internet Explorer has parsed it. This is quite different from e.g. the information you get from the standard "View Source" popup menu.
The Internet Explorer MSHTML component will parse the downloaded HTML and add its own tags, close unclosed tags and even remove tags, which violate its parser logic.
A good example of how the parsed HTML source code can differ from the original HTML is the TBODY tag. This HTML tag is automatically added after any TABLE tag by the Internet Explorer HTML parser. This makes it difficult for DHTML programmers to make up consistent programming using the DHTML object model.
Using this little utility, web developers can easily see how any Internet page is build.

To be able to see the client-side script code of the HTML page, you need to have a Microsoft Script Debugger installed.

The Source Code

The C++ source code for this IE plugin is freely downloadable.

This ATL project shows you how to implement an Internet Explorer Desk Band.
MS Internet Explorer will pass a site object from which the application can ask for events from Internet Explorer or for a reference to the DHTML object model.
Using the DHTML object model the application can extract all the needed information about the currently loaded page. If the page contains frames, they are parsed recursively.

One particular nagging problem was getting hold of the script code the page is running. This was solved by getting a list of "Running Documents" from the Script Debug Manager (if one is installed). If you have tried the Microsoft Script Debugger or Visual J++, you probably already know that such a list exists. It is actually published by the general Script Debug Manager component and can be queried by any application.

Syntax highlighting is achieved by using a Rich Edit control and writing a few parsers that parse HTML, plain text, CSS and script code into RTF. Parsing a very large file may take one or two seconds.

Code Features

• IE Desk Band implementation.
• Syntax highlighting using Rich Edit control.
• Printing Rich Edit contents.
• Listening in on Internet Explorer events.
• Communicating with the Script Debug Manager.

Source Code Dependencies

Internet Explorer 5 or better
Microsoft Visual C++ 6.0
Microsoft ATL Library
Microsoft WTL 3.0 Library
Microsoft Active Scripting SDK

Installation Guide

• Extract the file and run the setup application.
• Start Internet Explorer and under the View / Explorer Bar menu, pick the HTML Source item.
• In some cases you may need to restart the computer to get the new menu item.

See Also

Richard van den Berg added some cool enhancements
How to create your own Explorer Bar

Download Files  

HTML Bar install file (283 Kb) Source Code (82 Kb)