Browser

Automate and extend Firefox with the Chickenfoot add-on

The Chickenfoot add-on provides a scripting environment within Firefox. Find out how using Chickenfoot can make it easier to do your Web development tasks.

Chickenfoot is a Firefox add-on that allows you to automate user actions within the browser environment. It also lets you extend the browser interface to provide additional features to a Web page.

Before I delve into how this add-on can make your Web development work easier, I thought I'd take a moment to share the answer to the question I bet you're asking yourself (I know I was): Why is it called Chickenfoot? Here is the answer from the Chickenfoot site:

"Chickenfoot is a game that you can play with dominoes. Since Chickenfoot does much of its work by manipulating the Document Object Model, or DOM, of a web page, Chickenfoot the Firefox extension is like a toy that lets you play with the DOMinoes of the web."

Interface

Chickenfoot is available as a free download. When you click the downloaded file, Chickenfoot is installed via the Firefox Add-ons dialog box. After installation, it is available as a sidebar selection (View | Sidebar). After you enable the sidebar, Chickenfoot appears on the left side of the browser adjacent to where pages load.

The top portion of the Chickenfoot sidebar contains a JavaScript editor that allows you to enter JavaScript as you would within a Web page. In addition, you can enter commands from the JavaScript superset that is part of Chickenfoot.

You may enter multiple code windows within the JavaScript editor. There are buttons at the top of the JavaScript editor that you can use to open/save scripts, create new scripts, and execute and stop scripts.

The lower portion of the Chickenfoot sidebar presents an interface with four tabs: Output, Patterns, Actions, and Triggers. Here's a brief description of the tabs:

  • Output: Displays a history of all actions or code that has been run. The results of running code in the editor at the top of the sidebar will appear here.
  • Patterns: Contains search patterns for locating common elements in a page. One example of a pattern is an HTML button. When you select the button, it searches the current page for all instances of an HTML button (matches are highlighted on the page).
  • Actions: Contains all user actions within the browser page.
  • Triggers: Chickenfoot scripts that automatically run when a certain Web page is visited.

Coding

A key feature of the Chickenfoot tool is the use of a nonprogramming syntax in its language; the syntax is described as a JavaScript superset. (Standard JavaScript is supported as well.) The developers behind Chickenfoot envision the nonprogramming syntax as a tool for regular users to use to extend the browser interface.

The following code snippet is an example of the simple syntax available in Chickenfoot. This script loads TechRepublic; enters the search term 'chickenfoot' in the search box on the page (this text box has focus when the main page loads); and clicks the Search button (the Search text is assigned to the Search button on the Web page) to search on TechRepublic for the search term entered.

go("http://www.techrepublic.com/");

enter("chickenfoot");

click("Search");

The code demonstrates the easy to use script syntax, with go, enter, and click corresponding to what the user does within the Web page.

The recording of actions across different sites, as well as the running of scripts within pages, introduces possible cross-site scripting security vulnerabilities that may need to be addressed by Chickenfoot developers.

Automation

AJAX allows you to build powerful Web interfaces, but it can be hard to test these interfaces using automated testing tools since AJAX features bypass normal browser functionality. This is where Chickenfoot enters the picture; it provides the necessary functionality to automate user actions within the browser.

The Actions tab within the bottom portion of the Chickenfoot sidebar lets you record actions within the browser interface; this allows you to generate test scripts for a Web site. The first step in generating such a script is clearing the Actions window by clicking the brush in the upper right corner of the Actions tab.

Once the Actions tab is cleared, select the Record Actions checkbox to begin recording user actions within the browser. Everything will be recorded until you deselect the Record Actions checkbox. As an example, I recorded my loading of the Google home page, entering TechRepublic as the search term, and selecting search. The following script was generated.

go("http://www.google.com/")

enter("Search", "TechRepublic.com")

click("Google Search button")

go("http://www.google.com/search?hl=en&q=TechRepublic.com&btnG=Google+Search")

click("Articles")

go("http://www.techrepublic.com/2001-10875-0.html")

go("http://www.techrepublic.com/2001-10875-0.html")

go("http://www.techrepublic.com/2001-10875-0.html")

go("http://www.techrepublic.com/2001-10875-0.html")

go("http://www.techrepublic.com/2001-10875-0.html")

You can save the generated script for later use.

It is easy to see how this provides a great way to automate application testing. For example, the selection of AJAX features may be recorded and used to test an application, whereas AJAX-enabled features are often not available to standard testing tools.

For more information about Chickenfoot scripts, check out the Chickenfoot Script Repository.

Interesting tool

The number of great tools spawned as Firefox add-ons continues to amaze me. These add-ons offer so many excellent tools and features that help build and test Web applications. Two Firefox add-ons that provide features similar to Chickenfoot are Greasemonkey and CoScripter. However, the simple English script syntax in Chickenfoot makes it stand out and makes it more accessible for nontechnical users.

Chickenfoot allows you to automate user actions to automate tests. In addition, you can write scripts to add features (especially personal features) to a Web page.

If you are not using Chickenfoot, look into how this add-on can help with your daily programming tasks. To keep up with Chickenfoot-related news, check out the Chickenfeed blog.

What are your impressions of Chickenfoot? What Firefox add-ons can you not live without for your Web development tasks? Share you thoughts and experience with the Web Developer community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!

Check out the Web Development Zone archive, and catch up on previous editions of Tony Patton's column. 

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

3 comments
francisvandenplas
francisvandenplas

There seems to be a problem with FF beta 3,3. When the installation finishes I'm confronted with the message : "Chickenfoot" will not be installed because it does not provide secure updates". Maybe this disappears in FF beta3,4, but I do not use this one very often because it kicks me out of Yahoo Mail after opening very few mails and closes. So, any ideas? Francis

TJ111
TJ111

Firefox 3 requires extension updates to be sent over a secure, encrypted (https) connection or use file hash checks (MD5, SHA1) to prevent spoofing of updates that could potentially add malicious code to the browser. That said, I will probably check this out. I will at least use to enable quick-switching between my multiple Google accounts. How does this differ from Greasemonkey?

francisvandenplas
francisvandenplas

I had not yet reinstalled Greasemonkey on FF 3. Will give it a try. Francis