Erste Erfahrung mit Tampermonkey
Einführung
In diesem Blogpost möchte ich euch ein kleines, aber interessantes Tool namens Tampermonkey vorstellen.
Tampermonkey ermöglicht euch eigene Browser-Skripte zu erstellen und eröffnet somit eine Vielzahl an Möglichkeiten. So kann man z. B. einen automatischen Filter, der die Homepage nach Stichworten durchsucht und die Ergebnisse anzeigt, umsetzen oder einen Google Übersetzer, der einen über jede Homepage begleitet, in den Browser integriert.
Diese Skripte laufen jedoch nur lokal und nur in den Browsern, in denen sie installiert wurden.
Voraussetzungen
Da Tampermonkey für die Skripte die Sprache JavaScript verwendet, sollte man darin zumindest grundlegende Kenntnisse haben.
Und natürlich wird das Browserplugin selbst benötigt.
Installation von Tampermonkey
Die Installationsanweisung findet ihr auf der Homepage von Tampermonkey.
Je nach Browser kann sich die Installation etwas unterscheiden, jedoch sollte das Skript auf jedem Browser installiert werden können.
Beispiel Anwendung
Als Beispiel werden wir auf der exensio Homepage einen Button in das HTML rendern, der uns bei einem Klick die wesentlichen Informationen des neuesten Blogposts (Datum, Title und Name des Erstellers) anzeigt. Für die Darstellung der zusätzlichen Informationen nutzen wir das Framework Bootstrap und die darin enthaltene Popover Komponente. Bootstrap ist nur ein Beispiel für das Einbinden von externen Ressourcen - generell können alle möglichen externen Ressourcen eingebunden werden.
Erklärung der wesentlichen Code Fragmente
Zu Beginn werden mittels Annotationen verschiedene Aspekte definiert:
Mit @match definiert man die URL, bei der das Skript aktiviert werden soll.
Mittels @require können externe Bibliotheken eingebunden werden, um die
Funktionalität zu erweitern. JQuery wird hier unter anderem für das
Bootstrap Framework benötigt. Mit dem Attribut @required können nur
JavaScript Bibliotheken eingebunden werden.
Mittels @resource können beispielsweise externe CSS-Dateien eingebunden werden.
Hier im Beispiel wird die Bootstrap-CSS für das Styling des Popover benötigt.
Mit dem Attribut @resource können auch verschiedene andere Dateien eingebunden werden wie
Bilder, Html, xml etc.
Damit die Ressourcen auch geladen werden, benötigt Tampermonkey
GM_Klassen, die den CSS Dateien zugewiesen werden. Diese Zuweisung wird über @grant gesetzt.
@match https://exensio.de/home
@require http://code.jquery.com/jquery-3.4.1.min.js
@resource bootstrap_css ttps://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
@grant GM_getResourceText
@grant GM_addStyle
(function() {
'use strict';
// Laden der CSS von Bootstrap
const my_css = GM_getResourceText("bootstrap_css")
GM_addStyle(my_css)
....
})Selbsttest
Damit nun jeder dieses Beispiel selbst testen kann stellen wir das UserScript zum Download bereit.
Voraussetzung ist die Installation des Browserplugin wie oben beschrieben.
Sobald das Browserplugin installiert ist, müsst ihr auf die Übersicht des Plugins navigieren und dann auf den Reiter Hilfsmittel wechseln.
Hier kann nun das Skript hochgeladen werden. Nun müsst ihr die Seite neu laden. Unter dem Reiter „installierte UserScripte“, wurde das Skript hinzugefügt.
Jetzt könnt ihr auf die Homepage https://exensio.de/home navigieren und der „Klick mich“ Button sollte im Hauptmenü erscheinen.
Fazit
Das Tool ist sehr vielseitig in der Anwendung, zudem einfach zu bedienen und auch für JavaScript Anfänger leicht nutzbar.
Tampermonkey kann sowohl im privaten Umfeld einen Mehrwert bieten als auch im beruflichen Kontext Anwendung finden.