var request = "--boundary\r\n some text\r\n--boundary" + fileBytes + "\r\n--boundary--";

I had to spend a bit of time getting this just right in order to allow ScribeFire to upload media to Posterous, so I'm posting below the final solution at which I arrived; it was cobbled together from a dozen different examples I found around the Web (none of them solving the full problem), then lovingly massaged into the elegant function you see before you. With this function, you can pass in an array of fields and files, and the request will be crafted and returned to you, ready for upload.

Instructions for use are in the comment block at the top of the function.

function createPostRequest(args) {
  /**
   * Generates a POST request body for uploading.
   *
   * args is an associative array of the form fields.
   *
   * Example:
   * var args = { "field1": "abc", "field2" : "def", "fileField" :
   *              { "file": theFile, "headers" : [ "X-Fake-Header: foo" ] } };
   *
   * theFile is an nsILocalFile; the headers param for the file field is optional.
   *
   * This function returns an array like this:
   * { "requestBody" : uploadStream, "boundary" : BOUNDARY }
   *
   * To upload:
   *
   * var postRequest = createPostRequest(args);
   * var req = new XMLHttpRequest();
   * req.open("POST", ...);
   * req.setRequestHeader("Content-Type","multipart/form-data; boundary="+postRequest.boundary);
   * req.setRequestHeader("Content-Length", (postRequest.requestBody.available()));
   * req.send(postRequest.requestBody);
   */

  function stringToStream(str) {
    function encodeToUtf8(oStr) {
      var utfStr = oStr;
      var uConv = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]
                    .createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
      uConv.charset = "UTF-8";
      utfStr = uConv.ConvertFromUnicode(oStr);

      return utfStr;
    }

    str = encodeToUtf8(str);

    var stream = Components.classes["@mozilla.org/io/string-input-stream;1"]
                   .createInstance(Components.interfaces.nsIStringInputStream);
    stream.setData(str, str.length);

    return stream;
  }

  function fileToStream(file) {
    var fpLocal  = Components.classes['@mozilla.org/file/local;1']
                     .createInstance(Components.interfaces.nsILocalFile);
    fpLocal.initWithFile(file);

    var finStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                      .createInstance(Components.interfaces.nsIFileInputStream);
    finStream.init(fpLocal, 1, 0, false);

    var bufStream = Components.classes["@mozilla.org/network/buffered-input-stream;1"]
                      .createInstance(Components.interfaces.nsIBufferedInputStream);
    bufStream.init(finStream, 9000000);

    return bufStream;
  }

  var mimeSvc = Components.classes["@mozilla.org/mime;1"]
                  .getService(Components.interfaces.nsIMIMEService);
  const BOUNDARY = "---------------------------32191240128944"; 

  var streams = [];

  for (var i in args) {
    var buffer = "--" + BOUNDARY + "\r\n";
    buffer += "Content-Disposition: form-data; name=\"" + i + "\"";
    streams.push(stringToStream(buffer));

    if (typeof args[i] == "object") {
      buffer = "; filename=\"" + args[i].file.leafName + "\"";

      if ("headers" in args[i]) {
        if (args[i].headers.length > 0) {
          for (var q = 0; q < args[i].headers.length; q++){
            buffer += "\r\n" + args[i].headers[q];
          }
        }
      }

      var theMimeType = mimeSvc.getTypeFromFile(args[i].file);

      buffer += "\r\nContent-Type: " + theMimeType;
      buffer += "\r\n\r\n";

      streams.push(stringToStream(buffer));

      streams.push(fileToStream(args[i].file));
    }
    else {
      buffer = "\r\n\r\n";
      buffer += args[i];
      buffer += "\r\n";
      streams.push(stringToStream(buffer));
    }
  }

  var buffer = "--" + BOUNDARY + "--\r\n";
  streams.push(stringToStream(buffer));

  var uploadStream = Components.classes["@mozilla.org/io/multiplex-input-stream;1"]
                       .createInstance(Components.interfaces.nsIMultiplexInputStream);

  for (var i = 0; i < streams.length; i++) {
    uploadStream.appendStream(streams[i]);
  }

  return { "requestBody" : uploadStream, "boundary": BOUNDARY };
}

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 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.

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.

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.

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.