Mike Conley's Blog

Firefox has a sweet suite of developer tools. If you haven’t used them, you’re seriously missing out.

Thunderbird, on the other hand, has very little in the way of developer tools. We used to have ChromeBug, but then that project went by the wayside when the Firebug developers decided to focus more on, well, Firebug.

And ever since, debugging and fiddling around in Thunderbird has been a pain.

So a few folks on the TB team decided to take a crack at porting one of Firefox’s tools to Thunderbird. We chose Scratchpad (or rather, its earlier incarnation, “Workspace”), because being able to execute snippets of script on the fly is super-useful for trying stuff out.

So without further ado, here it is – Workspace for Thunderbird.

Install that, and a new Workspace menuitem appears under Tools. This will open up Workspace. Make sure to switch your Context to Chrome for superpowers.

1 person likes this post.

Like

Unlike

The developers of the puzzle game Cut The Rope have ported their code from Objective-C to Javascript and HTML5.

And, despite the IE slant, the game works really well in Firefox!  Check it out:

Visit http://www.cuttherope.ie to try it out!

5 people like this post.

Like

Unlike

Some fine fellow has written some Javascript that runs one of my favourite games in the browser.  I just watched the opening cutscene of Monkey Island in Firefox!

It’s still a bit buggy, but it’s a start!

Here’s the source code.

4 people like this post.

Like

Unlike

Remember alertCheck – that Firefox Extension I wrote a while back, that helped suppress annoying popups?

I finally decided to post it on Mozilla Addons.  Now compatible with Firefox 3.5.*.

Here you go.

Be the first to like.

Like

Unlike

Wow.  I think I got it.  I’ve got a Firefox plugin that can suppress all alert() dialogs on a page if the user checks a “suppress” box on the second alert() dialog.

The trick, was not to rely on the DOMContentLoaded event to fire to do the override.  Instead, I used the DOMWillOpenModalDialog to detect the first alert().  After detection, I overrode with an alertCheck which asked the user whether or not to “suppress more dialogs”.  If the user answers in the affirmative, alert() is simply overwritten with an empty function.

Piece of cake.

A couple of issues though…

Security

In order to override the alert() function, I have to write to document.getElementById(‘content’).contentWindow.wrappedJSObject.alert.

Remember how I mentioned the distance between the Extension JavaScript, and the inline content JavaScript?  I said it felt like a security layer.

I was totally right.

Check this out. I’ll quote:

You should be aware of XPCNativeWrappers when working with untrusted content. With XPCNativeWrappers turned on (which is the default in Firefox 1.5+), your extension can safely access the DOM of the content document, but not the content JavaScript. Bypassing XPCNativeWrapper to work with content JavaScript directly can lead to security problems.

Hrmph.  So I seem to be violating some security rules here.  So maybe my approach isn’t the greatest idea.  “Mook” from irc.mozilla.net #extdev suggested looking into commonDialog.xul…but I can’t seem to wrap my head around that just yet.

Imperfections

Not sure why yet, but while I can suppress dialog floods like this:

for (i = 0; i < 10; ++i) {
  alert(i);
}

It seems to fail on this:

for (i = 0; i < 10; ++i) {
  alert(i);
  confirm(i);
}

For some reason, regardless of whether or not I choose to suppress the dialogs, they just keep coming.  It works fine when I swap out the confirm() for a second alert().  Not exactly sure why.  Yet.

Ok, so I’m going to clean the code up, and post it soon.  I’ll also post a link to a real, brutally annoying website where you can test the alertCheck extension.  Just give me a bit.

Be the first to like.

Like

Unlike

Window.alert is a native function built into Firefox – but that doesn’t mean it can’t be overridden.

Check this out:

Open Firebug, and get to the console.  Then, click that little red arrow at the end of the input line so that you get the large box input on the right side of the screen.

Type this into the input box:

var alert_count = 0;
var old_alert = window.alert;
var alert_max = 5;
window.alert = function(alert_text) {
  if (alert_count < alert_max) {
    ++alert_count;
    old_alert(alert_text);
  } else {
    console.log("Reached maximum alerts");
  }
}

Now, hit “Run” at the bottom of that input window.  We’ve just overridden the window.alert function during runtime.

Hit “Clear” at the bottom of the input window, and type in:

for (i = 0; i < 10; ++i) {
  alert(i);
}

