What I learned from writing my first Chrome extension
Clone this wiki locally
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:
The second way is to click on the extension icon, then pick a date which is copied it to 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.
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:
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.
This applies to all web development, not just extensions.
I'm handling dates so it's not OK to assume dd/mm/yy or mm/dd/yy.
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.
Here are some things I will add to this extension given time and motivation.
- Be more selective about which input boxes I target. At the moment it targets all of them.
- Fix the localisation hack (see issue).
- Make it easy to toggle the extension on and off. At the moment you have to enable/disable it.