Bookmarklet-Generator: JavaScript in ein Bookmarklet verwandeln

So nutzt du diesen Bookmarklet-Generator

1. Gib dem Lesezeichen einen Namen und füge dein JavaScript in das Codefeld ein, oder klicke auf Beispiel mit Seitentitel laden, um ein fertiges Beispiel zu sehen. Ein führendes javascript: ist optional; der Generator entfernt es und setzt sein eigenes.
2. Klicke auf Bookmarklet erstellen. Die erzeugte URL erscheint darunter, mit ihrer Länge in Zeichen.
3. Ziehe den dunklen Button in deine Lesezeichenleiste. Ist die Leiste ausgeblendet, schalte sie zuerst im Ansicht-Menü oder in den Einstellungen deines Browsers ein.
4. Öffne eine beliebige Seite und klicke auf das Lesezeichen. Das Skript läuft einmal, auf dieser Seite.

Ein Klick auf den Button hier auf der Seite bewirkt absichtlich nichts: Ein Bookmarklet soll auf der Seite laufen, die du gerade liest, nicht auf dem Generator.

Was ein Bookmarklet eigentlich ist

Ein Bookmarklet ist ein gewöhnliches Browser-Lesezeichen, dessen Adresse mitjavascript: statt mit https: beginnt. Öffne eine Seite, klicke auf das Lesezeichen, und der Browser führt dein Skript auf dieser Seite aus, statt irgendwohin zu navigieren. Bookmarklets eignen sich für seitenbezogene Aktionen: ein formatiertes Zitat kopieren, eine Leseansicht umschalten, markierten Text extrahieren oder die aktuelle URL in einem anderen Dienst öffnen. Sie brauchen keine Installation einer Erweiterung, fordern keine Berechtigungen an und liegen wie jeder andere Link in der Lesezeichenleiste.

JavaScript in ein Bookmarklet umwandeln

Ein Skript von Hand umzuwandeln, dauert drei Schritte, und der Generator übernimmt jeden davon. Hier ein Skript mit zwei Zeilen und das Bookmarklet, das daraus wird:

const n = document.links.length;
alert(n + ' Links auf dieser Seite');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20Links%20auf%20dieser%20Seite')%3B%0A%7D)()

1. Den Code in eine Funktion verpacken

Das Tool setzt deinen Code in eine sofort aufgerufene Pfeilfunktion,(() => { … })(). So kollidieren deine Variablen nicht mit dem, was die Seite schon definiert, und es gibt einen zweiten Grund: Wenn der Code in einerjavascript:-URL mit einem Textwert endet, ersetzt der Browser die Seite durch ein neues Dokument, das diesen Text zeigt. Eine Funktion mit Block-Body gibt nichts zurück, die Seite bleibt also stehen. Von Hand schreibt man klassisch void an den Anfang des Codes.

2. Prozentkodieren

Browser entfernen rohe Tabulator- und Zeilenumbruchzeichen aus jeder URL, bevor sie sie verwenden. Ein mehrzeiliges Skript, das direkt in ein Lesezeichen eingefügt wird, wird daher auf eine Zeile gequetscht. Ein einzelner //-Kommentar verschluckt dann alles danach, und Anweisungen, die auf Zeilenumbrüche angewiesen waren, laufen ineinander. Die Kodierung macht aus jedem Zeilenumbruch ein %0A, das überlebt; der Browser dekodiert den Code kurz vor der Ausführung wieder. Die Kodierung schützt außerdem Leerzeichen, doppelte Anführungszeichen, % und #.

3. Das Präfix javascript: ergänzen

Das Schema javascript: sagt dem Browser, den Rest der Adresse als Skript auszuführen. Der fertige String ist das, was du in die Leiste ziehst oder in ein Lesezeichen einfügst.

So installierst du ein Bookmarklet

Am Desktop

Ziehe den dunklen Button in die Lesezeichenleiste von Chrome, Edge, Firefox, Safari oder einem anderen Desktop-Browser. Ist Ziehen unpraktisch, klicke auf Lesezeichen-URL kopieren, lege ein neues Lesezeichen an und füge die URL in dessen Adressfeld ein.

Auf iPhone, iPad und Android