Hit “Run”.  Click “OK” for the first 5 alert windows, and watch as the rest of them are spewed out to the console.  Nice.

So, I don’t think this helps me much in creating my plug-in, but it’s interesting to see how window.alert is malliable at run-time.

This seems to be a more relevant discovery – Mozilla’s Chrome lets me create an alert popup with a checkbox using alertCheck.  I think this is exactly what I’m looking for.

I’ll tinker with it over the next few days, and post some code.

Be the first to like.

Like

Unlike

When I don’t have work to do, I get antsy.

And right now, I’ve got no work to do.

So I’ve come up with a project for myself:  remember how I created a Firefox Plugin a few months back?  I’d like to make another one – but this one will actually serve a useful purpose.

Have you ever been to a page that suddenly started spewing window.alert boxes at you?

If you haven’t, open up Firebug, and paste this into the console:

for(i = 0; i < 10; ++i){ alert(i); }

Now imagine if instead of 10 alert boxes, it spewed hundreds…or thousands….or god forbid, it uses a while(true) loop, and throws infinity alert boxes at you.

It totally cripples Firefox. It’s a super simple browser DoS attack.

Mozilla knows this, but so far, no solution except for killing the Firefox process, or disabling Javascript manually, or with NoScript (a plugin that I highly recommend).

Google Chrome has solved this problem by providing a checkbox on alert dialogs that allow a user to disable future popups from the current site.

Cool.  I want Firefox to have the same feature.

So, this summer, I’m going to try to build a Firefox Plugin that will override the standard window.alert function, with one that provides a checkbox, letting the user disable future alerts.

I don’t even know if this is possible, but I’m looking into it.

I’ll blog my research and progress as I go along, and share my code / final plugin when it’s all finished (or when I abandon it…hey, it happens).

So stay tuned.

2 people like this post.

Like

Unlike

ANOTHER UPDATE: Whoops.  Fixed the links to the auction and the St. Catharines Standard article.

UPDATE: Apparently, the Feds are getting in on the online auction circuit too.

Over the past three summers, I’ve been employed by the District School Board of Niagara as an internal web application developer.

One of my first jobs in the summer of 2006 was to rebuild the online auction application that the DSBN Purchasing department ran.  The original auction let the Board dispose of old equipment quickly and easily, and was quite popular.  Unfortunately, it was also written in (almost) unintelligible/unmaintainable Perl.

So I rewrote it by myself, and learned PHP/MSSQL along the way.  We called this new auction site The Government Surplus Online Auction, and we opened it up so that other government agencies could also post items for auction.

Things went along fine until last summer, when the site got attacked by an SQL Injection bot.  Back in 2006, I had no idea what SQL injection was, or how to guard myself.

So there I am – I’ve just come back from a camping trip, my inbox is packed with complaints, and I’ve got three weeks until school begins.  Crap.

Luckily, I had plenty of tools at my disposal.  My web app development skills and practices had evolved dramatically since 2006, and I had been itching to reimplement the auction anyhow.  The SQL Injection attack was a perfect excuse for me to gut the entire application, and rebuild from scratch.

And I did.  I rebuilt the whole thing from the ground up in three weeks.  It’s been almost a year since it was deployed, and I’m still very happy with its performance, and the code that runs it.

I’m not happy with its overall UI design.  I think there are plenty of improvements to be made in that regard.  Luckily, it’s coded using a light MVC framework that I designed/built myself, so reskinning shouldn’t be too hard for whoever decides to work on it…

Apparently, I’m not the only one happy with the auction site.  Check out this article (now without annoying print dialog).

I just checked the logs today – we hit a new record: an aerial truck went for $22,000 dollars.  With the Board receiving 5% ($1100) of that simply for hosting, I think everybody is walking away happy.

Here’s the auction.

Proof that I wrote it?  This’ll have to do.

Be the first to like.

Like

Unlike

Last night, I had a dream.

In it, I was breaking into a house.  In the house was a TV and a computer.  On the TV was Mario64, and on the computer, Starcraft.

Somehow, in my dream, I knew that both had been re-implemented in Javascript.  I was blown away.

When I woke up, I posted a little blurb about this dream on Twitter.  Paul Gries responded with this link:  Javascript Starcraft.

Dreams.  They can come true.  Except sometimes, you need Internet Explorer to run them.

Be the first to like.

Like

Unlike

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.

Like

Unlike