How to build a Twitter extension for Chrome

Ars takes a close look at the Chrome Web browser's new extension system. In …

Google's shiny Chrome Web browser is shaping up to be a real winner. It offers great performance, relatively good stability, and an increasingly nifty feature set. Although it has a lot to like, it's lack of extensibility is impeding adoption among technology enthusiasts. This is a weakness that the Chrome developers are keen to address.

The Chrome developer channel builds recently gained an experimental extension system that makes it easy for third-party developers to add new features and expand the browser's capabilities. It's still at an early stage of development and has a long way to go before it can be used to replicate the broad spectrum of functionality provided by the most popular Firefox extensions. But despite the current limitations, it is off to a good start and is already capable of facilitating some useful enhancements.

I made my own custom extension that adds a Twitter toolbar to the bottom of the browser window. It includes a textbox that can be used to post Twitter messages and it also loads the latest @replies to the user and displays them in a marquee that scrolls horizontally across the window. In this article, I'll show you how I made the extension and supply a brief overview of other features that are offered by Chrome's extension system.

Overview of the extension system

Chrome extensions are built primarily with HTML and JavaScript. This means that Web developers can use their existing skills and dive into Chrome augmentation without having to learn a completely new set of technologies. Access to native browser functionality—such as tabs, windows, and bookmarks—is provided through a set of specialized JavaScript APIs.

These consist of functions for manipulating those aspects of the browser and an event system which allows developers to bind JavaScript callback functions to specific browser events, such as the creation of a new tab, in order to implement custom behaviors. There is also a message-passing system that allows data to transmitted between various components of an extension.

As the extension system is not yet mature, the APIs are subject to change, are not completely documented, and are still somewhat inconsistent. Only the basics are supported right now, but the underlying model seems relatively strong, which makes it seem likely that a lot more internal browser functionality will be exposed to extension developers in the future.

The extension system offers several integration points in the Chrome user interface. At the present time, there doesn't appear to be any way to add items to the browser's standard toolbar or menus. My Twitter extension prototype uses a toolstrip, which is a segment in a special toolbar element that runs along the bottom of the browser window. The bar can contain multiple toolstrip extension items alongside each other and it is apparently possible to drag them around, though that functionality doesn't seem to be fully implemented yet.

Page Actions are another major integration point provided by the extension system. Page Actions live on the right-hand side of the URL bar. These can be programmed to show up selectively when the page in the current active tab has some relevant characteristic. One of Google's examples to demonstrate Page Actions shows how it can be used to display a clickable RSS icon in the URL bar when the user visits a page with feeds.

A screenshot of Google's RSS extension

Chrome extensions support several kinds of scripts. There are content scripts which allow developers to dynamically manipulate the contents of webpages and there are background scripts which run persistently. The content script mechanism reminds me a lot of Firefox's Greasemonkey add-on. The content scripts are activated when the user surfs to a webpage with a URL that matches the associated URL pattern. The wildcard glob symbol can be used in a URL pattern to do generic matching. For example, if I wanted to make a content script that manipulates Ars Technica news articles, I might specify the following pattern: http://arstechnica.com/*/news/*

Due to the experimental nature of the extension system, it's not fully integrated with the browser yet. In the build of Chrome that I tested, you can have the browser initialize an individual extension by launching it from the command line with the --load-extension parameter and supplying a full path to the directory that contains the extension. This appears to be changing very soon, however, because the most recent documentation in the version control system has a screenshot of a nifty extension management interface at "chrome://extensions" which includes buttons for extension installation.