Mobile Browser haben keine Lesezeichenleiste zum Hineinziehen, nutze daher die Bearbeitungsmethode:

1. Klicke auf Lesezeichen-URL kopieren.
2. Setze ein Lesezeichen auf eine beliebige Seite, diese hier reicht.
3. Öffne deine Lesezeichen, bearbeite das neue Lesezeichen und ersetze seine Adresse durch die kopierte javascript:-URL. Benenne es bei der Gelegenheit um.
4. Gehe zu der Seite, auf der es laufen soll. In Safari auf iPhone oder iPad öffnest du das Lesezeichen aus deinen Lesezeichen. In Chrome auf Android tippst du den Namen des Bookmarklets in die Adressleiste und wählst den Lesezeichen-Vorschlag; über den Lesezeichen-Bildschirm verlässt du die Seite, und das Bookmarklet hätte nichts, worauf es laufen könnte.

Nicht in die Adressleiste einfügen

Es sieht nach einer Abkürzung aus, aber Chrome entfernt absichtlich ein führendesjavascript: aus Text, der in die Adressleiste eingefügt wird, als Schutz vor Betrug, bei dem Menschen dazu verleitet werden, schädlichen Code einzufügen. Was übrig bleibt, wird als Suche behandelt. Der zuverlässige Weg ist, den Code als Lesezeichen zu speichern.

Bookmarklet-Beispiele zum Einfügen

Jedes davon nutzt nur Standard-Browser-APIs. Füge eines in das Codefeld oben ein, klicke aufBookmarklet erstellen und installiere es.

Die Seite als Markdown-Link kopieren

Öffnet einen Dialog mit markiertem Link, bereit zum Kopieren.

prompt('Markdown-Link:', '[' + document.title + '](' + location.href + ')');

Markierte Wörter zählen

Erst Text markieren, dann das Bookmarklet anklicken.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert(words + ' Wörter markiert');

Die Seite bearbeitbar machen

Noch einmal klicken, um das Bearbeiten auszuschalten. Neu laden stellt das Original wieder her.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

Die Seite in der Wayback Machine öffnen

Listet archivierte Kopien der Seite auf, auf der du dich befindest.

location.href = 'https://web.archive.org/web/*/' + location.href;

Typische Einsatzzwecke für Bookmarklets

Warum ein Bookmarklet nicht funktioniert

Die Sicherheitsrichtlinie der Website blockiert es

Funktioniert ein Bookmarklet auf den meisten Seiten, auf einer aber nicht, sieh dir die Content-Security-Policy dieser Seite an. Die CSP-Spezifikation sieht vor, dass die Richtlinie einer Seite Bookmarklets nicht stören soll, Browser können javascript:-URLs auf Seiten mit strengen script-src-Regeln aber trotzdem blockieren. Ein Bookmarklet, das ein Skript von einer anderen Domain einschleust, ist doppelt betroffen: Selbst wenn es läuft, entscheidet die Richtlinie der Seite, ob das fremde Skript laden darf. Daran kann das Bookmarklet nichts ändern. Brauchst du das Skript auf einer solchen Website, hilft nur eine Browser-Erweiterung oder ein Userscript.

Die Seite wurde zu einer leeren Seite mit Text

Dein Code endete mit einem Textwert, also zeigte der Browser ihn als neue Seite an. Entferne jedes return, das Text zurückgibt. Hast du das Bookmarklet von Hand geschrieben, verpackt es dieser Generator beim erneuten Erzeugen in eine Funktion, sodass ein abschließender Textausdruck die Seite nicht mehr ersetzt.

Nichts passiert und es gibt keinen Fehler

Öffne die Entwicklerkonsole deines Browsers und klicke das Bookmarklet noch einmal an. Syntaxfehler, fehlende Elemente und blockierte Skripte werden dort gemeldet. Eine häufige Ursache bei handgemachten Bookmarklets ist ein //-Kommentar, der auf derselben Zeile wie der restliche Code gelandet ist. Neu erzeugen aus dem ursprünglichen Quelltext behebt das.

So bearbeitest du ein vorhandenes Bookmarklet

