It’s a race.

I’m going to attempt to create a simple Firefox extension that will display the DOM ID of an element that my mouse cursor is hovering over in the status bar.

There are probably a ton of Firefox extensions that will do that already, but I want to give it a shot as a project.

It’s 3:30PM right now, and I want to try to get this done by 5:00PM.  I’m going to be using Ubuntu 8.04, gEdit, and Google to get me started.

And I’m going to record my progress here in this blog post.

Note: After I’m done, I’m going to edit my sporadic notes so that they make more sense.  So if you’re wondering just how I managed to stay so cool, calm, and collected in my prose under such time pressure, and why the publish date on this article is after 5PM, now you know.

3:35PM:

Gonna start with Google:  “building a firefox extension”

Ok, found an article about how to create a Firefox extension.

Apparently, the first thing I want to do is try setting up a development profile in Firefox.

3:41PM

Finished setting up my dev profile by opening up FF with this command:

firefox -no-remote -P

Then created a profile called “Development”.  After that, I typed “about:config” in the URL bar, and changed some settings as instructed on this site.

3:49PM

According to that last article, I can create a skeleton Extension project using this site.  Done – calling the project DOM ID Displayer

3:53PM

Installed this Extension – apparently, it’ll be some help.  Will let me reload Firefox’s chrome  shtuff without restarting the browser each time.  Useful.

3:55PM

Found this article on making a status bar extension in XUL.  Easy as pie.

4:05PM

Ok, I’ve coded something in XUL that should display a new panel in the status bar.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://domiddisplayer/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://domiddisplayer/locale/domiddisplayer.dtd">

<overlay id="domiddisplayer-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>

<!-- Firefox -->
<statusbar id="status-bar">
  <statusbarpanel id="domiddisplayer" label="Hello, World!" tooltiptext="Dom ID Displayer" />
</statusbar>
</overlay>

I put that in the “overlay.js” file in my ~/Experiments/Extensions/domidinspector/content folder that was created using that Wizard from 3:49.

Now, to get this thing to run in my Development profile, I create a symbolic link to it in the Development profile’s extensions directory

ln -s ~/Projects/Experiments/Extensions/domidinspector ~/.mozilla/firefox/nzuzbdpz.Development/extensions/domiddisplayer@mike.conley

Open Firefox with Development profile:

firefox -P Development &

4:16PM

Looks like I can access and relabel the XULElement that I’ve ID’d as “domiddisplayer” using this:

domiddisplayer.updateDisplay = function(event) {
var dom_element_id = event.relatedTarget.id;
document.getElementById('domiddisplayer').setAttribute('label', dom_element_id);
}

Cool – I can now change my text in the Firefox status window.  Now I just need to capture any time a mouse moves over a DOM element….yikes, that might be tricky.

4:33PM

Been tinkering with this as a way of putting a mouseover event listener on everything in the window:

window.addEventListener("mouseover", function(e) {
  domiddisplayer.updateDisplay(e);
}, false);

4:35PM

Seems to only be capturing mouseover/mouseout events on Chrome elements – so I can get the ID’s of the statusbar, etc.  These are XUL Elements, not the DOM elements of a web page…

So I’m close.

4:44PM

This page is super helpful…

Apparently, I need to wait for the content of the page to load before I can attach observers to all of its sub-elements.  Makes total sense.

So, in my domiddisplayer.onLoad function, I write this:

var appcontent = document.getElementById("appcontent");
if(appcontent)
  appcontent.addEventListener("DOMContentLoaded", domiddisplayer.onPageLoad, true);

And now, I create a function called onPageLoad, which looks like this:

domiddisplayer.onPageLoad = function(aEvent) {
//Runs when the page is loaded
  window.content.document.addEventListener("mouseover",
  function(e) {
    domiddisplayer.updateDisplay(e);
  }, false);
}

5:03PM

Done.  I’m over time, but I’ve finished a (relatively) working extension.

Here, it’s a mess, but you can download the whole thing right here if you want to tinker with what I did.

Download domiddisplayer.zip