User-side JavaScript

The educational technology and digital learning wiki
Jump to: navigation, search

Draft

1 Definition

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

2 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.

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.

2.1 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:

2.2 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);
 }

3 Other technology

There exist other technology (later...)

4 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.

5 Links

5.1 Greasemonkey

Greasemonkey homes
Repositories