Saturday, August 15, 2009

Using jQuery to build Google Chrome extensions

Today I wanted to learn how to write an extension for Google Chrome. The Chrome extension system is not yet released, but there is alpha support for developing extensions. A HOWTO describes what you need to do. This is actually quite easy: Chrome extensions are very much like regular web pages. They consist of HTML, CSS, JavaScript and images. Some JSON metadata describes the extension that is then packaged into a *.crx file.

As I don't like raw JavaScript very much, I wondered whether it is possible to use my favorite JavaScript library jQuery in Chrome extensions. It turned out that this is actually very straight-forward. It basically works out-of-the box as you would expect it.

I tried to use jQuery in a background page as well as in a content script. Here is the manifest.json file that describes my demo extension:

{
  "name": "A jQuery Chrome extension",
  "version": "0.1",
  "description": "Use jQuery to build Chrome extensions",
  "content_scripts": [
    {
      "matches": ["http://jquery.com/*"],
      "js": ["jquery-1.3.2.js", "content.js"]
    }
  ],
  "background_page": "background.html"
}

To use jQuery in my content script 'content.js', it was enough to list the stock jQuery JavaScript file as the first content script. 'content.js' then has jQuery available:

$('a').css({'background-color': 'yellow'});

Using jQuery in the background page is even more straight-forward. Simply embed it into 'background.html' the same way as you would for every other HTML page:

<html>
  <head>
    <script src='jquery-1.3.2.js'></script>
    <script src='background.js'></script>
  </head>
</html>

This was extremely easy. I think the Chrome team made the right decision to build their extension model on the web page model. Now any web developer can start writing Chrome extensions without having to leave their comfort zone.

Let me end this post with two disclaimers: While I do work for Google as a software engineer, my work is not related to Chrome at all. My interest for writing Chrome extensions is purely private. Also, I have not written any large Chrome extensions. So, it's easily possible that you will encounter problems when using jQuery in a complex use case. YMMV.

Thursday, January 8, 2009

Embedding cover images in MP3 files for Android, iTunes, iPhone, Windows Media Player, and Windows Explorer

This is the continuation of a short series of blog postings about how I tag my MP3 files. Today I'll share my experience in displaying cover art in various media players.

I am using two portable players: An Android phone and an iPhone. On my laptop I usually use iTunes, but sometimes I fall back to Windows Media Player because of its fast startup time. I keep MP3 files in individual folders per album, so I also want the thumbnail view of Windows explorer to show the cover art.

Let's start with a short summary of what works for me: Embed cover images into the first track of every album, and additionally save them as Folder.jpg files in the album directories. See below for the long story.

Analysis of different players

There are various ways of attaching cover art to MP3 files, and every player that I use seems to do it slightly differently. Here is what I found out:

  • iTunes stores cover images in its own proprietary storage in some ITC2 format that I do't know anything about (My Documents\My Music\iTunes\Album Artwork\Download\6118F104927B998E\10\10\05\6118F104927B998E-6DBB7171FCCCC5AA.itc2). Fortunately, it also shows images that are included in the MP3 files.
  • The iPhone seems to display whatever iTunes displays.
  • Android also works fine with cover images embedded into the MP3 files.
  • Windows Explorer expects cover art in Folder.jpg files. It does not show embedded images.
  • Windows Media Player seems to keep cover art in a whole bunch of different hidden files like Folder.jpg, AlbumArtSmall.jpg, AlbumArt_{SOME_GUID}_Large.jpg, etc. It does read covers from the MP3 files however. If you import a MP3 file into the Windows Media Player library it automatically generates all files. This includes Folder.jpg, which is needed for Windows Explorer

In summary, all of my players show images that are embedded in MP3 files. It seems to be enough to embed a cover image into the first track of an album. Windows Explorer needs Folder.jpg, which is easiest to create by importing files into Windows Media Player.

Caveat: Windows Media Player resizes Folder.jpg files to 200x200 pixels without asking, so don't use this file as your primary storage. I want my covers to be 600x600 pixels, which seems to be a good compromise between file size and high quality (e. g. for iTunes cover flow). Because of that I have an additional Cover.jpg file in all of my album directories. This is not needed for any player, but I like to have it there for scripts that I use, e. g. to generate listings of my files.

Getting and embedding cover images with iTunes

Before you can embed cover art into an MP3 file you need to have it. Of course you can scan them yourself, but I find it much easier to use iTunes, which has many album covers in a very high quality.

Here is what you need to do: Import the album MP3s into the iTunes library and choose "Get Album Artwork" in the album context menu:

Sometimes iTunes does not have a matching cover - then you are back to scanning yourself. But more often than not you get a cover image. As mentioned above, iTunes stores it in its own proprietary format, but fortunately it is quite easy to extract. Open the album and right-click the first track, and then "Get Info":

In the dialog that opens go to the "Artwork" tab, select the image and copy it with Ctrl-C or using the context menu. Then immediately paste it back using the context menu or Ctrl-V. Click OK and iTunes saves the image directly into the MP3 file.

It is worth mentioning, that you can of course also paste the copied image into your favorite graphics editor, or straight into an Explorer window. The latter creates a file "image 1.bmp", which you can then convert into a JPEG, e. g. to use it as Folder.jpg

If you don't want to create Folder.jpg yourself, simply import the folder with your MP3 files (and with the embedded cover) into the Windows Media Player library. It will then generate Folder.jpg for you.