Chicken Foot

8/6/2019 Chicken Foot

1/13

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

End-User Programming for the Web:

Automation and Customization of Rendered WebPages with Chickenfoot

Nazanin Kadivar

M. Bolin, P. Rha, and R. C. Miller, Automation and customization of renderedweb pages, Proceedings of the 18th annual ACM symposium on User interfacesoftware and technology(2005): 163-172.


2/13


Introduction

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

Web Application

Once a page is delivered to the clients browser, the content providerhas no control over how it will be viewed

An opportunity for end-users to automate and customize their webexperience

The growing complexity of web pages and standards prevent usersfrom realizing this opportunity


3/13


Introduction

Customization possibilities that arise when an application is moved to theweb:

Automating repetitive operations

Integrating multiple web sites Transforming a web sites 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 ordata)


4/13


Introduction

Chickenfoot

Created by Michael Bolin as his Master Thesis at MIT

A programming system embedded in the Firefox web browser whichenables end-users to automate, customize and integrate web applicationswithout examining their source code

Chickenfoot addresses this goal by identifying page components with anovel keyword pattern matching technique


5/13


Three models of a webpage:

Introduction

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)


6/13


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 isalways visible alongside the chickenfoot development environment

Its language primitives are concerned with the web pages user interface,rather than its internal details

It uses pattern-matching techniques to allow users to describe componentsof a web page in terms that make sense for the rendered view


7/13


Programming in Chickenfoot

All commands and capabilities of JavaScript are applicable in Chickenfoot

JavaScripting needs reading and understanding a web pages HTML code

JavaScript + Chickenscratch All powers of JavaScript without the needof understanding the complex HTML source code

Chickenscratch : Chickenfoots programming language, an extension ofJavaScript, which includes commands that make sense for operating on therendered model of a web page


8/13


Pattern Matching

Pattern matching is a fundamental operation in Chickenfoot

Chickenfoot supports:

Keyword Patterns

a string of keywords that are searched in the page to locate a pagecomponent, followed by the type of the component to be found

The component type is one of a small set of primitive names,including link, button, textbox, checkbox, radiobutton, and listbox

search form or Go button

Constraint Patterns

combines a library of primitive patterns (such as link, textbox, orparagraph), literal strings (such as Go), and relational operators

(e.g., in, contains, just before, just after, starts, ends) Text constraint patterns are generally used to identify parts of a

page for modification and extraction


9/13


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 pageand causes the same effect as if the user had clicked on it

click(Advanced Search) // a hyperlink | click(Im Feeling Lucky) // a button

Enter : enters a value into a textbox

enter(e-mail address, [email protected])

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


10/13


Commands

PatternMatching

Clicking andFormManipulation

Navigationand PageLoading

PageModification

Widgets

Commands

Find

Match

Click

Enter

Check

Uncheck

Pick

Go

Back

Forward

Reload

Fetch

Insert

Remove

Replace

New link

New button


11/13


Chickenfoot Demo, Examples of Chickenfoot Code


12/13


References

1. M. Bolin, End-User Programming for the Web (MASSACHUSETTSINSTITUTE OF TECHNOLOGY, 2005).

2. R. C. Miller and M. Bolin, Naming Page Elements in End-User WebAutomation.

3. M. Bolin, P. Rha, and R. C. Miller, Automation and customization ofrendered web pages, Proceedings of the 18th annual ACM symposium onUser 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/.


13/13


Questions

Chicken Foot

Documents

Transcript of Chicken Foot