Bookmarklet

Ein Bookmarklet (auch Favelet) ist ein kleines in JavaScript geschriebenes Computerprogramm, das als Bookmark abgespeichert wird und dadurch die Funktionen eines Webbrowsers erweitert. Es erlaubt beispielsweise, Aussehen oder Funktionalität von Webseiten clientseitig zu verändern. Technisch gesehen ist ein Bookmarklet ein Lesezeichen auf das URI-Schema javascript:, das es ermöglicht, JavaScript-Code durch den Browser auszuführen.

Im Normalfall wird ein in eine Webseite eingebettetes JavaScript-Programm beim Aufruf der Webseite oder bei bestimmten Aktionen, wie dem Absenden eines Formulars o. ä., ausgeführt. Art und Zeitpunkt der Ausführung bestimmt dabei der Ersteller der Webseite. Dagegen wird im Falle von Bookmarklets der enthaltene JavaScript-Code auf die momentan angezeigte Webseite angewendet, indem das Bookmarklet angewählt wird, nachdem die Seite geladen wurde.

Mögliche Anwendungen sind z. B. das Auslesen der Markierung und die Übergabe des markierten Textes an andere Webseiten, Berechnungen, Worttransformationen, URL-Manipulationen, Manipulation des Document Object Models, Whois-Abfragen und so weiter.

Die Unterstützung in den verschiedenen Browsern hängt vom jeweiligen Support von JavaScript-URLs in den Bookmarks ab. Darüber hinaus spielt die Unterstützung der jeweiligen Teile des JavaScript-Codes eine Rolle.

Beispiel: Begriffserklärung mit Wikipedia

Das folgende JavaScript-Programm durchsucht beispielsweise die deutschsprachige Ausgabe der Wikipedia nach dem zuvor im Browser markierten Text:

var sel = document.getSelection();

if (sel === null || sel === undefined) {
    sel = prompt('Suchbegriff:', '');
}

if (sel !== null && sel !== undefined && sel !== '') {
    location.href = 'https://de.wiki.x.io/w/index.php?search=' + encodeURIComponent(sel);
}

Um dieses Programm in einem Bookmarklet zu verwenden, müssen einige Sonderzeichen ersetzt werden, damit sie nicht falsch interpretiert werden. Aus dem obigen Beispiel entsteht dann das folgende Bookmarklet, das im Prinzip denselben Code wie oben enthält, nur schwerer lesbar, dafür aber technisch eindeutig:

