I am aware that the Facebook Image-to-Email Firefox extension is (once again) broken, and given that version 1.1 installed on Firefox 2.0.0.8 was working, and now version 1.1 installed on Firefox 2.0.0.8 is not working, it has to be due to a change that Facebook made. The problem is that I can't discern any relevant changes in Facebook's profile pages that would cause a problem.

The crux is this: I'm getting an NS_ERROR_DOM_SECURITY_ERR error when trying to run context.getImageData(). From what I've read, this implies that the JavaScript is not in the same domain as the image that was fed into the canvas and/or does not have permission to know the image's contents, but as far as I can tell, Facebook didn't change where the e-mail images are coming from, so that would seem to be a strange problem to have.

Any insight into this is appreciated.

The massively popular social network Facebook uses images to display the e-mail addresses of your friends, making it impossible to copy the e-mail address or click on it to send e-mails to your friends, thus making Facebook's own proprietary in-site messaging system more attractive to its users. Yesterday, Gervase Markham posited that it should be possible to determine the text displayed in the image programmatically by way of the canvas tag and some JavaScript. I'm writing this to confirm that it is indeed possible and has been achieved.

The extension I've written to do this is called Facebook Image-to-Email. On any Facebook page containing an e-mail address image, the extension converts the image to text using the following workflow:

1. Copy the image to a canvas using drawImage()
2. Scans through the canvas to find matches for a pre-determined set of character sprites using getImageData
3. Replaces the image with a clickable text e-mail address

Here's an example of a "before" view:

And "after":

Of course, this appears to be pretty simple. Ironically, the hardest part of solving this problem was the only part that Gervase remarked would be trivial: matching the image against a set of known character patterns. Since the font is not monospaced, and certain letters bleed into each other when adjacent (such as "89" and "ef"), it wasn't possible to just store the pixel values for each full letter. What I ended up doing was only matching against only the center of the letters (which are never affected by adjacent letters) and just ignoring character edges.

One other detail as to the implementation: there appears to be some sort of security restriction in Firefox on reading data from images that are not in the same domain as the script reading them. For example, trying to call getImageData() from the chrome on a canvas that contained an image loaded from facebook.com returned null every time; the same happened if the script was running locally but loading a remote image. For this reason, the actual scripting that converts the image to text has to be injected into each page that requires it so that it appears to be running in the same domain as the image.

I'm not claiming that this is the most efficient implementation, but it is definitely complete. In my testing so far, it has correctly identified 100% of the e-mail addresses displayed in the images.

Kevin Rose's latest project, Pownce, has a glaring security problem on its front page. The JavaScript that Pownce uses in its login form can reveal your password in plain text on the screen. Here are the steps to reproduce the problem in Firefox:

1. Login to Pownce via http://www.pownce.com/. Allow Firefox to save your login information for next time, and then log out.

   

2. Navigate to http://www.pownce.com/ and type the first part of your username in the "Enter username..." box. Firefox will supply all of the matching usernames it remembers for this site. (So far, so good.)

   

3. Select your username and press return to have the browser autofill the rest of your information. Oh look, there's your Pownce password in plain view! I hope no one in the room was watching you login...

   

The method that Pownce is using to show the "Enter password..." prompt in the password field is the reason for this malfunction; browsers force all text in password fields to be hidden with asterisks, so if you want to show normal text in a password field like Pownce has chosen to, you have to do so in a non-standard way.

This bug affects Firefox and Netscape users who have JavaScript enabled, but it doesn't affect Safari users.

There are a lot of common programming algorithms that are built into various languages as functions: checking if an array contains a certain item, trimming a string, mapping a function to an array, etc. JavaScript doesn't have a lot of these built-ins, but with prototypical inheritance, it's easy enough to add them.

I'm thinking it might be beneficial to include with the browser a "JavaScript extension" file - that is, one JS file packaged with the browser that contains function definitions for these common tasks. It wouldn't necessarily be visible to scripts in webpages (and it would probably be a bad idea to do so, as it might break current scripts), but it could be utilized by extension developers if they choose to do so, just by adding this to their main XUL overlay file:

<script type="application/x-javascript" src="chrome://browser/content/extend.js"></script>

I know that I've had to write an Array.contains function for just about every extension I've written, so I know this kind of library would come in handy. These are the functions that got me thinking about this:

String.reverse
String.trim (and maybe ltrim and rtrim, but these tend to be used less)
String.md5
String.stripTags (not as keen on this one)
Array.contains
Array.map
Array.random
Array.shuffle
Date.format (a pseudo-port of PHP's date() function)

Any recommendations for other functions that might as well be standard?

Note: As this is being posted on my personal site, this is no guarantee or indication that Netscape Navigator 9 will be supplying this kind of library. If the feedback is positive though, I would definitely bring it up for consideration.

Yahoo!'s video of Douglas Crockford's The JavaScript Programming Language lecture is definitely the best overview of JavaScript that I've ever seen. (The first part is embedded below, and the remaining 3 parts are linked after that.) I saw it a while back, but it's been getting a fair amount of press in the social media space this week.

Part 2 Part 3 Part 4

I'm self-taught when it comes to JavaScript, as I've never taken a formal class that dealt with it, and it was refreshing to find that I've managed to pick up most of the good habits that Crockford recommends while avoiding most of the bad habits he cautions against. I must have made good choices as to which sites' and browser extensions' source code I studied.

I think next I'll get started on watching their "Advanced JavaScript" series.