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
Be the first to like.
