Das Handbuch mit den vollständigen Benutzerskripten
Einführung
Haben Sie sich jemals gefragt, ob Sie die nächste Seite laden können, wenn Sie das Ende einer Webseite erreichen? Oder fügen Sie möglicherweise Quicklinks und Informationen von externen Seiten hinzu (z. B. Faulen Tomaten hinzufügen und auf die IMDb-Seite eines Films verlinken)?
Benutzerskripte können all diese Fragen beantworten.
Ein Benutzerskript besteht aus einer Reihe von JavaScript-Code und Metadaten, die beim Laden einer Webseite ausgeführt werden:
- Der Code ist eine Folge von Anweisungen, die dem Browser mitteilen, wie die Seite geändert werden soll.
- Die Metadaten sind Informationen zum Benutzerskript, z. B. die Webseiten, auf denen sie ausgeführt werden sollen, die benötigten Ressourcen und Bibliotheken und vieles mehr.
Zum Hinzufügen, Aktualisieren und Verwalten von Benutzerskripten muss ein Benutzerskript-Manager installiert sein.
Technisch gesehen ist ein Benutzerskript nur eine Textdatei, die mit endet .user.js
. Auf diese Weise können Userscript-Manager Benutzerskripte erkennen und installieren, wenn eine Datei im Browser geöffnet wird.
Installieren eines Userscript Managers
Nach meiner Erfahrung eignet sich Tampermonkey am besten für Chromium-basierte Browser wie Google Chrome und Opera.
Violentmonkey ist derzeit der am besten unterstützte UserScript-Manager für Firefox.
Tampermonkey
Mit mehr als 10 Millionen Benutzern ist Tampermonkey der führende UserScript-Manager. Es ist auch in allen wichtigen Navigatoren verfügbar.
Hier sind die direkten Seiten, auf denen Sie die Tampermonkey-Erweiterung installieren können:
- Google Chrome: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkebhmkfjojejmpbldmpobfkfo?hl=de
- Opera: https://addons.opera.com/de/extensions/details/tampermonkey-beta/
- Microsoft Edge: https://www.microsoft.com/store/apps/9NBLGGH5162S
- Safari: https://safari-extensions.apple.com/details/?id=net.tampermonkey.safari-G3XV72R5TC
Ausführlichere Anweisungen zur Installation von Tampermonkey und eine umfassende Funktionsübersicht finden Sie unter den folgenden Links: Google Chrome , Opera , Microsoft Edge , Safari .
Gewalttätiger Affe
Violentmonkey ist die Hauptalternative zu Tampermonkey und vollständig Open Source . Es ist in Firefox, Chrome, Opera und Maxthon verfügbar.
Auf der folgenden Seite werden die Download-Links für die verschiedenen unterstützten Browser aufgelistet: https://violentmonkey.github.io/get-it/
Fettaffe
Greasemonkey ist der ursprüngliche UserScript-Manager.
Nach Firefox 57 und ab der Version Greasemonkey 4 wurde die API der Erweiterung so geändert, dass sie mit der Browser-Erweiterungs-API kompatibel ist. Skripts, die mit der älteren GM_
synchronen API geschrieben wurden, werden nicht mehr unterstützt (weitere Erläuterungen finden Sie in diesem
Blogbeitrag ).
Ich rate momentan davon ab, es zu verwenden, da die meisten Benutzerskripte mit der älteren API geschrieben wurden und die anderen Benutzerskript-Manager die neue asynchrone API nicht unterstützen.
Sie müssen es nur installieren, wenn ein Benutzerskript, das Sie hinzufügen möchten, speziell unter Verwendung der neuen GM.
asynchronen API geschrieben wurde und keine Polyfüllung zur Unterstützung der älteren API enthält (sehr selten).
Suchen nach Benutzerskripten
Die meisten Benutzerskripte werden entweder auf openuserjs.org oder greasyfork.org gehostet.
OpenUserJS
Das folgende Beispiel zeigt, wie Sie in OpenUserJS nach einem Benutzerskript suchen und es mit Tampermonkey in Google Chrome installieren:
- Navigieren Sie zur Homepage
- Geben Sie die Schlüsselwörter in die
Search Userscripts
Texteingabe ein: Dies kann der Name der Zielwebsite, die gewünschte Funktion usw. sein. Lassen Sie uns beispielsweise nach einem Google-Benutzerskript suchen - Öffnen Sie beispielsweise die zu installierende Skriptseite
Endless Google
- Wenn die Beschreibung des Skripts den gesuchten Funktionen entspricht, installieren Sie das Skript, indem Sie auf die
Install
Schaltfläche klicken - Bestätigen Sie die Installation mit einem Klick auf
Install
- Das Benutzerskript kann jetzt durch Öffnen oder erneutes Laden der Zielwebsite getestet werden
GreasyFork
Firefox mit Violentmonkey wird in den nächsten Schritten verwendet:
- Navigieren Sie zur Seite "Skripte"
- Geben Sie die Schlüsselwörter in die
Search scripts
Texteingabe ein: Dies kann der Name der Zielwebsite, die gewünschte Funktion usw. sein. Lassen Sie uns beispielsweise nach einem Feedly-Benutzerskript suchen - Öffnen Sie beispielsweise die zu installierende Skriptseite
Feedly filtering and sorting
- Wenn die Beschreibung des Skripts den gesuchten Funktionen entspricht, installieren Sie das Skript, indem Sie auf die
Install this script
Schaltfläche klicken - Bestätigen Sie die Installation
- Das Benutzerskript kann jetzt durch Öffnen oder erneutes Laden der Zielwebsite getestet werden
Alternativen
Userscripts.org war früher das führende User-Script-Repository. Die Website wurde jedoch 2014 geschlossen und eine Spiegel-Webseite wurde gestartet, auf der alle ursprünglichen Benutzerskripte gehostet wurden: userscripts-mirror.org
Es gibt einige Benutzerskripte, die auf persönlichen oder github-Seiten gehostet werden. In diesem Fall kann eine allgemeine Suchmaschine wie Google verwendet werden, um nach ihnen zu suchen.
Benutzerskripte verwenden
Ein Benutzerskript kann nach der Installation auf verschiedene Arten konfiguriert und bearbeitet werden:
- Einige Benutzerskripte zeigen auf ihrer Beschreibungs- oder Dokumentationsseite an, dass sie einem bestimmten Teil der Seite eine Schaltfläche hinzufügen, um ein Einstellungsmenü zu öffnen oder eine andere Aktion auszuführen
- Sie können auch Befehle und / oder Verknüpfungen im UserScript-Manager registrieren, um das Einstellungsmenü zu öffnen oder eine andere Aktion auf der aktuellen Seite auszuführen
- Andere benötigen keine Konfiguration und funktionieren wie sie sind
Der Userscript-Manager kann auch zum Konfigurieren von Sicherheits-, Speicher- und anderen skriptspezifischen Einstellungen verwendet werden, z. B. den Seiten, auf denen das Skript ausgeführt werden soll, wie im folgenden Abschnitt dargestellt.
Schließt ein und schließt aus
Die Includes / Matches sind die Webseiten, auf denen das Skript ausgeführt wird (@ include unterstützt reguläre Ausdrücke und @ match ist sicherer). Die Ausschlüsse sind die Seiten, auf denen das Skript nicht ausgeführt werden sollte.
Obwohl das Benutzerskript bereits Einschlüsse und Ausschlüsse in den Metadaten definiert, können diese mit dem Benutzerskript-Manager überschrieben werden.
Tampermonkey
- Öffnen Sie das Dashboard, indem Sie auf die Schaltfläche Tampermonkey klicken und auswählen
Dashboard
- Klicken Sie auf das Benutzerskript, das Sie konfigurieren möchten
- Wechseln Sie zur
Settings
Registerkarte. Sie können jetzt zusätzliche Einschlüsse, Übereinstimmungen und Ausschlüsse hinzufügen. Sie können auch die ursprünglichen Einschlüsse und Ausschlüsse deaktivieren
Gewalttätiger Affe
- Öffnen Sie das Dashboard, indem Sie auf die Schaltfläche Violentmonkey klicken und auswählen
Open Dashboard
- Klicken Sie auf die Schaltfläche Bearbeiten neben dem Benutzerskript, das Sie konfigurieren möchten
- Wechseln Sie zur
Settings
Registerkarte. Sie können jetzt zusätzliche Einschlüsse, Übereinstimmungen und Ausschlüsse hinzufügen. Sie können auch die ursprünglichen Einschlüsse und Ausschlüsse deaktivieren
Beispiele für Benutzerskripte
Hier ist eine Liste der in diesem Handbuch vorgestellten Benutzer-Skripte, die ich persönlich sehr nützlich finde:
- Endloses Google : Laden Sie mehr Ergebnisse automatisch und hängen Sie sie an das Ende der aktuellen Google-Ergebnisseite an
- Rottentomaten-Messgerät anzeigen : Zeigen Sie den Faulen Tomaten-Score auf imdb.com und anderen Websites an
- Feedly-Filterung und -Sortierung : Verbessern Sie die Feedly-Website mit erweiterter Keyword-Filterung und Einschränkung, Sortierung, Dublettenprüfung, Farbregeln und vielem mehr
- YouTube + oder Iridium : Bietet mehrere Verbesserungen für YouTube. Mein Favorit ist die immer sichtbare Player-Funktion, die den Player trennt und ihn beweglich macht, wenn Sie nach unten scrollen, um die Kommentare zu lesen
- Anti-Adblocker-Killer | Reek : Wenn Sie einen Werbeblocker verwenden, können Sie diese auf einigen Websites erst wieder verwenden, wenn Sie ihn deaktivieren. Dieses Skript verhindert, dass diese Websites erkennen, dass Sie einen Adblocker verwenden
- WAR Links Checker Premium : Überprüft automatisch Links von Hunderten von Datei-Hosts wie Google Drive und Rapidgator und zeigt die Dateigröße in einem Popup an, wenn Sie den Mauszeiger über die Links halten (sofern möglich).
Schreiben Sie Ihre eigenen Skripte
Voraussetzungen
Grundlegende HTML-Kenntnisse sind erforderlich. Erste Schritte mit HTML .
Grundlegende CSS-Kenntnisse sind ebenfalls erforderlich, insbesondere Selektoren. Lassen Sie sich bei CSS-Selektoren vorstellen .
Wenn Sie mit JavaScript nicht vertraut sind, empfehle ich, die folgenden Anleitungen für die ersten Schritte zu lesen .
Wenn Sie bereits mit JavaScript vertraut waren und eine Auffrischung benötigen oder nur ein zusammengefasstes Lernprogramm benötigen, um die Sprache schnell zu erlernen, finden Sie hier eine erneute Einführung in JavaScript
Sie können auch den Kapiteln dieses JavaScript-Handbuchs für Fortgeschrittene folgen und diese ausführliche JavaScript-Referenz lesen .
Ihr erstes Benutzerskript
Wie bereits erwähnt, besteht ein Benutzerskript aus einem Satz von JavaScript-Code und Metadaten, die technisch gesehen nur JavaScript-Kommentare sind.
Klicken Sie im UserScript Manager-Dashboard auf die +
Schaltfläche, um ein neues UserScript zu erstellen.
Ändern Sie den Namen, die Beschreibung und das Übereinstimmungsmuster, um eine bestimmte Webseite als Ziel festzulegen. Ersetzen // Your code here...
durchalert('Hello World !');
Navigieren Sie jetzt zu Ihrer Zielwebsite oder aktualisieren Sie sie, falls sie bereits geöffnet ist. Es sollte eine Warnmeldung angezeigt werdenHello World
Das ist es!
Sie können jetzt mit der GM_*
API experimentieren , um beispielsweise Daten zu speichern, oder Codebibliotheken von Drittanbietern (z. B. JQuery) hinzufügen, um weniger Code zu schreiben oder vorhandenen Code wiederzuverwenden.
Verwenden der API und Hinzufügen externer Bibliotheken
Wenn Sie die verwenden mögen GM_*
API, müssen Sie einen deklarieren - @grant
Header in dem von dem API - Funktionsnamen
(wie gefolgt von Metadaten GM_getValue
, GM_setValue
etc.)
// @grant GM_setValue
// @grant GM_getValue
Eine User-Script-Dokumentation, die die verfügbaren Header (Metadaten) und die API ( GM_*
) beschreibt, finden Sie auf der folgenden Seite .
Eine alternative Metadatendokumentation finden Sie hier .
Bibliotheken von Drittanbietern können hinzugefügt werden, indem der @require
Header gefolgt von der Bibliotheks-URL definiert wird. Zum Beispiel:
// @require https://code.jquery.com/jquery-3.2.1.min.js
User Script-Idiome und Code-Schnipsel
- Fragen Sie ein Seitenelement ab und entfernen Sie es:
document.querySelector("#element_id").remove() ;
- Speichern Sie ein Objekt:
GM_setValue("MY_OBJECT_KEY", JSON.stringify(myObject) );
- Objekt abrufen:
var myObject = JSON.parse(GM_getValue("MY_OBJECT_KEY" , "{}")) ;
- Ersetzen Sie die aktuelle URL und leiten Sie die Seite weiter:
var link = document.URL.replace("domain.fr", "domain.com"); window.location.href=link;
- Fügen Sie eine Schaltfläche hinzu, um eine Funktion auf der Seite auszuführen:
var btn = document.createElement("button"); btn.innerHTML = "My button"; btn.onclick = () => { alert("My button clicked !"); return false; }; document.querySelector("btn_predecessor_selector").after(btn);
- Hänge einen Stil an die Seite an:
var css = "h1 { background: red; }" var style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode(css)); document.head.appendChild(style);
- Externe Seite abrufen und analysieren:
fetch("http://example.com/path-name") .then(response => response.text()) .then(text => { var parser = new DOMParser(); var htmlDocument = parser.parseFromString(text, "text/html"); var content = htmlDocument.documentElement.querySelector("element_selector"); alert("My fetched element content: " + content.textContent); });
Comments