User-side JavaScript

This article or section is a stub. It 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

## Contents

* 1 Definition
* 2 Greasemonkey
* 2.1 Conventions
* 2.2 An example
* 3 Other technology
* 4 Recommended scripts
* 5 Links
* 5.1 Greasemonkey

## Definition[edit | edit source]

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

## Greasemonkey[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

There exist other technology (later...)

## Recommended scripts[edit | edit source]

* 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[edit | edit source]

### Greasemonkey[edit | edit source]

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