It’s a race.<\/p>\n
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.<\/p>\n
There are probably a ton of Firefox extensions that will do that already, but I want to give it a shot as a project.<\/p>\n
It’s 3:30PM right now, and I want to try to get this done by 5:00PM.\u00a0 I’m going to be using Ubuntu 8.04, gEdit, and Google to get me started.<\/p>\n
And I’m going to record my progress here in this blog post.<\/p>\n
Note: <\/strong> After I’m done, I’m going to edit my sporadic notes so that they make more sense.\u00a0 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.<\/p>\n Gonna start with Google:\u00a0 “building a firefox extension”<\/p>\n Ok, found an article about how to create a Firefox extension.<\/a><\/p>\n Apparently, the first thing I want to do is try setting up a development profile in Firefox.<\/p>\n Finished setting up my dev profile by opening up FF with this command:<\/p>\n Then created a profile called “Development”.\u00a0 After that, I typed “about:config” in the URL bar, and changed some settings as instructed on this site.<\/a><\/p>\n According to that last article, I can create a skeleton Extension project using this site<\/a>.\u00a0 Done – calling the project DOM ID Displayer<\/p>\n Installed this Extension <\/a>– apparently, it’ll be some help.\u00a0 Will let me reload Firefox’s chrome\u00a0 shtuff without restarting the browser each time.\u00a0 Useful.<\/p>\n Found this article<\/a> on making a status bar extension in XUL.\u00a0 Easy as pie.<\/p>\n Ok, I’ve coded something in XUL that should display a new panel in the status bar.<\/p>\n I put that in the “overlay.js” file in my ~\/Experiments\/Extensions\/domidinspector\/content folder that was created using that Wizard from 3:49.<\/p>\n 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<\/p>\n Open Firefox with Development profile:<\/p>\n Looks like I can access and relabel the XULElement that I’ve ID’d as “domiddisplayer” using this:<\/p>\n Cool – I can now change my text in the Firefox status window.\u00a0 Now I just need to capture any time a mouse moves over a DOM element….yikes, that might be tricky.<\/p>\n Been tinkering with this as a way of putting a mouseover event listener on everything in the window:<\/p>\n Seems to only be capturing mouseover\/mouseout events on Chrome elements – so I can get the ID’s of the statusbar, etc.\u00a0 These are XUL Elements, not the DOM elements of a web page…<\/p>\n So I’m close.<\/p>\n3:35PM:<\/h2>\n
3:41PM<\/h2>\n
firefox -no-remote -P<\/pre>\n
3:49PM<\/h2>\n
3:53PM<\/h2>\n
3:55PM<\/h2>\n
4:05PM<\/h2>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<?xml-stylesheet href=\"chrome:\/\/domiddisplayer\/skin\/overlay.css\" type=\"text\/css\"?>\r\n<!DOCTYPE overlay SYSTEM \"chrome:\/\/domiddisplayer\/locale\/domiddisplayer.dtd\">\r\n\r\n<overlay id=\"domiddisplayer-overlay\" xmlns=\"http:\/\/www.mozilla.org\/keymaster\/gatekeeper\/there.is.only.xul\">\r\n<script src=\"overlay.js\"\/>\r\n\r\n<!-- Firefox -->\r\n<statusbar id=\"status-bar\">\r\n <statusbarpanel id=\"domiddisplayer\" label=\"Hello, World!\" tooltiptext=\"Dom ID Displayer\" \/>\r\n<\/statusbar>\r\n<\/overlay><\/pre>\n
ln -s ~\/Projects\/Experiments\/Extensions\/domidinspector ~\/.mozilla\/firefox\/nzuzbdpz.Development\/extensions\/domiddisplayer@mike.conley<\/pre>\n
firefox -P Development &<\/pre>\n
4:16PM<\/h2>\n
domiddisplayer.updateDisplay = function(event) {\r\nvar dom_element_id = event.relatedTarget.id;\r\ndocument.getElementById('domiddisplayer').setAttribute('label', dom_element_id);\r\n}<\/pre>\n4:33PM<\/h2>\n
window.addEventListener(\"mouseover\", function(e) {\r\n domiddisplayer.updateDisplay(e);\r\n}, false);<\/pre>\n4:35PM<\/h2>\n
4:44PM<\/h2>\n