Chickenfoot is a scripting wrapper that allows you to manipulate websites on the fly. By building and running simple scripts in Chickenfoot, you can alter the behavior of your favorite websites and make the pages display and respond in different ways, customizing them to your liking. Best of all, Chickenfoot isn’t difficult to learn or use. The scripts can be created using only your browser (via a downloadable extension) and some light coding.
Contents |
Introduction
As every budding developer knows, sometimes when the internet fails to give you exactly what you want, you have to hack it yourself. The ability to do this is made easy (and legal) with tools like Chickenfoot, a scripting tool currently available as a plug-in for the Firefox browser. By installing Chickenfoot, you add a scripting layer over your browser and you can start manipulating your browsing experience through some easy-to-learn JavaScript-based coding.
Chickenfoot is similar to Greasemonkey, another Firefox add-on providing page scripting. But it goes a step beyond Greasemonkey by manipulating the browser’s Document Object Model (DOM). The DOM represents the interactive abilities of the web — things like links, text boxes, radio buttons, and check boxes all lay within the DOM. The ability to manipulate the DOM allows you to change the behavior of a website’s code, the way the page lets you interact with it and submissions based on preference or whimsy.
This direct relationship with the DOM is actually where Chickenfoot gets its name. Chickenfoot is the name of a game played with dominoes — DOMinoes? Get it?
Sample applications of Chickenfoot:
- Change page colors. Add photos
- Automatically fill forms
- Automatically navigate around through a website
- Change text box sizes
- Find the number of links on a page
Scripts can be saved and loaded on demand. It allows you to write code while browsing and then run, or “trigger” it, at any time. Triggers can be set for page actions or whenever the page matches a criteria pattern you set. For example, scripts can be triggered when pages are loaded or when the browser sees particular links.
The Chickenfoot extension’s interface is contained inside a browser sidebar. It includes a text box for on-the-fly scripting, and an area allowing you to see the output and error messages of your scripts. There are a couple tabs at the top of the sidebar which allow you to browse pattern matches and tweak the preferences controlling when your scripts are triggered.
There are some sample scripts bundled with Chickenfoot, including an “icon search” that’s useful for filtering Google image search results for icons. There’s also a script which highlights and defines SAT words, and one which allows you to resize text boxes by dragging a small image in the box’s corner.
Chickenfoot offers some functionality Greasemonkey lacks. Most significantly, scripting in Chickenfoot has an easier learning curve. Easy script commands include functions like "click("This Link"). Manipulating the same type of command in Greasemonkey involves an intermediate level of JavaScript knowledge, a text editor, and a page refresh.
What you’ll need
You’ll need to be running Firefox and the Chickenfoot add-on. You’ll also need a general understanding of scripting and a good idea for a script you’d like to create.
You can get Firefox at Mozilla’s Firefox site.
You can get Chickenfoot at Chickenfoot’s home page
Steps
Step 1: Basic Page Navigation
Basic page navigation is probably the most most unique feature of Chickenfoot. For example, all it takes to open a page, enter a query and press a button is:
1 |
go("webmonkey.com") |
2 |
3 |
enter("search","chickenfoot") |
4 |
5 |
click("second button") |
Let’s take that idea a step further. Say I want to set up a script to open Gmail (presuming I’m already logged in to my Google account) and search account for any unread messages. In Chickenfoot, the script would look like.
Chickenfoot will find the best match for the arguments given. However, what if there are multiple search forms on a page? With a little JavaScript know-how, you can specify exactly the right textbox, image or button you want Chickenfoot to interact with. For example, you can specify the DOM using something like.
click(new XPath("/HTML[1]/BODY[1]/DIV[1]/DIV[1]/DIV[2]/UL[1]/LI[7]/FORM[1]/INPUT[2]"))
If the DOM and JavaScript are a little over your head, Chickenfoot makes it easy to write such a script anyway. You can “Record actions” as you perform your desired task, then copy and paste the actions into a script.
Other form elements are supported as well. For example, you can use pick("my selection") to select from a drop-down list and check("my choice") to choose a particular checkbox.
Step 2: Pattern Matching
Want to load and search for strings on a page? Basic page manipulation is possible using built in pattern-matching.
Let’s say we want to find how many times the word “chickenfoot” appears in this article. We’d write something like this:
1 |
m=find("chickenfoot") |
2 |
3 |
m.count |
The answer would appear in the output field.
Step 3: Page Modification
Chickenfoot allows you to change a page’s rendered source code on the fly. For example, let’s say we want to customize an image on a page. Maybe you’d even want to go as far as replacing the Webmonkey logo with an image of your own design.
This is just one way:
1 |
replace("http:www.webmonkey.com/logo.gif", "http://myserver/mylogo.gif") |
Step 4: Activating Triggers
Up until this point, we’ve focused on writing ad hoc code from the sidebar. Let’s say we wrote a script we liked and wanted to apply it every time it matched a specific set of criteria.
On the bottom of the Chickenfoot sidebar is a tab called “Triggers.” Triggers can be set to activate whenever a page meets the criteria you set. You can set your script to run when it sees a match for a page URL, when a new window opens or when Firefox starts.
To add a trigger, press the “plus” icon at the top of the triggers tab. You may have to expand the width of the sidebar to see icons for adding, editing, and removing triggers.
Notably, the last option on the right of the Trigger tab gives you the ability to package your triggers as stand-alone Firefox extensions. Packaged extensions can be sent to, and installed by, friends who use Firefox — even if they don’t have Chickenfoot installed.
Alternate methods
JavaScript Integration
Chickenfoot scripting is heavily based on JavaScript. If you know JavaScript, you can bypass the easy-to-use Chickenfoot commands and write your functions completely in JavaScript. Scripts written in JavaScript are easily portable across browsers, extensions and platforms.
Greasemonkey
As mentioned above, Greasemonkey is an alternative to Chickenfoot for scripting your browser. You can find Greasemonkey at the Mozilla add-on site.
As mentioned above, you can write your scripts directly in JavaScript and port them over to Greasemonkey. Chickenfoot also allows you to port over your Greasemonkey scripts by inserting:
1 |
include("greasemonkey.js"); |
at the top of your script. You can also use the Chickenfoot tool to compose Greasemonkey scripts. To start a new Greasemonkey script in Chickenfoot, click the arrow next to the “New” button and select “Greasemonkey template.”
Suggested readings
Chickenfoot’s Quick Start guide is a great place to learn the basics. It also offers a great command library that you can bookmark for reference.
There’s a Chickenfoot Scripts wiki — a great place to download scripts and learn by example.
Webmonkey has a load of JavaScript tutorials to get you started on the portable scripting language.