Less IMDb, our browser extension for de-cluttering the otherwise useful movie site, seems to have achieved good traction. In its first month, it was installed more than 8,000 times, and made it to the main page of Apple’s Safari Extensions Gallery.
It is now available for Safari, Chrome and Firefox. A quick break down by the numbers: 1
- Safari: 6,118
- Chrome: 849
- Firefox: 1,088
I’m not surprised the Safari version is way ahead of the others; it came first, and got a big boost from the Apple-centric Daring Fireball site. But I would have expected more love from Chrome, honestly.
I’ve asked Ryan Nelson, who did all the design and coding, to give a walk-through of our process building and deploying the extension. This recap has a fairly high geek factor, but you may find some of the decision points interesting even if the details whoosh over your head.
Per Twitter, most people hated the newly-redesigned IMDb. When John first brought up the idea of reformatting it with a Safari extension, his direction was minimal and straightforward: move credits from below-the-fold to up near the top.
He even provided a mockup of how it should look. When working on a new design, it’s fairly typical for John to create a wireframe or rough as a starting point:
And how would the user control the extension? John’s original suggestion:
John essentially decided what content Less IMDb would show, and what it would hide. But how would it deal with other bits of the interface, like IMDb’s ability to expand or collapse filmography listings?
The “less features is a feature” attitude informed the rest of the choices made when stripping IMDb to its bare bones.
Nuts and Bolts
To start, I worked from a locally-saved copy of IMDb’s movie and bio page HTML. This way I could experiment with the IMDb’s markup without an extension to inject my javascript or CSS files on the actual IMDb.com. I learned along the way more about how Safari extensions are put together with a little help from Nima Yousefi,2 as this was my first one.
Using a combination of CSS and the ubiquitous jQuery javascript library, I rearranged and hid content.
I didn’t approve of IMDb’s use of tables for layout since tables are intended for tabular data. It’s not 1994 anymore.
Since the original extension was only intended to run on Safari, I was free to use nifty CSS3 effects like drop-shadows, rounded corners, and gradient backgrounds, and one other in a well-hidden Easter egg.
But I was careful not to overwhelm the design with these goodies. In fact, I removed some that IMDb was already using. For example, every container div in IMDb’s main column had gray rounded borders. Outlining every block of content with rounded gray borders is a trap every designer has been caught in. I’ve been there. Were they needed?
No. I lost them. Much cleaner look.
The first prototype simply moved the page’s main photo and description to the existing sidebar. The page’s heading went along with it. That got things out of the way instantly, and moved the credits closer to the top. Form a design perspective, it didn’t quite make sense for the page heading to be on the right, since English is read from left-to-right.
I needed to move the heading on the left above the credits.
But since the objective was to move the credits higher on the page, and the filmography navigation was already pushing those down, I opted to move the entire sidebar to the left, simply to keep the heading in its proper place.
The final arrangement seemed to work well.
The Control
Because Safari extensions support custom browser toolbar buttons (up in the area with the address bar and arrows), I was keen on trying out that feature. But it was unneeded. John’s suggestion of including controls in the page itself made more sense.
Sometimes bells and whistles sound best unplayed.
While designing the control, I took heavy advantage of Safari’s fantastic webkit rendering engine and challenged myself to create a nifty-looking controller using no images. The borders, lines, gradients, shadows, and circles in Less IMDb’s on/off control are all generated using CSS3.
I eventually used a graphic for the “Less IMDb” label, which is the only image included in the extension.
In fact, this is a rare occasion where I did all the design purely in CSS, rather than mocking it up in photoshop beforehand, then duplicating it in CSS. The controls found on the Less IMDb page at Quote-Unquote Apps are actually images I recreated in photoshop for browser-compatibility purposes.
Here is my original design. I was happy with how the CSS3 was looking, but the design took up more space than it needed, and would cover part of the page when the browser window is resized smaller than 1000px wide. Back to the drawing board.
In an effort to save space, I moved the control flush to the top-right edge of the browser window, rounded only one corner, and used webkit’s support for the CSS3 transition property to slide the control in and out of view when moused-over. I added more attention to detail by changing the opacity and added a slight delay before the controller hides itself again to prevent it from jumping in and out of view wildly.
The Icon
Creating the icon was a quick process. I showed John a few options, and away we went.
A few losers. I still like the yellow ones.
Assistants, Utilities, Keys, Certificates, and Manifests
Although there are some hoops to jump through, Apple makes developing extensions for Safari fairly straightforward. The tools to create a new one are included in the browser itself (“Develop” > “Show Extension Builder”).
Before any extension can be run, however, you’ll need to install a developer certificate.
Registering as a Safari developer is free. After a few forms and an email verification, you’ll be all set.
Once signed up, you’re ready to create a certificate. Log into your new developer account and enter the Developer Certificate Utility. It’ll walk you through the process.
Keep the Safari window open, and launch Keychain (“Applications” > “Utilities” > “Keychain”). The certificate assistant walks you through the process of being walked through the process.
Go to “Keychain Access” > “Certificate Assistant” > “Request a Certificate From a Certificate Authority.”
The assistant will ask for some information. Enter the email address you created the developer account with, label your key with a “Common Name” and choose “save for disk.”
Go back to your Safari window, where the certificate utility should be asking to upload the key you just created. Find that newly-saved file and upload it.
A couple clicks later you’ll be able to download your developer certificate.
Almost done, but you’re not out of the woods yet.
Find the certificate Safari downloaded and double-click it. Keychain will install the certificate. With a developer certificate installed, you’ll now be able to install and test Safari extensions created with Safari’s extension builder (“Develop” > “Show Extension Builder”).
Here’s what ours looks like with i’s dotted and t’s crossed.
When the extension is ready for distribution or testing, “Build Package” will create an installable .safariextz file. Anyone with a developer account is free to submit an extension to Apple’s Extension Gallery at https://developer.apple.com/submission/safari, but don’t expect this to be a quick process. It took almost two months before Apple listed Less IMDb.
And remember that Apple doesn’t host any files so you’ll need a reliable web host for the extension and update manifest (the file that lets Safari know when the extension is ready to be updated).
Porting it
When the Safari extension was first released, the most common responses (other than universal praise and brief world peace) were requests to port the extension to other browsers. Chrome supports its flavor of browser extensions which, because of their shared webkit rendering engine under the hood, are very similar.
The easiest way to support Firefox was create a user script for Greasemonkey, the widely-used Firefox add-on that allows users to customize websites by installing bits of code. A little digging revealed that Chrome also features some built-in support for Greasemonkey user scripts.
Great news, right? Simply create one user script, and it would take care of both Chrome and Firefox. My remaining work was just cut in half!
This would be a poor choice on my part.
Auto-Update Asphyxiation
One great feature of Safari is its ability to automatically update installed extensions. Chrome supports identical functionality — but it’s only available to proper Chrome extensions, not Greasemonkey user scripts. Even though Chrome installs and displays the user scripts alongside other proper extensions, they are second-class citizens.
Since all versions of Less IMDb needed an auto-update feature to keep up with future adjustments or bug-fixes, we needed a method that could work on both Firefox and Chrome.
There are a handful of user script auto-updaters out there, but most are clunky or rely on someone else’e web server to function. I began experimenting with all I could get my hands on. Some worked ok, but none worked in Chrome.
I attempted to write my own simple auto-updater which would communicate with an XML file on quoteunquoteapps.com using AJAX. I attributed my failures to my lack of AJAX prowess before eventually discovering that cross-domain requests are not allowed in Chrome user scripts.3
Less IMDb simply wasn’t allowed to talk to the outside world. Attempting to combine the two versions into one was severely crippling the Chrome version.
After re-grouping, it was obvious that the Safari extension needed to be ported more-or-less directly to Chrome. That was relatively straightforward, and was finished in about a day. The attempt to combine both Chrome/Firefox versions wasn’t a total failure, though. The legwork to get Less IMDb to run in Firefox was already done. Presto–three versions of Less IMDb.
We’ll continue to update Less IMDb to address changes on IMDb’s side, but for the most part we consider it done. Ryan’s projects for the next few months include some bona fide iOS apps and continued refinements around this site.
Lastly, I need to give props to another Safari extension I found incredibly useful in the process: Coda Notes by Panic. As Ryan sent over demo links, Coda Notes made it simple to make scribbly changes. I highly recommend it to anyone who needs to offer feedback to web designers.
- These stats reflect downloads from our site, not any direct installs via the Safari Extension Gallery. As the extension updates, we should be able to pull more precise figures. ↩
- A righteous dude who is helping us with some other projects as well. ↩
- They were allowed in Firefox user scripts, but only by using the GM_xmlhttprequest function, which Chrome does not support. ↩