Bild von Florian Koch
Software Engineer, Frontend Experte

Updatefähige und wartbare Bookmarklets


Bookmarklets sind eine feine Sache:
Ein minifizierter JavaScript Code kann in die Lesezeichenleiste eingebunden und auf Knopfdruck auf beliebigen Websites ausgeführt werden. Dies kann für alles Mögliche benutzt werden, beispielsweise für Passwort-Generatoren, Auflistung von Daten oder sogar komplette Redesigns der Seite.

Ein recht bekanntes Beispiel ist Firebug Lite, welches eine Lite-Version des bekannten Dev-Tools als Bookmarklet einbindet. Hier bei netzkern kam das Thema auf, da bei einem internen Mitarbeitertool eine große webbasierte Tabelle nach Namen gefiltert werden sollte. Dafür ist ein Bookmarklet ideal, sofern die Funktionalität nicht in der Seite selbst vorhanden ist.

Um so ein Bookmarklet selbst zu erstellen, kann man der Einfachheit halber auf einen Generator zurückgreifen. Eine Google Suche spuckt z.B. diesen hier aus: http://mrcoles.com/bookmarklet/ 

Das Tool generiert einen Link, den man per Drag’n’drop einfach in die Lesezeichenleiste ziehen kann. Klickt man dann auf das neue Lesezeichen, wird das eingebettete JavaScript ausgeführt.

Das Problem an diesen Bookmarklets ist jedoch, dass der eingebundene Code nicht ohne weiteres wieder zurückkodiert werden kann. Einmal minifiziert ist er ein nahezu unlesbarer Einzeiler. Weiterhin ist ein Updaten des Bookmarklets problematisch, sobald es von mehr als einer Person genutzt wird: Jede dieser Personen müsste das aktualisierte Bookmarklet erneut in die Lesezeichenleiste ziehen, um die neue Version zu bekommen.

Beide Probleme lassen sich lösen, indem das Bookmarklet selbst nichts macht, außer ein externes Script auszuführen, welches den eigentlichen Code enthält. Dieses könnte sich auf einem öffentlichen Server befinden, oder auch im Intranet, um zu verhindern, dass der Code „nach außen“ gelangt.

Um das ganze mal zu demonstrieren, habe ich im Default Web des IIS, welches unter http://localhost erreichbar ist, eine test.js mit folgendem Inhalt abgelegt:
 
Diese test.js wird dann von meinem Bookmarklet aufgerufen, dazu nutze ich folgende Einstellungen in dem Generator:
 
Wenn ich nun den Link anklicke, oder ihn in die Lesezeichenleiste ziehe und dort anklicke, so wird mein Code aus der test.js ausgeführt:

 

Das ist natürlich nur ein sehr simples Minimalbeispiel, doch es zeigt, dass man per Bookmarklet Code von einem Server ziehen kann.
Die Start-Funktion kann man nach Belieben erweitern und so beispielsweise zentrale Funktionalität für alle Mitarbeiter verfügbar machen.
Vor allem beim Testen ist zu beachten, dass die Browser solche Code-Aufrufe cachen, das heißt nach einer Änderung am Code sollte der Cache geleert werden. 

Würde mich freuen, wenn das jemand nützlich findet,
happy coding!

Kommentare
Es wurden noch keine Kommentare zu diesem Eintrag geschrieben.
Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar