jQuery in Greasemonkey

Wer kennt das nicht, die täglich besuchte Website deckt im Grunde die Anforderungen ab die man an Sie stellt, aber hin und wieder wär etwas Zusatzkomfort nicht schlecht. Hier kommt Greasemonkey ins Spiel.

Greasemonkey ist eine Erweiterung für den Webbrowser Firefox, dessen Scripte teilweise auch unter Google Chrome, Opera und anderen Browsern mit kleinen Anpassungen, laufen. Mithilfe dieser Erweiterung ist es möglich eigene locale Javascript Datein im Browser ausführen zu lassen, um Erscheinungsbild und Verhalten einer Webseite ohne Eingriff auf die eigentliche Seite anzupassen. Sehr nütlich um z.B. bei einem täglich genutzten Suchfilter die Auswahlparameter automatisch auswählen zu lassen.

Nun gibt es kaum etwas was einen mehr ermüdet als Javascript und CSS in Kombination, vorallem bei den strikt eingehaltenen Standards die es für das Web gibt. Hier kommt jQuery ins Spiel. jQuery ist ein umfangreiches Framework, das unter der MIT oder GPL2 Lizenz frei zur Verfügung gestellt wird.

jQuery zeichnet sich unter anderem durch einfache Selektion und Manipulation des DOM-Baums aus, ist bereits CSS3 fähig und wird als cross-browser kompatibel umworben. Letztere herrausragende Eigenschaft fällt bei der Nutzung von Greasemonkeyscripten normalerweise nicht so ins Gewicht. Wenn jemand allerdings Erfahrungen damit gesammelt hat, wie gut ein Greasemonkeyscript mit jQuery in anderen Browsern funktioniert, möge er sich bitte melden! jQuery offeriert zusätzlich einige Hilfsfunktionen, die neben einem Eventsystem auch diverse Effekte und Animationen bereitstellen, sowie einfache eine Ajaxfunktionalität. Außerdem sind bereits zahlreiche Plugins verfügbar, und sollte der eigene Anwendungsfall noch nicht abgedeckt sein, ist es auch äußerst leicht erweiterbar.

Genug der Werbung, wer nun an jQuery interessiert ist möge doch selbst noch etwas darüber recherchieren. Wer ein anderes JS Framework lieber verwenden möchte kann dies gern tun, an der grundlegenden Vorgehensweise für das benutzen eines solchen Frameworks ändert sich dadurch nichts.

Ich möchte hier noch kurz vorstellen wie man jQuery in einem Greasemonkeyscript nutzt und zeigen was man dabei besonders beachten muss. Außerdem gibts natürlich ein kleines Beispielscript.

Greasemonkey in der aktuellen Version erlaubt das einbinden von externen Bibliotheken über die @require Annotation. Hierbei muss einfach die URL zur jQuery Bibliothek angegeben werden. die @include Annotation beschränkt das Script auf meine Blogseite, sowie alle Unterseiten davon.

//==UserScript==
// @name           Nullpointer Wobbling Logo
// @namespace      nullpointer.at
// @description    Nullpointer Wobbling Logo
// @include        http://nullpointer.at/
// @include        http://nullpointer.at/*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==
jQuery('a#logo').mouseover(function() {
var pos = $(this).css("left");
if (pos == "0px") {
$(this).animate({left: "200px"}, 5000);
} else {
$(this).animate({left: "0px"}, 3000);
}
});

Das Script kann über diesen Link installiert werden: nullpointer_logo.user.js (Achtung Greasemonkey >= 0.8 und Firefox notwendig)

Der aufruf der jQuery Funktionalität ist dannach simpel wie eh und je. Als Kurzeinführung:
jQuery … damit wird die Bibliothek aufgerufen
‚a#logo‘ … damit wird das entsprechende HTML element selektiert, hier alle Links die die Id logo haben.
.mouseover … hier die eventhandling Methode, sollte die Maus über das Logo von nullpointer.at geführt werden, wird die innere Funktion aufgerufen, die das Logo ein wenig verschieben. Bei einem weitern Mouseover erfolgt der nächste Aufruf, und das Logo wird zurückgeschoben.

Achtung! Greasemonkey lädt bei der Installation eines Scripts alle Abhängigkeiten runter, ein Script dass eine @require Bibliothek verlinkt muss diese schon bei der Installation definiert haben. Ein neues Script muss also erstmal per Hand installiert werden, damit die Abhängigkeit richtig aufgelöst wird. Auch eine Änderung eines @require Links würde daher zu Fehlern führen, die die Bibliothek nicht neu geladen wird, dennoch aber die geänderte Version gesucht wird. Das Script muss daher auch in diesem Fall neu installiert werden.

Ebenfalls gibt es derzeit Fehler bei der Nutzung der aktuellen jQuery Version 1.4.2 (weshalb ich hier im Script auch Version 1.3.2 nutze) im Eventhandling. Genaueres dazu kann in diesem Thread nachgelesen werden:
http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error

Sollte Kompatibilität mit älteren Greasemonkeyversionen notwendig sein, so ist es notwendig die jQuerybibliothek anders zu laden. Auf folgender Webseite dazu eine kleine Einführung:

http://joanpiedra.com/jquery/greasemonkey/

Greasemonkey

http://www.greasespot.net

http://de.wikipedia.org/wiki/Greasemonkey

https://addons.mozilla.org/de/firefox/addon/748/

jQuery

http://jquery.com/