I am experimenting Mozilla's XUL to write Firefox plugins. I never had a
chance to give it a shot before, so let's roll.
To try it out, I decided to implement a very simple Twitter Firefox plugin that works a bit like TweetDeck: The plugin adds a new action in the contextual menu labeled "Twitt it!". When you click on it, a window pops, with a text box containing a short url for the current page. The user can complete the text and send a twitter about the page.
I am pretty sure there are hundreds of similar plugins out there, but
it's a pretty simple use case to learn XUL :)
Before I could start to write the Firefox plugin, I needed a url
shortener. I had two options: a shortener local to the plugin or an
online service. A local shortener is probably more efficient, but an
online service is more fun and more interesting to code: it can be
shared across clients and it's a first step to a more complex plugin
that works with online services.
Services likes bit.ly provide such API, but you have to register of
course, and you have a limited number of calls to the service.
It's not like I am going to make a zillions calls to such a service,
but it's so simple to implement that I decided to write my own.
To store the URLs I used a Redis storage. This is of course overkill
for an experiment, but it was a good excuse to try it out and see how
Redis fits my brain.
Setting up a Redis server on my MacBook was done in a matter of
minutes. You just have to compile the source and you get a redis-server
binary you can launch and eventually daemonize:
14 Apr 23:07:28 * Warning: no config file specified, using the default config. In order to specify a config file use 'redis-server /path/to/redis.conf' 14 Apr 23:07:28 - Server started, Redis version 1.2.6 14 Apr 23:07:28 - DB loaded from disk 14 Apr 23:07:28 - The server is now ready to accept connections on port 6379 14 Apr 23:07:28 . DB 0: 1 keys (0 volatile) in 4 slots HT. 14 Apr 23:07:28 . 0 clients connected (0 slaves), 294928 bytes in use, 0 shared objects
From there, you can use the redis Python client, which provides all
Redis commands. The great thing about this client (I didn't try all of
them though) is that it is self-documented. All you have to do is read
the Redis Commands Reference here :
them and you have the Python methods.
Redis can be used as a classical key/value storage, but also has
convenient APIs to work with lists and sets. In other words Redis can
handle many use cases out of the box.
To store URLs in Redis, I used the simple set/get APIs and stored two
key/value per URL: long_url/short_url and short_url/long_url. This
takes more room but makes all lookups efficient (that is, 0(1)).
I am pretty new to Redis, so if you think this is not optimal, let me
The web service
The web service is just composed of two methods:
1. /urls/short_id : when reached, redirect to the page corresponding to the short_id 2. /shortener: a GET method that returns a short url, given an url
This is a perfect use case for the Bottle micro-framework !
Nothing particular here, besides the fact that it took me 30 lines or
so to write it !
The code is here : http://bitbucket.org/tarek/urltotwit/src/tip/shortener/shortener/main.py
One thing I have to add is a security layer once this is published on
To start things out, I used the Extension Wizard located at
http://ted.mielczarek.org/code/mozilla/extensionwiz that generated a
skeleton of the plugin. The Firefox versions in install.rdf are a bit
outdated, so I had to change the em:maxVersion value to 3.5.*
so it would work with my 3.5.9 version. I am not 100% sure the layout is
still fully compliant with the best practices but it worked.
From there, I created a new XUL file called send_twitter.xul in
content. This file contains the window that is displayed by the
plugin. It uses jQuery so its simple to call the shortener via Json.
initTwit() calls the shortener via Json, and fills the text box with
the short url. This version points to my local Shortener instance.
What stroke me when building this window was the need to rebuild the
plugin and relaunch Firefox everytime I changed it. And working with XUL
windows is not obvious because of the way the layout works (v/hboxes). I
ended up working with a Live Xul editor:
TDD environment to work with Firefox Plugins ? Investigating..
The (unfinished) code is here: http://bitbucket.org/tarek/urltotwit/src/tip/urltotwit%40tarek.ziade.org
If you are a XUL coder, please comment !
I need to finish the work on the part that sends the twitter via the
user account. So far I found XUL pretty nice. It feels like working in
an enhanced HTML language. I also need to read some about the security
model and the development best practices.
On Python side, I am pretty happy with the Redis+Bottle small stack, and I'll probably add a small web UI and make it available on ziade.org. I'll be the third one at my Python User group to have my own url shortener ;) (Gawel, David'Bgk)
"Twitter Plugin example"
: http://tarekziade.files.wordpress.com/2010/04/picture-36.png http://bitbucket.org/tarek/urltotwit/src/tip/shortener/shortener/urlstore.py http://bitbucket.org/tarek/urltotwit/src/tip/shortener/shortener/main.py http://email@example.com/