extending pageinfo

In our SEOProfesional Toolbar firefox extension I considered, how I should present some web-page related information to the user. Of course the easiest but quite stupid way to do it would be to make my own information box with the requested information. But in principle, the info we wanted to show was something about the page, therefore logically belonging to the Page Info dialog. I did not find much information on developer.mozilla.org, so I dived into the source code. Let's start with chrome.manifest of our testbed add-on: which simply says that the browser's pageInfo.xul should be overlayed with our pageInfoOverlay.xul. The overlay should look like this: The important parts are:

• The radiogroup overlay with an item with id somethingTab and the oncommand="showTab('something');"
• The deck overlay with a vbox called again somethingPanel

Now you should see your page in the pageinfo. The real fun hasn't started yet. We need to add some functionality. You have probably noticed the link to pageinfo.js in our xul. Until now we expected it was empty. Let's start filling it with stuff. If you look into chrome://browser/content/pageinfo/pageInfo.js you will see that Firefox developers have helped us with building a framework for extending page info. There is a bunch of callbacks to help us set the contents of our page. Following are javascript arrays of functions to be called for certain events.

• onLoadRegistry
• onResetRegistry
• onProcessFrame
• onProcessElement
• onFinished
• onUnloadRegistry

We will just look at onLoadRegistry and onProcessFrame here as they are the only 2 I have used. onLoadRegistry functions will be called whenever page info is displayed. That's the good place to decide whether we want to display our page or not. The code of our pageinfo.js could look like this: That will hide our page for pages retrieved through https. The second one, onProcessFrame, gets all the frames the page consists of. If we want to enumerate them, we can do something like this: 2 last pieces of the puzzle are missing. The first one: how to assign a headline image for our page. Easy! Through css. You have noticed link to chrome://testbed/skin/overlay.css in our xul. Those 2 images should be 32x32px. And the last thing: what if we also want to invoke the page info dialog from our UI and switch directly to our page? Again, that's something Firefox developers thought about. Very basic: Not ideal though. There is a possibility, that the page info for this page has already been opened. Therefore it is better to look and in such case, focus the existing window: The best news at the end: I have created a test-bed for my experiments. You can install this add-on and see pretty much everything I have been writing about today...