User-side JavaScript

From EduTech Wiki
Jump to: navigation, search

This article or section is a stub. A stub is an entry that did not yet receive substantial attention from editors, and as such does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.

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