End-User Programming for the Web:

Automation and Customization of Rendered Web

Pages with Chickenfoot
M. Bolin, P. Rha, and R. C. Miller, “Automation and customization of rendered
web pages,” Proceedings of the 18th annual ACM symposium on User interface
software and technology (2005): 163-172.

Nazanin Kadivar

IAT 881 – End-User Programming, Feb. 19, 2008

Introduction

ƒ Windows Application
• Application controls its user interface down to the last pixel

ƒ Web Application
• Once a page is delivered to the client’s browser, the content provider
has no control over how it will be viewed
• An opportunity for end-users to automate and customize their web
experience
• The growing complexity of web pages and standards prevent users
from realizing this opportunity

IAT 881 – End-User Programming, Feb. 19, 2008

Introduction

ƒ Customization possibilities that arise when an application is moved to the

web:
• Automating repetitive operations
• Integrating multiple web sites
• Transforming a web site’s appearance

ƒ Examples involve both automating web user interfaces (clicking links, filing
in forms, extracting data) and customizing them (changing appearance,
rearranging components, inserting or removing user interface widgets or
data)

IAT 881 – End-User Programming, Feb. 19, 2008

Introduction

ƒ Chickenfoot

Created by Michael Bolin as his Master Thesis at MIT

A programming system embedded in the Firefox web browser which

enables end-users to automate, customize and integrate web applications
without examining their source code

Chickenfoot addresses this goal by identifying page components with a

novel keyword pattern matching technique

IAT 881 – End-User Programming, Feb. 19, 2008

Introduction
Three models of a webpage:
ƒ String model : a webpage is represented as a string of HTML text
ƒ Document Object Model (DOM): a webpage is represented as a hierarchical
tree of nodes, constructed from the string model using an HTML parser
ƒ Rendered Model : a webpage is represented a tow-dimensional, typeset
document, created by rendering the DOM (Chickenfoot)

IAT 881 – End-User Programming, Feb. 19, 2008

Chickenfoot

The Challenge for Chickenfoot: a user should never have to view the HTML
source of a web page in order to customize or automate it

ƒ It runs inside the browser, so that the rendered view of a web page is
always visible alongside the chickenfoot development environment
ƒ Its language primitives are concerned with the web page’s user interface,
rather than its internal details
ƒ It uses pattern-matching techniques to allow users to describe components
of a web page in terms that make sense for the rendered view

IAT 881 – End-User Programming, Feb. 19, 2008

Programming in Chickenfoot

ƒ All commands and capabilities of JavaScript are applicable in Chickenfoot

ƒ JavaScripting needs reading and understanding a web page’s HTML code

ƒ JavaScript + Chickenscratch All powers of JavaScript without the need

of understanding the complex HTML source code

ƒ Chickenscratch : Chickenfoot’s programming language, an extension of

JavaScript, which includes commands that make sense for operating on the
rendered model of a web page

IAT 881 – End-User Programming, Feb. 19, 2008

Pattern Matching

ƒ Pattern matching is a fundamental operation in Chickenfoot

ƒ Chickenfoot supports:
• Keyword Patterns
9 a string of keywords that are searched in the page to locate a page
component, followed by the type of the component to be found
9 The component type is one of a small set of primitive names,
including link, button, textbox, checkbox, radiobutton, and listbox
9 “search form” or “Go button”
• Constraint Patterns
9 combines a library of primitive patterns (such as link, textbox, or
paragraph), literal strings (such as “Go”), and relational operators
(e.g., in, contains, just before, just after, starts, ends)
9 Text constraint patterns are generally used to identify parts of a
page for modification and extraction

IAT 881 – End-User Programming, Feb. 19, 2008

Pattern Matching - Commands

ƒ Find : takes a pattern of either kind and searches for it in the current page
• find(“Search form”) | find(“link in bold”)
ƒ Click : takes a pattern describing a hyperlink or button on the current page
and causes the same effect as if the user had clicked on it
• click(“Advanced Search”) // a hyperlink | click(“I’m Feeling Lucky”) // a button
ƒ Enter : enters a value into a textbox
• enter(“e-mail address”, “rcm@mit.edu”)
ƒ Check / uncheck : control checkboxes and radiobuttons
• check(“Yes, I have a password”) | uncheck(“Remember Me”)
ƒ Pick : makes a selection from a listbox or drop-down box
• pick(“California”) | pick(“State”, “California”)
ƒ Go | fetch : retrieve a page with | without displaying it

IAT 881 – End-User Programming, Feb. 19, 2008

Commands
Pattern Clicking and Navigation Page Widgets
Matching Form and Page Modification
Manipulation Loading
Find Click Go Insert New link
Match Enter Back Remove New button
Check Forward Replace
Commands Uncheck Reload
Pick Fetch

IAT 881 – End-User Programming, Feb. 19, 2008

Chickenfoot Demo, Examples of Chickenfoot Code

IAT 881 – End-User Programming, Feb. 19, 2008

References

1. M. Bolin, “End-User Programming for the Web” (MASSACHUSETTS

INSTITUTE OF TECHNOLOGY, 2005).
2. R. C. Miller and M. Bolin, “Naming Page Elements in End-User Web
Automation.”
3. M. Bolin, P. Rha, and R. C. Miller, “Automation and customization of
rendered web pages,” Proceedings of the 18th annual ACM symposium on
User interface software and technology (2005): 163-172.
4. “Chickenfoot,” http://groups.csail.mit.edu/uid/chickenfoot/.
5. “Main Page - Chickenfoot Script Repository,”
http://groups.csail.mit.edu/uid/chickenfoot/scripts/index.php/Main_Page.
6. “Chickenfeed,” http://groups.csail.mit.edu/uid/chickenfoot/blog/.

IAT 881 – End-User Programming, Feb. 19, 2008

Questions

IAT 881 – End-User Programming, Feb. 19, 2008