Kopiere die Adresse des Lesezeichens, entferne das führende javascript: und dekodiere den Rest mit dem URL-Encoder und -Decoder (auf Englisch), um lesbaren Code zurückzubekommen. Nimm deine Änderung vor, füge den Code in diesen Bookmarklet-Generator ein und ersetze die Adresse des alten Lesezeichens durch die neue URL. Den Originalquelltext in einer Textdatei aufzubewahren, erspart diesen Umweg.

Sicherheit ist wichtig

Ein Bookmarklet läuft mit demselben Zugriff wie die eigenen Skripte der Seite: Es kann alles lesen und verändern, was die Seite preisgibt. Prüfe Code, bevor du ihn installierst, meide Snippets, die Skripte von außen nachladen (eine URL, die jemand anderes kontrolliert, kann sich nach deiner Installation ändern), und führe ein unbekanntes Bookmarklet nie auf einer Seite mit sensiblen Informationen aus. Fordert dich eine Website, Nachricht oder ein Video auf, Code in ein Lesezeichen oder deine Adressleiste einzufügen, behandle es als Betrug.

Bookmarklet, Userscript oder Erweiterung

Die drei sehen ähnlich aus, erfüllen aber unterschiedliche Bedürfnisse. EinBookmarklet ist ein Skript, das einmal auf einer Seite läuft, wenn du klickst: keine Installation, und es wandert mit deinen Lesezeichen. Ein Userscript(verwaltet von einem Userscript-Manager) haftet an passenden Websites und kann bei jedem Besuch automatisch laufen, wobei es zwischen Seiten eigene Einstellungen behält. EineBrowser-Erweiterung kann beides und mehr: Hintergrundarbeit, Netzwerkzugriffe, Symbole in der Symbolleiste, zum Preis eines Installationsschritts und weitreichender Berechtigungen, die der Browser dir vorab anzeigt. Erweiterungen werden von Seiten-Sicherheitsrichtlinien außerdem anders behandelt: Laut CSP-Spezifikation sorgt Chrome dafür, dass durch Erweiterungen eingeschleuste Inhalte unabhängig von der Richtlinie der Seite funktionieren. Beginne mit dem Bookmarklet und steige erst um, wenn du an seine Grenzen stößt.

Grenzen: wann kein Bookmarklet

Ein Bookmarklet läuft nur, wenn du es anklickst, und immer nur auf einer Seite. Es kann keinen Zustand zwischen Besuchen halten, nicht im Hintergrund arbeiten und nicht automatisch jede Seite verändern. Die Länge ist selten das Problem (Chrome dokumentiert eine maximale URL-Länge von 2 MB), aber ein langes Skript wird zu einer unlesbaren Lesezeichen-URL, und in dieser Größe ist ein Userscript-Manager oder eine Erweiterung leichter zu pflegen. Änderungen durch ein Bookmarklet verschwinden außerdem beim Neuladen: Willst du Markierungen, die beim nächsten Mal noch da sind, liesText auf jeder Website markieren und behalten. Und wenn die Aufgabe „diese Seite mit einem Klick speichern“ lautet statt „ein Snippet ausführen“, erledigt das eine dafür gebauteBrowser-Erweiterung (auf Englisch), ohne dass du Code pflegen musst.

Datenschutz: wohin dein Code geht

Nirgendwohin. Name, Snippet und erzeugte URL verlassen die Seite nie; beim Erstellen eines Bookmarklets findet keine Netzwerkanfrage statt. Eine ehrliche Einschränkung: Das fertige Bookmarklet liegt als normales Lesezeichen, synchronisierst du also Lesezeichen zwischen Geräten, wandert das Skript mit deinen übrigen Lesezeichen mit und ist für alles sichtbar, was dieses synchronisierte Profil lesen kann.

Verwandte Tools und Ratgeber

Das Markdown-Link-Bookmarklet oben kopiert einen Link nach dem anderen; um das HTML einer ganzen Seite in Markdown umzuwandeln, nutze denHTML-zu-Markdown-Konverter (auf Englisch). Sind die Links, die du kopierst, voller Tracking-Parameter, entfernt derURL-Bereiniger sie. Zum Speichern und Bearbeiten von Seiten ganz ohne Skript siehe MarqlysWeb-Highlighter, denLesezeichen-Manager für Chrome und den Workflow des zweiten Gehirns, oder lies den RatgeberLesezeichen organisieren.