The kthoom logoSometimes I get an idea and I just have to see it through to a point where it will let my brain go. At work Thursday we were all slobbering over Steve's iPad and someone brought up how cool the Marvel app is. I had to admit it was much nicer than any piece of software I'd used for viewing comics before on my laptop.

In the meantime, I've been carefully watching WebKit creep closer and closer to implementing the W3C File API (Go Kinuko!). Something I've been eagerly waiting for more browsers to do so you can open up local files in SVG-edit.

And then it hit me.

Why not a comic book reader done directly in the browser?

In case you don't know, comic book archive files are just ZIP or RAR files containing JPEG images. Browsers can handle images. Some browsers can now handle opening local files. Even binary ones. So theoretically you could write unzip/unrar in pure JavaScript, extract the JPEGs, turn them into data: URIs and shove them into an <image> element. You can even do the unzipping in a separate thread using Web Workers.

Theoretically.

kthoom was how far I was able to get in a weekend.

Some limitations:

  • Unzipping is slow. None of the code has been optimized yet and I'm probably doing a lot of really stupid things.
  • Only supports CBZ files, not CBR files at the moment - I am accepting patches (Update: Support for CBR and CBT were added later!)
  • Unzipping is really slow. I need to provide visual progress reporting from the Web Worker thread, I know.
  • kthoom will crash Firefox 3.6 about half the time. Firefox nightly (3.7) seems to handle it just fine. I opened this bug.
  • Did I mention that unzipping is slow?

If I'm honest, this was really an exercise to see just how easy/hard it would be to do something like this in the browser - and to get some hands-on experience with Web Workers. And hey, I'm not the first or even second person to think of doing unzip/deflate in JavaScript either.

It was my first experience writing JavaScript to handle binary files. It was fun. It took a weekend.

Some essential tools: Firebug, a hex editor, pen & paper, a clear mind, patience.

Now swinging my attention back to stuff I should be working on...

§832 · April 12, 2010 · JavaScript, RIA, Software, Technology, Web · Tags: , , · [Print]

3 Comments to “kthoom!”

  1. Jeff, did you know that Firefox has the ability to unpack zip (JAR) files natively? You should be able to do

    jar:my.zip!/file/within/zip

    If all you have is the data, you can probably construct a data: URI and have Firefox unpack it that way:

    jar:data:application/x-jar,00datahere!/file/within/zip

  2. Jeff says:

    Ha! Thanks Benjamin. I knew the browser had this capability because of the JAR/XPI thing. I just didn’t know it was exposed to non-privileged code.

    On the other hand, I’m looking at this as a web app that can be used on other browsers (eventually).

  3. Brad Neuberg says:

    Awesome! Great weekend hack.