In diesem kleinem Tutorial möchte ich Euch kurz zeigen, wie man selbst ein kleines UserScript erstellen kann, mit dem man per CSS eine beliebige Website anpassen kann.
Was ist eigentlich ein UserScript?
Mit einem UserScript hat man die Möglichkeit eine beliebige Website, seinen eigenen Bedürfnissen anzupassen und sie nach belieben zu verändern. Für viele hört sich das natürlich sehr verlockend an, um sich Zugang zu einer Website zu verschaffen, doch sollte man beachten das all die Änderungen nur lokal auf dem eigenem PC geschehen und somit auch nur für den Benutzer des Scripts sichtbar beziehungsweise nutzbar sind.
Dann fangen wir mal an!
Als erstes legen wir uns eine neue Text-Datei an. in die wir einfach mal diese beide Zeilen einfügen.
// ==/UserScript==
Diese zwei Zeilen müssen in jedem UserScript vorhanden sein, damit es als ein solches erkannt wird. Ausserdem bezeichnen sie den Anfang und das Ende des Kopfteils (Head-Bereich) des Scripts. In diesem Kopfteil müssen nun noch ein paar Zeilen eingefügt werden, die für das Script und seine Ausführung entscheiden sind. Jede dieser Zeilen muss mit zwei Slashes ( // ) beginnen. Zuerst sollte man den Namen des Scripts angeben, dies geschieht über die Enleitung @name NAME_DES_SCRIPTS, dieser wird dann im Browser als Name des Scripts (Greasemonkey oder unter Erweiterungen im Chrome) ausgegeben. Nun sollten die Versionsnummer und die Beschreibung des Scripts folgen, wiederum eingeleitet mit @version VERSIONSNUMMER und @description BESCHREIBUNG. Zuletzt fehlt uns noch die URL der Seite auf die das Script angewendet werden soll, hierfür benötigen wir die Einleitung @include URL_DER_WEBSITE. Für Unterseiten dieser Domain kann man ein Sternchen (*) als Wildcard an die Domain anhängen. Als Beispiel @include http://domain.de/*.
// @name TestUserScript
// @version 1.0
// @description TestScript zum Tutorial
// @include http://domain.de/*
// ==/UserScript==
Was ist jetzt mit Stylesheets?
Damit unser UserScript jetzt auch die Stylesheets beeinflussen kann, müssen wir ein kleines Snippet in unser Script einfügen.
// @name TestUserScript
// @version 1.0
// @description TestScript zum Tutorial
// @include http://domain.de/*
// ==/UserScript==
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
Diese kleine Funktion sorgt dafür das all unsere nachfolgenden Anpassungen auch ausgeführt werden, sprich lokal in das HTML-Dokument eingefügt werden. Dazu muss man jetzt nur noch den Funktionsaufruf addGlobalStyle(‚HIER_KOMMT_DAS_STYLESHEET_REIN‘); mit dem Stylesheet einfügen.
Und jetzt wird es interresant!
Als Beispiel nehmen wir uns mal das Hintergrundbild meines Blogs vor und entfernen den Holz-Look. Dazu müssen wir natürlich erstmal den Kopfteil des Scripts anpassen und unsere eigenen Angaben einfügen.
// @name Hintergrund
// @version 1.0
// @description Ändert die Hintergrundfarbe von Webograph.de.
// @include http://webograph.de/**
// ==/UserScript==
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
Um nun den Hintergrund zu entfernen, fügen wir die Zeile addGlobalStyle(‚body {background-image: none !important;}‘); ein und somit sollte der Holz-Look entfernt sein und ein weiß-grauer Farbverlauf sichtbar sein.
Und hier jetzt das fertige Script:
// @name Hintergrund
// @version 1.0
// @description Ändert die Hintergrundfarbe von Webograph.de.
// @include http://webograph.de/**
// ==/UserScript==
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle('body {background-image: none !important;}');
Und jetzt?
Da unser Script jetzt fertig ist, sollten wir es jetzt auch in ein solches verwandeln, da es noch eine einfache Text-Datei ist dazu müssen wir die Endung entfernen und durch .user.js ersetzen. Diese Doppelendung sagt aus das es ein UserScript und somit auch als ein solches behandelt wird. Jetzt können wir unser Script nehmen und in unseren Browser (bzw. Greasemonkey im Firefox) einfügen, als Beispiel nehmen wir mal den Chrome in den man das Script einfach in ein geöffnetes Browserfenster, um es zu installieren. Hierauf sollten zwei kurze Abfragen folgen die wir bestätigen und schon ist alles fertig. Nun sollte alles so funktionieren wie wir es wollen.
Link zum fertigen Script: no_background-image.user.js.txt
Zum installieren die Endung .txt entfernen.
Link zu einer Script-Vorlage: draft.user.js.txt
Zum entfernen!
//Chrome
Im Menu unter Einstellungen / Erweiterungen einfach auf entfernen klicken.
//Greasemonkey
Auf das Greasemonkey Symbol und dann auf „Benutzerscripte verwalten“ klicken und das Script löschen.
Ich hoffe Euch gefällt dieses kleine Tutorial zum Thema UserScripts, falls Euch Fehler aufgefallen sein sollten oder Fragen habt, einfach in die Kommentare schreiben.