Rewrite the Web with Chickenfoot

A number of plugins and extensions are available for the Firefox browser to allow developers to interact with the DOM and with other exposed parts of a web page. Tools such as the JavaScript Shell Bookmarklet, Firebug, Greasemonkey, and Platypus have proven useful for allowing developers to add custom interactivity to a page, debug DOM and CSS problems, and test ideas.

However, if a user wants to dynamically interact with multiple pages, to automate different parts of the Firefox interface, to script activities across a number of pages, or to work with both the web page and the local file system concurrently, the options have historically been limited. But this has begun to change recently with extensions such as CoScripter, and the extension that forms the subject of this article: Chickenfoot.

What is Chickenfoot?

Chickenfoot is a Firefox extension from the MIT User Interface Group. It offers the ability to:

• interact with the chrome of the browser
• use an interactive shell for manipulating the page and to monitor page interactions in various ways
• write scripts that run over multiple sites, so that one can write a script that visits one web page, copies some text from a part of the page, goes to Google, searches for that text, and then appends the first link to a page on the local filesystem

Chickenfoot is an extremely powerful tool for any developer wishing to automate actions or extend the functionality of the web pages he or she utilizes regularly.

Installing Chickenfoot

Chickenfoot is installed in the same way as other Firefox extensions: simply download and accept the XPI file that's available from the Chickenfoot install page.

Despite the fact that Firefox is a cross-platform browser, the extension works best on Windows. If you're on a Mac, you can still install Chickenfoot and play along with the code in this article, but you may see inconsistent behaviour. Unfortunately, until the kinks are ironed out, the warning this.docShell has no properties will appear frequently, and your output may not match that described here.

Once you've installed the extension and restarted your browser, you can access the Chickenfoot interactive shell by either pressing F8 or selecting the View > Sidebar > Chickenfoot menu option. The shell will open in a sidebar, and will look something like the image below.

When the Chickenfoot sidebar is first launched, it shows a split view -- the top panel contains a text field labeled Untitled; this is the input area where we'll write our Chickenfoot code.

The bottom panel contains four tabs. The tab that's selected by default is labelled Output, and displays a history of all your actions, and all of Chickenfoot's actions, that were applied to the browser. First, we have to tell Chickenfoot to record our actions, though -- click on the Actions tab, and make sure that the Record actions option is checked.

Let's test that our output is being captured. To do so, open a new Firefox tab and load the Google homepage. Once the page has loaded, click on the Images link in the top left of the page, which will take you to Google's Image Search. If you select the Chickenfoot Output tab once again, you should see the following text:

click("Images")

This is more than just a description of what has occurred -- it is in fact a snippet of Chickenfoot code! To test this code, click the Back arrow to return to the Google homepage, then copy and paste the snippet we created into the top Chickenfoot panel. Click the green arrow at the top of the panel, and your code snippet will be executed. The page will once again navigate to the Google Image Search page.

Ideas Behind Chickenfoot

Chickenfoot shares certain ideas with other tools that enable a scriptable web.

The main idea behind Chickenfoot is to provide users with a tool for creating macros that anyone can use or write, without needing a programmer's assistance. I should note here that it's my opinion that this aim will not be achieved, because there will always be demand for scripts with complex functionality that can only be implemented by a programmer. However, the fact that this idealistic goal is the driving force behind Chickenfoot has resulted in a very useful tool.

These aims are similar to those of CoScripter -- indeed, CoScripter uses part of the Chickenfoot version 0.9 code. I won't go into any details about CoScripter in this article, but if you're interested in reading more, see Alex Faaborg's writeup.

Finding Our Feet

Let's look at how Chickenfoot scripts can be recorded, much like a macro in MS Word or Adobe Photoshop. For this example, we'll create a script that's only slightly more involved than the single command we saw in the previous section. For this demo, I've taken inspiration from a Getting Started with CoScripter tutorial.

When we've finished, our script will cause our browser to:

1. Load the page www.google.com.


2. Click the Images link.


3. Place the text "koalas" into the Search Images textbox.


4. Click the Search Images button.

Let's get scripting! Open your Chickenfoot sidebar if you haven't already, and type the following command in the top panel:

go("google.com")

Then click the green arrow. As you might expect, your browser will load the Google homepage.

To record the rest of our script, we'll basically just perform the steps I've described above. Click on the Images link, then type the text "koalas" in the search box, and hit Tab to exit the field. Finally, click the Search Images button.

Your Output tab should now display something similar to the following:

go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")

If you performed these steps while you were logged into your Google account, some of the text values listed may be different, but the actions should still be identical.

Now that we've recorded our actions, we can pick and choose from this code output, and copy the desired lines to the top panel of our Chickenfoot sidebar. Voila! We have a working script!

Apart from the initial go action, the commands we're after are the click and enter commands. We can also simplify the values passed in, so that our script looks something like this:

go("google.com")
click("Images")
enter("koalas")
click("Search Images button")

One thing you may notice from the above example is that Chickenfoot syntax has much in common with many C-based languages, like JavaScript. Chickenfoot commands are, in fact, JavaScript.