Das Handbuch mit den vollständigen Benutzerskripten

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:

1. Navigieren Sie zur Homepage
2. Geben Sie die Schlüsselwörter in die Search UserscriptsTexteingabe ein: Dies kann der Name der Zielwebsite, die gewünschte Funktion usw. sein. Lassen Sie uns beispielsweise nach einem Google-Benutzerskript suchen
3. Öffnen Sie beispielsweise die zu installierende Skriptseite Endless Google
4. Wenn die Beschreibung des Skripts den gesuchten Funktionen entspricht, installieren Sie das Skript, indem Sie auf die InstallSchaltfläche klicken
5. Bestätigen Sie die Installation mit einem Klick auf Install
6. Das Benutzerskript kann jetzt durch Öffnen oder erneutes Laden der Zielwebsite getestet werden

GreasyFork

Firefox mit Violentmonkey wird in den nächsten Schritten verwendet:

1. Navigieren Sie zur Seite "Skripte"
2. Geben Sie die Schlüsselwörter in die Search scriptsTexteingabe ein: Dies kann der Name der Zielwebsite, die gewünschte Funktion usw. sein. Lassen Sie uns beispielsweise nach einem Feedly-Benutzerskript suchen
3. Öffnen Sie beispielsweise die zu installierende Skriptseite Feedly filtering and sorting
4. Wenn die Beschreibung des Skripts den gesuchten Funktionen entspricht, installieren Sie das Skript, indem Sie auf die Install this scriptSchaltfläche klicken
5. Bestätigen Sie die Installation
6. 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

// @grant       GM_setValue

// @grant       GM_getValue

// @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);
  
  });