2003:CC:4F25:F960:A11C:3F9E:492E:8BA1: /* Bereitstellen und Einbinden von Bookmarklets */

2025-06-09T15:10:19Z

Bereitstellen und Einbinden von Bookmarklets

Neue Seite

Ein '''Bookmarklet''' (auch '''Favelet''') ist ein kleines in [[JavaScript]] geschriebenes [[Computerprogramm]], das als [[Lesezeichen (World Wide Web)|Bookmark]] abgespeichert wird und dadurch die Funktionen eines [[Webbrowser]]s erweitert. Es erlaubt beispielsweise, das Aussehen oder die Funktionalität von Webseiten [[Client|clientseitig]] zu verändern. Technisch gesehen ist ein Bookmarklet ein Lesezeichen auf das [[Uniform Resource Identifier#Schema (Scheme)|URI-Schema]] <code>javascript:</code>, 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 [[Webformular|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 (Informatik)|Markierung]] und die Übergabe des markierten [[Text]]es an andere Webseiten, Berechnungen, Worttransformationen, [[Uniform Resource Locator|URL]]-Manipulationen, Manipulation des [[Document Object Model]]s, [[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.

== 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.

{| class="wikitable"
|'''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:
<syntaxhighlight lang="html" style="overflow:auto;">
javascript:alert('Hallo!');
</syntaxhighlight>
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:
<syntaxhighlight lang="html" style="overflow:auto;">
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])+' ')};void(close())}
</syntaxhighlight>

== 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:

<syntaxhighlight lang="html" style="overflow:auto;">
<a href="javascript:sel=document.getSelection();
if(!sel){void(sel=prompt('Suchbegriff:',''))};
if(sel)location.href='https://de.wikipedia.org/w/index.php?search='+encodeURIComponent(sel);">
Begriffserklärung mit Wikipedia
</a>
</syntaxhighlight>

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 [[URL-Encoding|Prozentzeichen]] schwierig ist und zudem Programmierkenntnisse in JavaScript erfordert.

== Weblinks ==

* [https://wiki.selfhtml.org/wiki/Bookmarklet Artikel über Bookmarklets im SELFHTML-Wiki]
* [https://www.squarefree.com/bookmarklets/ Jesse’s Bookmarklets Site]
* [https://www.stichpunkt.de/bookmarklets/ ''bookmarklets''.] Stichpunkt.de
* [https://chriszarate.github.io/bookmarkleter/ Programm, um aus eingegebenem JavaScript-Code ein Bookmarklet zu erzeugen]

[[Kategorie:Webbrowser]]
[[Kategorie:JavaScript]]

Bookmarklet - Versionsgeschichte

2003:CC:4F25:F960:A11C:3F9E:492E:8BA1: /* Bereitstellen und Einbinden von Bookmarklets */