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