javascript:void%20function(){var%20sel=document.getSelection();if%20(sel===null||sel===undefined)sel=prompt(%22Suchbegriff:%22,%22%22);if(sel!==null%26%26sel!==undefined%26%26sel!==%22%22)location.href=%22https://de.wiki.x.io/w/index.php%3Fsearch=%22+encodeURIComponent(sel)}();

Das Bookmarklet aus dem obigen Beispiel öffnet den Wikipedia-Artikel im selben Fenster (bzw. Tab), in dem sich die Webseite mit dem erklärungsbedürftigen Begriff befand. Will man das nicht, sondern lieber die Wikipedia-Erklärung in einem neuen Tab/Fenster, so muss der JavaScript-Code entsprechend angepasst werden. Statt der Anweisung location.href = … ist dann der folgende Code nötig:

    var w = 'https://de.wiki.x.io/w/index.php?search=' + encodeURIComponent(sel);
    w.focus();

Kompatibilität der Browser

Das Vorgehen, um wie im obigen Beispiel auf den aktuell ausgewählten Text zuzugreifen, unterscheidet sich zwischen den Browsern:

In einigen Browsern (Google Chrome, Safari) funktioniert window.getSelection()
In anderen Browsern funktioniert document.getSelection()
Im Microsoft Internet Explorer funktioniert document.selection.createRange().text

Um ein Bookmarklet zu erstellen, das in allen Browsern gleichermaßen funktioniert, müssen diese Unterschiede berücksichtigt werden.

Installieren:	Ein neues Lesezeichen/Favoriten anlegen. Einen Namen für das neue Lesezeichen/Favoriten wählen. In das Adressfeld den JavaScript-Code kopieren.
Benutzen:	Auf einer beliebigen Webseite ein Wort markieren. Lesezeichen/Favoriten, das den JavaScript-Code enthält, aufrufen. Wikipedia zeigt Erklärung des markierten Wortes an.

Weitere Beispiele

Minimales Beispiel

Das folgende Bookmarklet besteht aus nur einer JavaScript-Anweisung und öffnet einfach einen Dialog:

javascript:alert('Hallo!');

Dieses Bookmarklet leistet also nichts Sinnvolles, sondern soll einfach das Grundprinzip veranschaulichen.

Liste angezeigter Webseiten

Das folgende Bookmarklet erzeugt eine neue Seite, auf der alle Links der angezeigten Webseite aufgezählt werden:

javascript:w=open('','Z6','width=400,height=200,scrollbars,resizable,menubar');l=document.links;with(w.document){write('<base%20target=_blank>');for(i=0;i<l.length;i++){write(l[i].toString().link(l[i])+'<br/>')};void(close())}

Bereitstellen und Einbinden von Bookmarklets

Es gibt mehrere Möglichkeiten Bookmarklets bereitzustellen und einzubinden. Eine einfache Möglichkeit ist, den JavaScript-Code als Link in eine HTML-Seite einzubinden. Im folgenden Beispiel wird der Link „Begriffserklärung mit Wikipedia“ mit dem JavaScript-Code erstellt, der oben bereits erläutert ist:

<a href="javascript:sel=document.getSelection();
         if(!sel){void(sel=prompt('Suchbegriff:',''))};
         if(sel)location.href='https://de.wiki.x.io/w/index.php?search='+encodeURIComponent(sel);">
  Begriffserklärung mit Wikipedia
</a>

Wird die Seite mit einem Browser aufgerufen, so erscheint der Linktext „Begriffserklärung mit Wikipedia“ im Text der Seite. Der Benutzer sollte nun im einfachsten Fall diesen Link mit der Maus in seine Symbolleiste verschieben (nicht anklicken). Sofern keine Symbolleiste sichtbar ist, muss sie vorher über die Browsereinstellungen sichtbar gemacht werden (bei Firefox etwa durch Häkchensetzen unter Ansicht -> Symbolleisten -> Lesezeichen-Symbolleiste). Anschließend kann der Benutzer auf beliebigen Webseiten einen Begriff mit der Maus markieren und auf den Eintrag „Begriffserklärung mit Wikipedia“ in der Symbolleiste klicken – er wird dann auf die entsprechende Seite der Wikipedia geleitet. In der Praxis empfiehlt es sich, eine Abkürzung für „Begriffserklärung mit Wikipedia“ zu wählen, um Platz in der Symbolleiste zu sparen.

Sicherheit

Wenn ein Bookmarklet auf einer Webseite angeklickt wird, wird der darin enthaltene Programmcode im Rahmen dieser Webseite ausgeführt. Der Browser stellt sicher, dass dieser Code nur auf Daten zugreifen kann, die zu der umgebenden Seite gehören. Dadurch ist ausgeschlossen, dass durch das einfache Klicken auf einen Link auf Daten von einer Drittanbieter-Webseite zugegriffen wird.

Durch das Erstellen eines Bookmarklets wird der im Bookmarklet enthaltene Programmcode im Rahmen der jeweils aktiven Webseite ausgeführt. Bösartiger Code kann dies ausnutzen und Daten von der aktiven Webseite an andere Webseiten übertragen, wie im obigen (gutartigen) Beispiel mit der Suchfunktion demonstriert. Daher sollten Bookmarklets nur aus vertrauenswürdigen Quellen installiert und verwendet werden. Bei Bookmarklets aus anderen Quellen sollte der Code vor der Verwendung inhaltlich geprüft werden, was aufgrund der vielen Prozentzeichen schwierig ist und zudem Programmierkenntnisse in JavaScript erfordert.