Rewrite the Web with Chickenfoot

Useful Tasks Turned into Chickenfeed

Any technology that purports to automate tasks should make it easy to do useful things quickly. In this section, I'll describe some tasks for which Chickenfoot is really useful. I've included fragments of code, and although they may not illustrate JavaScript best practices, they do a good job of illustrating various uses of Chickenfoot.

Let's get started! Here are a few handy Chickenfoot scripts.

First, let's find out what variables are bound at the top level of your FireFox chrome:

list(chromeWindow);

This single line should provide you with quite a bit of information. You can also view a heap of information about the current document using this command:

list(chromeWindow.document);

Next, let's output the current web page as an XHTML string to the Output pane:

var xhtmldom = Chickenfoot.domToString(document);  
output(xhtmldom);

Now, let's write the XHTML string above to your desktop. It's possible to write the XHTML output from the example above to a file on your desktop. Replace the escaped file separator "\\" in the last line with "//" if you're on a Mac or Linux machine:

include("fileio.js");    
//use http://lxr.mozilla.org/mozilla/source/xpcom/io/nsDirectoryService  
Defs.html    
// Firefox directory service to use various built in Windows directories  
var xhtmldom = Chickenfoot.domToString(document);  
var desktop =    
 Components.classes["@mozilla.org/file/directory_service;1"].  
 getService(Components.interfaces.nsIProperties).get("Desk",  
 Components.interfaces.nsILocalFile);  
 
var fname= "xhtmldom.xml";  
write(desktop.path + "\\" + fname,xhtmldom);

The above task can actually be performed using even simpler code in the soon-to-be-released version of Chickenfoot, because it uses the default Firefox download directory (usually the Desktop).

Now, let's interact with the browser chrome that you've inspected.

In Firefox, parts of your browser's window chrome can be accessed if you have the ID of the object in question. This can be retrieved using the function chromeWindow.document.getElementByID. For example, the ID of the Context Menu that's displayed when you right-click on a page is contentAreaContextMenu. If we were to take the script from example 3 above, which saves the DOM to the desktop, and wrap it in a function, we could then call this function from the Context Menu, like so:

include("fileio.js");    
 
function saveDom() {  
 var xhtmldom = Chickenfoot.domToString(document);  
 var desktop =    
   Components.classes["@mozilla.org/file/directory_service;1"].  
   getService(Components.interfaces.nsIProperties).  
   get("Desk", Components.interfaces.nsILocalFile);  
 
 var fname= prompt("What filename would you like to save as?");  
 write(desktop.path + "\\" + fname,xhtmldom);  
}  
var chromeDoc = chromeWindow.document;  
var contextMenu = chromeDoc.getElementById("contentAreaContextMenu");  
var menuItem = chromeDoc.createElement("menuitem");  
menuItem.setAttribute("label","Save Dom");  
 
menuItem.addEventListener("command", saveDom, false);  
contextMenu.appendChild(menuItem);

Note that the Chickenfoot function append function allows you to append data to a document. You use it like this:

append(desktop.path + "\\" + fname, "text to append");

Hopefully, these examples give you a feel for some of the simple but powerful tasks that can be automated by Chickenfoot script.

A More Advanced Chickenfoot Script

Enough with the simple tasks -- let's do something a bit more advanced with Chickenfoot!

I use the following script to add functionality to Gmail -- specifically, to search for and select from a page the conversations that contain text that matches a particular Chickenfoot Pattern. It's a useful and powerful enhancement to everybody's favourite web-based email client.

Here's the script:

var i = 0;  
var wasextracted = "";  
var  searchstring ="";  
var selection = prompt("Select messages with the following text:");  
var found = find(selection);  
var results = new Array();  
for (found;found.hasMatch;found = found.next) {  
 results[i]=found.text  
 i = i + 1;  
}  
 
var searchnumber;  
for (var x = 0; x <= results.length; x++) {  
 searchnumber = x + 1;  
 try {  
   extracted=results[x];  
   if (wasextracted==extracted) {  
     searchstring = searchnumber + " " + extracted;  
     check (searchstring);  
   } else {  
     searchstring = extracted;  
     check(searchstring);  
     wasextracted=extracted;  
   }  
 }  
 catch(e) {}  
}

This script prompts the user for some input, then passes that input as a parameter to a Chickenfoot find function. Remember that find accepts a Chickenfoot Pattern, so the possible uses for this kind of search are almost limitless given that you can ask it to match more than just strings.

You may recall from when we first encountered the find method that it doesn't return an array. We therefore need to read the results into an array. You'll probably find the fragment of code that performs this task to be useful in other Chickenfoot scripts that you write:

for (found;found.hasMatch;found = found.next) {  
 results[i]=found.text  
 i = i + 1;  
}

After this, the script loops through the array returned by the find function, and tries to construct a Chickenfoot Pattern that will match the text that contained our search string exactly. We then use the Chickenfoot check function to toggle the checkbox nearest to that section of text, thus selecting that message.

Remember that check needs to be able to make sure it has the exact piece of text, or it will throw an error, which is why we can't just do a check on found.text.

One notable aspect of the script above is its small size relative to the functionality it achieves. Chickenfoot's functions provide easier ways of dynamically interacting with a document than such standard APIs as the DOM.

Conclusion

In this article, we looked at a number of ways in which you can easily use Chickenfoot to interact with the browser. We've only scratched the surface in terms of what can be done with Chickenfoot in this article -- the potential is huge, and it's limited only by your imagination!

If you're interested in learning more, check out the following resources:

• The description of Chickenfoot on the CSAIL MIT group's project page gives some thoughts on the project as well as links to some academic papers. Of these, the thesis by Michael Bolin et. al. (PDF, 0.41MB) contains quite a number of useful examples.
• The Chickenfoot wiki offers some example scripts.
• See the Google Educational talk demonstrating various uses for Chickenfoot.

If you create a killer script, I encourage you to submit it to the Chickenfoot wiki. Happy scripting!