Background User scripting heralds a paradigm shift towards web reader empowerment. Powerful web writers of the first decade of the Web needed to be cautioned about usability and accessibility issues. As power shifts to web readers, they become capable of customizing web pages to their own tastes and purposes. This paper describes the development of Greasemonkey extension of the Firefox browser.
Argument User scripting is a product of the development of the open source browser, and individual developers who wish to change webpages. The Greasemonkey extension of the Firefox browser permits web readers to write JavaScripts that (1) Change the look and feel of Web pages, (2) Change the functionality of web page controls, and (3) Facilitates Web page "mashups", hybrid web presentations composed of content from two or more web pages. The only naturally occurring limit to web page modification may be difficult Web page source code. Tools that shield Web readers from the complexity of HTML are being introduced.
Conclusion The paradigm shift to Web readers, armed with powerful and easy-to-use tools for customizing Web pages heralds a new era of the Web. It threatens the idea that a Web page has a single look and feel, and emphasizes the trend to design Web pages as mere input to the reading experience, subject to modification of presentation device as well as reader taste and purpose.
This paper is an experiment in the presentation on-screen of the scientific paper. In spite of the continuing popularity of the printed page, more and more people are reading material on computer screens and this is an attempt to implement the idea of 'screen rhetoric', the notion that text intended to be read from the screen needs to be presented differently from that intended to be read on the printed page.
Please explore the way the paper is presented and let the author and myself have your feedback on your reactions. Do you enjoy reading this way, or hate it? Are there features you would like to see added or bits and pieces you could do without? Can you think of a way to do it better? Any and all comment will be collected and presented on a Web page linked to the paper and the more (useful) comment we have, the better.
Prof. Tom Wilson, Editor-in-Chief
Commentaries on the creation of digital text suggest that there is an asymmetric power relationship between Web readers and writers. Generally, powerless readers must suffer with what they are given, while writers are urged to be sympathetic to readers' needs.
The impression that readers are powerless derives from a book culture where readers were unable to customize ink and paper to suit their individual tastes and purposes. Paper books and Web pages, however, are not technically analogous. Books are products of an industrial process of printing generally beyond the control of readers, while Web pages are digital presentations created by the reader's own Web browser. The moment of publication of a Web page is immediate, and the locus of publication is at hand. By seizing control of the browser running in their own computers, Web readers can modify Web pages. This heralds a paradigm shift of empowered readers who will customize Web pages according to their tastes and purposes.
Customization of Web presentation by user scripting was a product of the development of the open-source browser, which provided pioneering developers a chance to target certain Web pages for customization.
Netscape Navigator, the first Web browser, appeared in 1994 and was an enormous success. With the rapid growth of the Web, Web browsers appeared to be strategic applications with the potential to direct Web traffic, place advertising and promote the use of proprietary software. Internet Explorer, Microsoft's browser, originally shipped as the Internet Jumpstart Kit in Microsoft Plus! For Windows 95. (Internet Explorer history June 30, 2003)
The browser wars during the late 1990s were a struggle between Internet Explorer and Netscape Navigator.
The wars effectively ended in 1998 when it became clear that Netscape's declining market share trend was irreversible... Netscape responded by open sourcing its product, creating Mozilla... In 2004, Firefox 1.0 was released. Wikipedia, Web browser
Open sourcing an application gives it to the Web community where volunteers may continue its development. Open sourcing also reflects the belief that perhaps some creative spirit outside the commercial mainstream may extend the application in new and unexpected directions.
Controlling the Web browser is valuable if the Web is a publishing or advertising channel that can reliably place content before potential consumers. In long-established publishing and advertising channels, such as magazines, radio and television, readers have little control over the information placed before them. For example, the reader of a magazine has no power to modify or block an advertisement that s/he might happen upon by turning a page. Web readers in the 1990s were in a similarly weak position, armed with only modest browser modifications such as changing font size, background color or resizing the browser window.
The pop-up controversy in the early 2000s illustrates the asymmetrical power relationship between writers and readers in the top-down Web (e.g. Online ads get in your face June 13, 2001). With a decline in advertising revenue from banner advertisements, Web pages began to feature pop-ups and pop-unders to produce a higher click rate (Wikipedia, "Pop-up ad"). Pop-ups are designed to react to reader events such as opening a window, closing a window, returning to an earlier Web page, and so on. Carried to an abusive extreme by some pornography Websites, Web readers could be trapped by a seemingly infinite series of pop-ups, effectively anchoring them to a Website despite their efforts to escape. The outcry against such reader abuse resulted in a number of add-ons to Web browsers that blocked pop-ups. In 2004 Microsoft added pop-up blocking to Internet Explorer.
The emergence of 'usability' as one of the signature issues of the top-down Web indicates that Web readers had little power to block content or modify the functionality of Web pages, but had to rely on caring Web writers:
It is an irony that all Web pages, even the ones with repugnant content or coersive behaviour that readers would otherwise seek to avoid, are constructed on the Web readers' own machines. Common parlance suggests that a Web server sends 'Web pages' to a client browser as if these were inviolable containers of information that the reader's browser can only passively present. In reality, the Web server sends a variety of Web-page components such as hypertext markup files, image files, sound files, style sheet files, JavaScript files, and so on to the browser. The layout engine of the browser parses the hypertext markup, applies style sheets, and runs any scripts to create the artifact that readers recognize as a Web page.
Basically, a layout engine takes content (such as HTML, XML, image files, applets, and so on) and formatting information (such as Cascading Style Sheets, hard-code HTML tags, etc.) and displays the formatted content on the screen. It 'paints' the browser's content area, which is the blank area inside the browser window's 'chrome'. FAQ, nglayout project/gecko layout engine
The fundamental enabler of Web-reader empowerment is the local construction of Web pages. By seizing control of the Web-page construction process running inside their own machines, Web readers can redress the power inequity of the top-down Web.
In 2004 Mozilla Firefox 1.0 was released. Firefox is an open-source Web browser designed to be extended by its development community.
Extensions are small add-ons that add new functionality to Firefox. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping Firefox small to download. Firefox extensions
Eventually the personal needs of a member of the Firefox development community would include changing the look and feel of a specific Web site.
On July 19, 2004 Adrian Holovaty posted Site-specific browser extension: All Music Guide. His extension modified the look and feel of the All Music Guide Website in his Firefox browser. An annoying Flash widget was hidden and the links on the Web page were changed. He reflected on the ability to arbitrarily change the appearance and functionality of Websites:
To my knowledge, using browser extensions to 'fix' Web sites, or add extra functionality, is unexplored territory. There's a huge potential here. Site-specific Firefox extensions are an elegant, one-click-install solution to the problem of, well, lousy Web interfaces—a problem Web users have had to shut up and deal with for as long as the Web has been around. Adrian Holovaty July 19, 2004
Changeable presentation of content has been a continuing interest since the establishment of the Web. Lie and Bos (1999) highlight this ambition in their history of cascading style sheets. Korpela refers to 'presentation control by readers' as an ideal in his analysis of Web writing (Korpela 1997). In 2001 Turner suggested 'active browsing' as a model for Web browsers (Turner 2001). Browsers under development, such as Flock, describe "moving back to the original vision of Tim Berners-Lee, that the Web should be a two-way experience" (MacIntyre September 14, 2005) between readers and writers.
Using a Firefox extension may be an elegant one-click-install solution for some people, but the average Web reader would find writing an extension for the Firefox browser a non-trivial task. achfiend.com's tutorial, for example, involves creating an XPI file, modifying a RDF file and an XUL file, creating a globally unique identifier and writing a JavaScript extension. Technical challenges like these would daunt most Web readers and limit the popularity of modifying Web pages.
On December 6, 2004, Aaron Boodman announced the release of Greasemonkey, a Firefox extension that reduces the technical challenge to writing your own site-specific script in JavaScript.
Greasemonkey is a Firefox extension which lets you to add bits of DHTML ('user scripts') to any Webpage to change its behaviour. In much the same way that user CSS lets you take control of a Webpage's style, user scripts let you easily control any aspect of a Webpage's design or interaction. Aaron Boodman
Lowering the barrier of user scripting to writing a JavaScript immediately empowers the large existing community of JavaScripters. Tutorials already exist for Dynamic HyperText Markup Language (DHTML), there is an active literature (e.g., "DHTML Utopia: Modern Web Design Using JavaScript & DOM") promoting its role in Web page design, and it has an established relationship with the World Wide Web Consortium's definition of the DOM (Document Object Model). The DOM models a Web page as a tree-like structure, which permits an addressing strategy that branches from root to leaf node in identifying each element of a Web page.
Dynamic HTML (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The scripting interfaces provided in DHTML have a significant overlap with the DOM, particularly with the HTML module. Compatibility with DHTML was a motivating factor in the development of the DOM. Document Object Model FAQ
Technical background note:
Why is the link between DOM and DHTML important?
To
change a Webpage one must be able to focus on specific elements of the
HTML source code of the Webpage. A Web browser such as Firefox
constructs a tree-like representation of the HTML source code called a
Document Object Model (DOM). A Greasemonkey script is composed of
JavaScript that manipulates elements of the DOM.
Using JavaScript to manipulate the DOM to enhance Web page design
already has a considerable literature.
Aligning Greasemonkey with DHTML and DOM permits scripters to leverage
this literature.
Greasemonkey reduces, but does not eliminate the technical difficulty of modifying Web pages. Writing JavaScript still involves programming code. As illustrated by Mark Pilgrim's Dive into Greasemonkey, the essential Greasemonkey online text, user scripting is enhanced by another powerful technology, XPath, that is used to target elements of the DOM. Thus the scripter's toolbox includes a number of sophisticated tools:
Getting all these powerful tools working together properly may be tricky, but my own experience tells me that a big challenge of modifying Web pages is revealed when would-be scripters examine the HTML code written by their friends in the Web community. The Web is a democratic information experiment, which really means that practically anyone can hack together a Web page. As a result, the Web has many excellent examples of bricolage: inconsistent, sloppy messes created by amateurs. Web pages may include both a CSS file and some inline CSS code, have HTML element names in both upper and lower case, specify colours with both words and hex codes, lack id attributes and so on. Many Web pages are constructed by embedding tables within tables within tables, ad infinitum. In short, bewildering HTML code may turn out to be a naturally occurring upper limit on the wide application of do-it-yourself user scripting.
The revolution of user scripting awaits the development of WYSIWYG (What you see is you what you get) tools that shield the scripter from the messy details. A current example is Platypus, a Firefox extension created by Scott Turner that automates the creation of Greasemonkey scripts.
Platypus is a Firefox extension which lets you modify a Web page from your browser—'What You See Is What You Get'—and then save those changes as a Greasemonkey script so that they'll be repeated the next time you visit the page.
The following snippet from the Platypus toolbar (version 0.5) indicates the sorts of tasks that can be accomplished with Platypus.
The challenge of writing user scripts is also an opportunity for entrepreneurs such as Custom Greasemonkey Userscripts.
Perhaps more interesting than the technical details of user scripts is Greasemonkey's potential for placing usability issues in Web readers' hands and giving them a new tool for personal information management.
These issues can be illustrated by my script that changes the homepage of the Information School at the University of Washington, my academic home. The top half of this Web page looked like this in July 2005:
Attention! The following description of how and why I script against this Web page reflects my own travails of information management and is not my recommendation of how you might script against this Web page or any other Web page. This script reflects my personal strategy for managing information resources.
My script helps me because
My version of the Information School page looks like this:
Moving between the official version of the Information School Web page and my version is simply done by toggling my Greasemonkey script on and off.
Download the latest version of this script
// ==UserScript==
// @name iNews
// @author Terry Brooks
// @date July 12, 2005
// @namespace http://faculty.washington.edu/tabrooks
// @include http://www.ischool.washington.edu/
// @exclude http://faculty.washington.edu/tabrooks/
// ==/UserScript==
(function()
{
// Put my own flower picture
var myFlowers, theirPic;
myFlowers = "http://www.ischool.washington.edu/tabrooks/
GreaseMonkey/myScripts/whiteFlowers.jpg";
theirPic = document.evaluate(
"//TABLE[2]//TD[3]/TABLE//IMG",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
theirPic.snapshotItem(0).src = myFlowers;
// Put my own news
var allNewstitles, thisNewstitle;
allNewstitles = document.evaluate(
"//TD[@class='newsitem']",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for (var i = 0; i < allNewstitles.snapshotLength; i++)
{
thisNewstitle = allNewstitles.snapshotItem(i);
if ( i == 0 )
{
thisNewstitle.style.backgroundColor = "white";
thisNewstitle.style.paddingLeft = "10px";
thisNewstitle.innerHTML =
"<a href='http://www.ischool.washington.edu/courses/descriptions.aspx'
style='color:black'>Course descriptions</a><br>" +
"<a href='http://www.ischool.washington.edu/courses/schedules.aspx'
style='color:black'>Course schedules</a><br>" +
"<a href='http://www.ischool.washington.edu/courses/courseWebs.aspx'
style='color:black'>Course Web pages</a><br>" +
"<a href='http://help.ischool.washington.edu/faqs/'
style='color:black'>Technology FAQS</a><br>" +
"<a href='http://msdn.e-academy.com/washington_is/'
style='color:black'>E-Academy software</a>" +
"<br><br>" +
"<a href='https://www.ischool.washington.edu/Webadmin/
programs/informatics/viewapplications.aspx'
style='color:black'>Informatics Admission Database</a><br>" +
"<a href='http://ecampus.ischool.washington.edu/evals-archive.asp'
style='color:black'>Distance course evaluations</a>" ;
}
else
{
thisNewstitle.style.display = "none";
}
}
}) ();
In the top-down Web, writers had to be reminded constantly of usability and accessibility issues, but these concerns fade in the bottom-up Web where the focus shifts to the many ways readers will transform Web pages to suit themselves. In the bottom-up Web, there are no 'bad' Web pages per se, merely Web pages you have yet to modify according to your tastes.
Leigh Dodds (2005, April 4) has speculated on how users will change Web pages and suggests the following categories:
The Greasemonkey community script archive lists hundreds of scripts designed for all Web pages and specific Websites. A number of Websites have been extensively scripted so far (this list probably reflects the interests of the members of the Greasemonkey development community):
Google services such as Adwords, Alerts, Blogger, Gmail, History, Images, Maps, and Yahoo services such as Mail, Maps, Music, and Groups have all attracted a large number of scripts. There may be a corporate strategy at work here of embedding services as extensively as possible in other Web applications.
There is a notable sub-species of mash-ups that link Amazon.com with library digital catalogues. Scripts have been written that alert the Amazon shopper if an item already exists in the collection of the Seattle Public Library, Peninsula Library System (California) or Markham Public Library (Ontario, Canada).
As the number of public scripts increases, finding scripts and evaluating scripts become problems. Two current resources are Last public marks and Userscripts
Web reader empowerment is spreading to other browsers. Each may have unique technical implementations, but there seems to be a general convergence towards the Greasemonkey model.
As an example of the future is the following blog posting by Rafael Rivera on July 27, 2005. He wrote a user script in Trixieto simplify the Windows Genuine Advantage logon. Note the ecumenical approach to other browsers indicating that user scripting is no longer limited to one type of browser:
It is probably salutary for would-be scripters to remind themselves that Web pages are short-lived phenomena; therefore, user scripts will probably frequently break. At one extreme, Web page content could be churned at every request, which would create an impossibly fast changing scripting target. On average, however, Web pages refresh content every 100 days (Brewington and Cybenko 2000). My own experience indicates that scripts targeting specific words or phrases are short-lived, while scripts targeting Web page structure are more robust.
There has also been some concern that Web writers will defend their Web pages by instigating a script war. A script war presumes that scripters would have made their scripts public, and the Web writer would have both the time and interest to change his Web page to defeat scripts. Cost-effective defense of a Web page becomes more problematical if scripts are private, there are many active scripters and different aspects of a Web page are under attack. In this situation, successful defense of a Web page's presentation is not so clear. Defense becomes even more expensive if scripting is occurring with several different types of browsers. Facing these disadvantages, Web writers are unlikely to succeed in script warfare.
Essentially, the architecture of request/response of the Web means that Web servers lose control of the Web page when they send it to the browser. Instead of warring with scripters, however, Web writers might co-opt them as volunteer Web-page usability consultants in order to refine Web-page design.
The greatest effect of user scripting will be in changing the culture of the Web. The top-down Web considered Web pages as containers of information placed before passive readers. The bottom-up Web considers Web pages as mere input to the reading experience. The culture of the Web will evolve so that reading a Web page will be like assembling a scrapbook where you can cut and paste, shift things about, mix together interesting pieces from various sources, and create something wholly unique for your purposes. User scripting permits the personalization of Web pages.
Web writers have much to gain from user scripting. By studying how readers change Web pages, Web writers can improve Web page designs. User scripting is, in effect, free usability testing and free product development (Holovaty, 2005, April 12). For example, Neil Kandalgaonkar scripted against Flickr, a Website for storing and sharing photographs. An early version of Flickr used Flash, which Neil's script, Lickr disabled. The result was a evolution in the Flickr Website:
User scripting represents one further step in the evolution of the Web as a democratic information utility. Widespread user scripting will create a virtuous feedback loop to change the Web faster.
The key to survival will be going meta: design for the bright kids. Create a flexible, modular set of APIs and a well-documented example UI or two that shows how they are used. Learn from Amazon and release your grip on the end-user experience. Sindikkaeshin (2005, February 2)
Consider Jonas Galvez as a bellwether of the future of distributed digital content. He has reduced his blog to its essentials making it as easy as possible to write personalized Greasemonkey skins. His readers has responded and customized his blog to their tastes and purposes.
Date: Fri, 09 Sep 2005 05:44:23 -0300
From: Jonas Galvez <[email protected]>
Subject: [Greasemonkey] Greasemonkey-based Website skins
Has anyone thought of implementing this already? I'm running a contest right now on my blog (in Brazilian Portuguese) in which I'll give a copy of 'Greasemonkey Hacks' (due in November, right?) to the authors of the 3 best skins for my blog.
My idea is simple: I've stripped down my blog layout to the simplest thing possible, making it easy to create GM-based skins. If users don't like the basic layout they can install a local script that dynamically skins the blog. Saves bandwidth and gives more power to the user.
I know it won't really catch on but I really like the idea, and it's been well received by my readers. 24 hours after I launched the contest, I received the first entry (which looks like a winner):
http://jonasgalvez.com/br/blog/ (this is the blog, unstyled) http://tinyurl.com/827mv (this is the GM-based skin) http://tinyurl.com/95n9o (screenshot of the skin applied)
I'm fascinated.
The author even loaded my del.icio.us links on a sidebar (and said he's working in a solution to cache them in cookies, too).
Greasemonkey Digest, Vol 10, Issue 29 </[email protected]>
The author wishes to acknowledge the contributions of Aaron Boodman, Mark Pilgrim, Scott Barker, Scott Turner and the suggestions of the anonymous referees.
| Find other papers on this subject. |
|
Web Counter |
© the author, 2006. Last updated: 16 March, 2006 |
|