Surf-Heinzelmännchen
Smarter im Web unterwegs mit kleinen Browser-Hacks
Flott zu gewünschten Inhalten finden, Standardabläufe automatisieren, Webseiteninhalte anpassen: Browser-Kurzbefehle und Bookmarklets machen das Surfen mit Chrome, Edge und Firefox schneller und angenehmer.
Schon von Haus aus ist Ihr Browser ist eine mächtige Anwendung. Wenn Sie seine Funktionen dann auch noch ein wenig über die eigentlich vorgesehenen Einsatzmöglichkeiten hinaus ausreizen, erleichtern Sie sich viele Aufgaben zusätzlich. In Form von Bookmarklets passen Sie Webseiten an und erweitern ihren Funktionsumfang. Und Kurzbefehle für die Adresszeile eröffnen Ihnen auf etlichen Sites eine ganz neue, schnelle Form der Navigation.
Die Adressfelder der großen Browser dienen zugleich als Eingabefelder für Anfragen an Suchmaschinen. Eine Suchmaschine ist als Standard gesetzt. Ein paar weitere Suchdienste unterstützen die Browser von Haus aus zusätzlich. Eine Suchanfrage an die Standardsuchmaschine tippt man einfach ins Adressfeld ein. Für die Suche mit einer anderen Suchmaschine stellt man einen Kurzbefehl voran.
Die Suchmaschinen lassen sich individualisieren. Das können Sie einsetzen, um häufig benutzte Sites schnell zu durchsuchen. Nutzen Sie den zugrunde liegenden Mechanismus kreativ, navigieren Sie damit zudem auf etlichen Websites zielgerichteter und schneller.
Bei Chrome nennen sich die Suchmaschinen-Kurzbefehle „Suchkürzel“. Neue Suchmaschinen fügen Sie hinzu, indem Sie die Suche auf einer Website benutzen. Chrome integriert den Suchdienst daraufhin bei seinen Suchmaschinen. Sie finden die Einstellungen der auf diese Weise eingebetteten Suchen in den Einstellungen unter „Suchmaschine/Suchmaschinen verwalten“.
Befindet sich eine Suchmaschine unter diesen eingebetteten Suchdiensten, dann bietet einem Chrome bei manchen bereits an, die betreffende Website zu durchsuchen, noch während Sie die Adresse eintippen. Schneller zum Ziel führen individuelle Suchkürzel. Standardmäßig nutzt Chrome die Second-Level-Domain als Suchkürzel. Haben Sie zum Beispiel bei heise online gesucht, lautet das Kürzel „heise.de“.
Sollte Chrome eine Suchmaschine nicht automatisch erkennen, müssen Sie sie durch Klick auf „Hinzufügen“ selbst eintragen. Zum Beispiel werden bei einer Suche bei Zeit.de die Ergebnisse mit der URL
https://www.zeit.de/suche/index?q=test
dargestellt, wenn test der gesuchte String ist. Ersetzen Sie test durch %s und tragen Sie den sich ergebenden String unter „URL mit %s statt der Suchanfrage“ ein; vergeben Sie außerdem einen Namen und ein Suchkürzel.
Bei Edge finden sich die integrierten Suchmaschinen in den Einstellungen unter „Datenschutz, Suche und Dienste/Adressleiste und Suche/Suchmaschinen verwalten“. Einen Kurzbefehl nennt Edge „Stichwort“. Edge lernt nicht aus dem Suchverhalten des Nutzers. Sie müssen individuelle Suchmaschinen in den Optionen also zu Fuß hinzufügen. Das funktioniert allerdings problemlos – die Eingabefelder sind dieselben wie bei Chrome.
Zweigleisiger Firefox
Bei Firefox heißen die Kurzbefehle „Schlüsselwörter“. Es gibt beim Mozilla-Browser zwei Wege, solche Schlüsselwörter für Suchmaschinen hinzuzufügen. Als Suchmaschinen gelten bei Firefox nur vorgegebene Dienste und solche, die mit einem Add-on installiert sind. Klicken Sie in den Suchmaschinen-Optionen auf „Weitere Suchmaschinen hinzufügen“, ruft Firefox die Seite „Suchwerkzeuge“ in seinem Add-on-Verzeichnis auf. Darin finden sich mehr als 3000 Add-ons, die im weitesten Sinne mit der Suche zu tun haben. Leider lässt sich die Kategorie auch mit den Filtermöglichkeiten nicht gut durchsuchen. Es ist reine Glückssache, dort etwas Nützliches zu finden.
Es lohnt sich nur, sich mit den Firefox-Such-Add-ons auseinanderzusetzen, wenn ein Dienst oder eine Suchmaschine Ihrer Wahl explizit ein Firefox-Add-on bereitstellt. Grundsätzlich ist es kein Hexenwerk, ein Such-Add-on für seine bevorzugte Suchmaschine zu bauen. Das würde aber für diesen Artikel zu weit führen. Einen Link zu einer Anleitung finden Sie unter ct.de/yczt.
Schnell seine Lieblingssite zu durchsuchen geht auch einfacher: Anders als bei Chrome und Edge können Sie ein Schlüsselwort für eine Suche über das Kontextmenü des Eingabefeldes vergeben, wenn Sie ein Suchformular auf einer Website verwenden. Die betreffenden Einstellungen finden sich dann allerdings nicht bei den Suchmaschinen, sondern in den Lesezeichen. Dort bietet Firefox leider keine Möglichkeit, sich alle Lesezeichen anzeigen zu lassen, für die Sie ein Schlüsselwort eingerichtet haben. Sie müssen also irgendwo anders Buch über ihre Schlüsselwörter führen, denn sonst laufen Sie Gefahr, Schlüsselwörter doppelt zu nutzen. In einem solchen Fall kommt nur der Dienst zum Einsatz, dem Sie das Kürzel zuletzt vergeben haben.
Deep Links direkt
Die Kurzbefehle, die die Browser standardmäßig einrichten, sind in der Regel ziemlich lang. Vergeben Sie kürzere, um sich unnötige Tipparbeit zu sparen. Vor allem aber sollten Sie die Funktion kreativ nutzen. Sie eignet sich für alle Anwendungsfälle, in denen Sie auf Webseiten zugreifen müssen, deren URL einen bestimmten Identifier enthält.
Ein Beispiel: Das Content Management System (CMS) bei heise online identifiziert Artikel über eine sogenannte Beitrags-ID, die BID. Sie ist das Kennzeichen, mit dem Redakteure über ihre Artikel reden: „Kannst Du mal den Artikel mit der BID XY gegenlesen?“. Mit der BID kann man über ein Formular im Backend des CMS eine bestimmte Meldung aufrufen.
Es geht aber schneller: Im Editor des CMS hat eine Meldung eine URL der Form https://cms.example.org/edit?id=<BID>. Wer jetzt im Browser die URL aufruft, in der der Wert für die BID eingesetzt ist, öffnet die Meldung direkt im Editor. Definiert man jetzt zusätzlich eine „Suchmaschine“, zum Beispiel mit dem Kurzbefehl cms, lässt sich ein bestimmter Artikel direkt von der Adresszeile aus mit dem Befehl cms <BID> ansteuern.
Dieses Verfahren funktioniert bei vielen Content-Management-Systemen und anderen Produktivsystemen, die Parameter via Adresszeile weitergeben. So können Sie zum Beispiel Tickets im Projektmanagement-Planer Jira direkt ansteuern oder bestimmte Repositories bei GitHub.
Bookmarklets
Mit dem Kurzbefehle-Trick kommen Sie schnell zu bestimmten Seiten. Mit Bookmarklets können Sie noch mehr machen, zum Beispiel innerhalb einer Seite navigieren, Inhalte oder ihre Darstellung verändern oder sogar die Funktion einer Website verändern. Das Schachtelwort „Bookmarklet“ bezeichnet kleine in JavaScript geschriebene Programme, die Sie als Bookmark abspeichern können.
Was ein Bookmarklet ausmacht, erschließt sich am besten, wenn Sie es direkt ausprobieren. Legen Sie in Ihrem Browser ein neues Lesezeichen an und geben Sie als URL ein:
javascript: void(window.open( 'https://www.web2pdfconvert.com#' + location.href))
Wenn Sie auf einer Webseite dieses Lesezeichen aufrufen, öffnet sich ein neues Fenster, in dem der Onlinedienst web2pdfconvert.com eine PDF-Datei von der Website herstellt. Auf eine ähnliche Weise lässt sich mit einem Google-Dienst auch ein QR-Code der URL generieren.
Das javascript:-Präfix macht dem Browser klar, dass ein JavaScript-Skript folgt. Ein solches Skript lässt sich wie ein Link in eine Homepage einbetten:
<a href="javascript: void(window.open( 'https://www.web2pdfconvert.com#' + location.href))">Web2PDF</a>
Ziehen Sie dieses oder andere Bookmarklets in die Lesezeichenleiste, können Sie sie jederzeit aufrufen. So bauen Sie gewissermaßen eine weitere Menüleiste, die den Browser ergänzt.
Grundsätzlich lässt sich alles realisieren, was JavaScript hergibt. Das JavaScript-Skript im Kasten unten zum Beispiel durchsucht die derzeit geöffnete Seite via Google.
Das Skript ist – wie die anderen – nur aus Gründen der besseren Lesbarkeit formatiert. Tatsächlich müssen Sie es ohne Einrückungen oder Returns in eine Zeile packen.
Viele Fertiglösungen
Bevor Sie anfangen, selber zu programmieren: Es gibt bereits viele Bookmarklets, und zwar nicht nur für solche relativ simplen Aufgaben, sondern auch für komplexere Anwendungen. Webentwickler etwa können sich mit Website Stack die auf der geöffneten Site verwendete Technik als Pop-up-Fenster anzeigen lassen (alle Bookmarklets unter ct.de/yczt). Insbesondere für das Testen der Barrierefreiheit von Websites gibt es viele Bookmarklets.
Mitunter lassen sich mit Bookmarklets Probleme mit Websites beheben. Wenn die besuchte Site zum Beispiel das Kontextmenü und die Möglichkeit deaktiviert hat, Text auszuwählen, können Sie das mit Bookmarklets (re)aktivieren.
Besonders eindrucksvoll sind Bookmarklets, die die Inhalte auf der aktuellen Webseite verändern. Das Bookmarklet „Sort Table“ zum Beispiel ergänzt HTML-Tabellen um eine Zeile, die über jeder Spalte zwei Links „a“ und „d“ erzeugt. Damit kann man die Inhalte in Abhängigkeit von den jeweiligen Spalteninhalten aufsteigend (ascending) beziehungsweise absteigend (descending) sortieren.
Bookmarklets sind fast so alt wie JavaScript. Daher findet man etliche uralte Sammlungen dieser praktischen Hilfsmittel. Aber nicht alles, was anno dunnemals einmal mit JavaScript funktioniert hat, funktioniert heute noch genauso. So müssen Sie bei alten Bookmarklet-Sammlungen davon ausgehen, dass einige nicht mehr funktionieren.
Aber auch bei den neueren Bookmarklets haben Sie keine hundertprozentige Garantie, dass immer alles so läuft wie erwartet. So lässt sich zum Beispiel mit viel CSS etwas bauen, was im Browser so aussieht wie eine HTML-Tabelle – tatsächlich aber keine ist. Das Bookmarklet Sort Table kann damit dann nichts anfangen und meldet: „This page doesn't contain any tables“.
Der Einzeiler-Editor
Zwei kleine Extras zum Abschluss: Beim folgenden Hack handelt es sich nicht um ein Bookmarklet. Er profitiert aber auf ganz ähnliche Weise davon, wie mächtig moderne Browser sind. Geben Sie
data:text/html, <html contenteditable>
in das Adressfeld Ihres Browsers ein, können Sie ihn als Editor benutzen. Die Zeile sagt dem Browser, dass er das Dokument als editierbares HTML-Element behandeln soll. Im Web finden sich massenhaft Abwandlungen dieses Tricks, die ihn per CSS aufhübschen.
Sollten Sie diesen Ad-hoc-Editor verwenden, müssen Sie aber daran denken, die Ergebnisse zu speichern. Der Browser speichert seine Inhalte nicht automatisch zwischen. Surfen Sie von dem Tab aus woanders hin oder laden Sie nur die Seite neu, sind Ihre Notizen verloren.
Mit dem Bookmarklet
javascript: document.body .contentEditable = 'true'; document.designMode = 'on'; void 0
erweitern Sie diesen Trick auf die aktuell geöffnete Seite: Editieren Sie nach Belieben die Texte und Bilder einer Webseite, ohne kompliziert mit den Entwicklerwerkzeugen herumfrickeln zu müssen. (jo@ct.de)
Bookmarklet-Sammlungen: ct.de/yczt