User-side JavaScript

Draft

Definition

By user-side JavaScript we mean technology that allows a user to alter a web page, before or after loading.

Greasemonkey

Greasemonkey is a Firefox extension that allows you to to write scripts that modify a page for a given domain that users then can define.

• Firefox Greasemonkey add-on
• Platypus A Firefox extension that allows to modify pages and then save as greasemonkey script.

Of course, such scripts can be dangerous, e.g. may trick you into typing passwords and send them via Ajax to some web site etc. Only use this technology with scripts that seem to be tested and popular on userscripts.org ... or look at the code.

Conventions

When you name a file xxx.user.js and Greasemonkey is active (ape icon on lower right is smiling), then FF will install this script. You then can change its parameters and edit it of course.

In the comments in header of the script you can include information that the installer will extract. See the example below:

An example

This will change the cursor and will automatically load a page when the mouse is over a link (should be slowed down). We made this to implement web surfing with the Nintendo Wii balance board.

// ==UserScript==
// @name           Mouseover surfing v. 0.1
// @namespace      DKS
// @description    Adds a mouseover event handler to links of a web page. Originally made for surfing http://edutechwiki.unige.ch/en with a wii balance board.
// @include        http://tecfa.unige.ch/guides/js/ex/greasemonkey/
// ==/UserScript==

var n=document.links.length;
// Change the cursor into something that is bigger
// Replace by any bitmap or builtin cursor of your choice
document.body.style.cursor = "url(http://tecfa.unige.ch/guides/js/ex/greasemonkey/cursor.png) 25 25, auto";

for (var i = 0; i < n; i++) {
  l = document.links[i];
  l.addEventListener(
     'mouseover',
     function(event) {
       var link = event.target;
       // link.style.cursor = "crosshair";
       link.style.cursor = "url(http://tecfa.unige.ch/guides/js/ex/greasemonkey/cursor-link.png) 25 25, auto";
       // Uncomment to constrain to mediawiki internal links
       // if (link.className!="external text") 
       if (link.href) document.location.href = link.href;
     },
     true);
 }

Other technology

There exist other technology (later...)

Recommended scripts

• wikEd A must have to edit media wikis. I usually prefer to edit wiki pages with an external editor (Emacs), but this is the next best best solution.

• Wikipedia Presentation

Links

Greasemonkey

Greasemonkey homes

• Developer's blog. Also includes a tutorial for programmers.
• Firefox Greasemonkey add-on

Repositories

• UserScripts.org Large repository of Greasemonkey script. It's the official outlet.
• Greasemonkey UserScripts A few useful script from openjs.com