im web gefunden

Mit Greasemonkey lassen sich innerhalb von Firefox beliebige Webseiten verändern und mit zusätzlichen Funktionen an die eigenen Wünsche anpassen. Oftmals möchte man dabei auch ein Javascript-Framework, wie jQuery, mit einbinden, um noch mehr Möglichkeiten zu haben.

Eigentlich ist es grundsätzlich nicht schwer beliebige Javascript-Bibliotheken, auch eigene, innerhalb von Greasemonkey zu nutzen.

Eine Möglichkeit für eine sehr allgemein gehaltene Umsetzung findet sich im Web bei Life is grand. Sie fügt den JavaScript-Bibliotheks-Aufruf vor dem body-Tag ein und sieht so aus:

var theScript = document.createElement(”script”);
theScript.src = “http://url_zur_javascript_biliothek”;
theScript.language = “javascript”;
document.body.insertBefore(theScript, document.body.firstChild);

Eine speziell auf jQuery abgestimmte Methode hat Joan Piedra beschrieben. Diese Vorgehensweise wurde später von Karl im “Learning jQuery Blog” übernommen und etwas aufgebohrt. Allerdings hatte ich mit Karls Lösung mehrere Probleme. So bekam ich im Firebug immer wieder Fehlermeldungen wie:

easing[e.easing || (C.easing.swing ? "swing" : "linear")] is not a function

Diese Fehlermeldung hätte man zwar noch durch den Einsatz eines Plugins wegbekommen können, aber dafür schien mir der Aufwand nicht gerechtfertigt. Weiterhin hatte Karls Funktion den Nachteil, daß die Laufzeitmeldung von jQuery nur am oberen Bildschirmrand zu sehen war. Durch einen abgeänderten Style mit position: fixed; und z-index: 66; ist die Meldung jetzt auch zu sehen, wenn das Sprungziel in der Mitte einer Webseite ist. Auf Grund der oben genannten Fehlermeldung, die hauptsächlich auf die Angabe einer Callback-Funktion beim fadeOut zurück zu führen ist, lösche ich das eingefügte div nicht.

Bevor jetzt hier meine Lösung kommt noch eine Anmerkung am Rande. Die letzte Version von jQuery ist unter http://jquery.com/src/jquery-latest.js zu finden. Jetzt könnte man natürlich genau auf diese Version innerhalb seines Greasemonkey-Scripts verweisen. Das das nicht der Weisheit letzter Schluss ist, sollte jedem schnell klar werden, wenn man sich die dadurch entstehende Last auf dem jQuery-Server vorstellt. Wer also solche Lösung wie die hier beschriebene einsetzt, sollte dafür auf eine eigene und nur für diese Zwecke verwendete Version von jQuery zurückgreifen.

Hier nun der vollständige Quelltext meiner im Einsatz befindlichen Lösung:

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://your-server/your-path/jquery.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
function GM_wait() {
	if(typeof unsafeWindow.jQuery == 'undefined') {
		window.setTimeout(GM_wait,100);
	} else {
		jQuery = unsafeWindow.jQuery;
		letsJQuery();
	}
}
GM_wait();

// All your GM code must be inside this function

function letsJQuery() {
jQuery.noConflict();

jQuery("<div>jQuery is running!</div>")
	.css({padding: '10px', background: '#ffc', position: 'fixed',top: '0', left: '0', 'z-index': '66', width: '99%'})
	.appendTo('body')
	.fadeIn('fast')
	.animate({opacity: 1.0}, 1000)
	.fadeOut(2000);

}

Nur der Vollständigkeit halber sei erwähnt, dass es auch spezielle Greasemonkey-jQuery-Packs gibt, wie zum Beispiel das von Sean. Für mich selber sind sie bedeutungslos, da durch sie das Greasemonkey-Script sehr viel größer und fest an eine bestimmte jQuery-Version gebunden wird.