What I learned from writing my first Chrome extension

EdGuiness edited this page Dec 8, 2012 · 7 revisions

Intro

I wrote a Chrome extension to add a calendar (date picker) to any web page. Initially I just wanted to add a calendar to Google forms but then thought it might be useful on other pages as well. So I made it into an extension and published it in the Chrome web store.

How the extension works

There are two ways of using the extension. The first is where you double click on a text-box to display the date picker:

Date picker use case 1, insert directly into text field

The second way is to click on the extension icon, then pick a date which is copied it to the clipboard:

Date picker use case 2, select a date into the clipboard


What I learned

You need to pay Google before you can publish on the Chrome web store

It's just $5, I think they do this to minimise spam submissions.

You can also publish outside the Google ecosystem on sites like chromeextensions.org, though I assume these sites are not curated and are less patronised than the Google web store.

If you used the Chrome Developer Dashboard before the first developer preview release of the Chrome Web Store you don't need to pay the fee. (source)

The "Hello, World!" tutorial is well worth doing

It takes literally five minutes. Ten minutes if you study it carefully.

The tutorial really helped. For instance I learned that almost everything about your extension hinges on the manifest file.

Upload screen captures of your extension to avoid looking crap

These screen captures are used on a large splash screen shown for your extension in the web store. Technically you don't need them but your extension will look crap without them.

You can upload either 1280x800 or 640x400. If you upload 1280x800 it will be scaled down to 640x400. The larger resolution is in anticipation of hi-res screens.

It is easy to get a reassuring green tick beside your extension

Here is my green tick, highlighted.

Date picker, reassuring green tick

At first I thought these were something special, like a sign of Google-affiliation or something. They reminded me of certified twitter accounts. I guess others might assume the same but actually these green ticks are nothing very special.

To get a green tick you just need to own a web site and associate it with your extension when you upload it. The site must be listed in Google's webmaster tools. I have a few sites listed so it was almost no extra effort to get the tick.

You need to ask for permission, but so do most extensions

When a user installs an extension they are shown an intimidating confirmation dialog like this:

Date picker, permission confirmation dialog

Personally I will abandon the installation of an extension if I don't see the need for it to have certain permissions. I may not be a typical user in this regard.

Also, you don't necessarily need all the permissions you might assume. My extension writes (a date) to the clipboard but since I'm not reading from the clipboard I don't need to ask for clipboard permission.

You must be fluent in JavaScript

Day to day I'm a .Net/C#/TSQL/Perl programmer but you can't go far in the web world without knowing JavaScript, and not just a little, you have to know it really well. This short experience showed me I have some catching up to do. Also, jQuery and jQuery UI is FTW, despite the widespread pathological use of its dollar symbol.

This applies to all web development, not just extensions.

Localisation in JavaScript is not so easy

I'm handling dates so it's not OK to assume dd/mm/yy or mm/dd/yy.

The excellent jQuery UI supports localisation, which is nice. The hard bit is working out which locale should be applied. There is navigator.language, browser.language, navigator.userLanguage, and so forth. There is also the 'Accept-Language' HTTP header which isn't available to JavaScript.

If there is a clean solution to this I'd love to hear about it. At the moment I have a (probably broken) hack in place and an open issue.

Not every page uses <input type="text"> like you might expect.

Google Forms uses <input> fields, so I can add the date-picker to those fields. But Google spreadsheets doesn't. I gave up trying to figure out what they do under the hood and instead added the copy-to-clipboard feature as a workaround. Not as direct, but better than losing my sanity over something I probably shouldn't be doing (because it's fragile) in the first place.

TO DO

Here are some things I will add to this extension given time and motivation.

  1. Be more selective about which input boxes I target. At the moment it targets all of them.
  2. Fix the localisation hack (see issue).
  3. Make it easy to toggle the extension on and off. At the moment you have to enable/disable it.

Ed Guiness
@KiwiCoder
http://socialcoder.org