Anwenden von JavaScript: Benutzerskripte

Das Schreiben eines Userscript ist eine unterhaltsame Möglichkeit, Ihre JavaScript-Kenntnisse zu nutzen. Es führt Sie aus dem Editor in den Browser mit Echtzeit-Feedback und Validierung.

Was ist ein Benutzerskript?

Userscripts (auch bekannt als User Scripts, User Scripts oder .user.js) sind Open Source-lizenzierte Add-Ons für Webbrowser, die Webseiten beim Laden ändern. Sie geben Benutzern die Möglichkeit, Websites dazu zu bringen, das zu tun, was sie wollen, und nicht das, was ursprünglich beabsichtigt war.

Benutzerskripte sind in JavaScript geschrieben und ermöglichen es Ihnen, das Erscheinungsbild einer Webseite in Ihrem Browser zu optimieren. Die Skripte wirken sich nur auf Ihren Browser aus, nicht auf die eigentliche Webseite.

Eine kurze Warnung

Sie sollten sich der Datenschutzprobleme bei der Verwendung von Benutzerskripten bewusst sein und diese nicht aus Quellen installieren, denen Sie nicht vertrauen. Userscripts können Aktionen in Ihrem Namen ausführen und möglicherweise auf alle Informationen auf einer Website zugreifen, auf die Sie Zugriff haben oder die Sie auf einer Website eingeben. Sie dürfen häufig Funktionen ausführen, die Skripte auf normalen Websites nicht ausführen können, z. B. das Speichern von Informationen auf Ihrem Computer und deren Weitergabe zwischen Websites. Schlecht geschriebene Benutzer-Skripte können möglicherweise auch von böswilligen Websites ausgenutzt werden.

Erklärungen aus //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

Warum Benutzerskripte?

Free Code Camp bietet viele großartige Projekte in der realen Welt, die Ihre Fähigkeiten und Ihr Portfolio bereichern. Ich persönlich benutze gerne die Fähigkeiten, die ich in JavaScript, jQuery und CSS gelernt habe, um mein tägliches Surfen zu ändern.

Einige Benutzerskripte waren äußerst beliebt und wurden zu Browsererweiterungen verarbeitet. Ein Beispiel hierfür ist die Reddit Enhancement Suite unter //redditenhancementsuite.com/.

Auch Sie können Ihr Benutzerskript als Basis für eine Browsererweiterung verwenden!

Beginnen

Benutzerskripte werden von Browsererweiterungen selbst ausgeführt. Grease Monkey (FireFox) war das Pionier-Add-On, mit dem Benutzer ihre Browser-Erfahrung anpassen können. Installieren Sie das entsprechende Plug-In für Ihren Browser.

Für FireFox: Monkey einfetten

Fettaffe

Über den Entwicklungskanal können Sie eine experimentelle neue Version dieses Add-Ons testen, bevor es für die allgemeine Version addons.mozilla.org veröffentlicht wird

Für Chrome: Tamper Monkey

Manipulationsschlüssel

Der beliebteste Userscript-Manager für Blink-basierte Browser chrome.google.com

Für dieses Tutorial werde ich Chrome mit Tamper Monkey verwenden.

Nach der Installation von Grease Monkey oder Tamper Monkey sollten keine signifikanten Unterschiede im Prozess bestehen.

Nur für den Fall, hier ist ein kurzer Link zur Installation von Grease Monkey (sowie ein paar Dinge damit.)

Greasemonkey Tutorial für Anfänger

Im Greasemonkey-Tutorial habe ich beschrieben, wie man Greasemonkey-Benutzerskripte schreibt. Nach diesem Tutorial können Sie… hayageek.com

das Projekt

Wir werden die Homepage auf Hacker News //news.ycombinator.com geringfügig ändern.

Wir werden jQuery verwenden, um die Hintergrundfarben alternierender Links geringfügig zu ändern, um die Lesbarkeit zu verbessern.

Starten Sie ein neues Skript

Klicken Sie oben rechts auf das Tamper Monkey-Symbol und wählen Sie im Dialogfeld die Option " Neues Skript hinzufügen".

Sie sollten zu einer neuen Registerkarte weitergeleitet werden, die so aussieht

Füllen Sie die Informationen aus

Nach dem Starten eines neuen Skripts möchten wir zunächst die Skriptinformationen oben eingeben. Füllen Sie die folgenden Attribute aus, wie immer Sie möchten

  • Name
  • Beschreibung
  • Autor

Ich werde dir auch zeigen, wie meine aussieht.

Fügen Sie jQuery hinzu

kurz vor der Linie

// ==/UserScript==

Fügen Sie eine Zeile mit dem Text von hinzu

// @require //code.jquery.com/jquery-latest.js

Stellen Sie sich dies als Importieren / Erfordernis von jQuery für ein JS-Projekt vor.

hier ist mein

Hallo script.js!

Mal sehen, ob unser Skript auf //news.ycombinator.com geladen wird und jQuery einsatzbereit ist.

Fügen Sie nach der Zeile // Ihr Code hier den folgenden Code hinzu

$(document).ready(function() { alert('WINNING');});

und geben Sie Strg + s ein oder klicken Sie links auf die Schaltfläche Speichern

Sie werden möglicherweise auf die folgende Seite weitergeleitet. Wenn nicht, klicken Sie auf die Registerkarte Installierte Benutzerskripte.

Genial! Unser Skript wird in Tamper Monkey geladen. Der grüne Punkt links bedeutet, dass das Skript aktiviert ist. Sie können sogar das Hacker News-Logo im Screenshot sehen.

Führen Sie das Skript aus

Besuchen Sie Hacker News in Ihrem Browser und wenn Sie mitgemacht haben und alles gut gelaufen ist, sollten Sie sehen

Starten Sie den Debugger

Es ist Zeit, die Post-Elemente zu finden, die wir ändern möchten. Geben Sie Strg + Umschalt + i ein , um den Browser-Debugger aufzurufen.

Jetzt wollen wir ein Element auswählen, um es genauer zu betrachten. Durch Klicken auf das blaue Quadrat mit der Maus oben links im Debugger wird die Elementauswahl geöffnet. Sie können auch den Tastenbefehl Strg + Umschalt + c verwenden .

Wie Sie sehen können, habe ich ein Element namens td.title gefunden . Nachdem Sie darauf geklickt haben, wird das Element auf der Registerkarte Elemente des Debuggers hervorgehoben (siehe auch oben).

Markieren Sie das Element über unserem Titel

wählt dies im Browser aus

Bingo. Es sieht so aus, als hätten wir das gewünschte Element gefunden. Hacker News hat ein sauberes HTML-Layout, so dass es nicht allzu schwierig war, unser Zielelement zu finden.

Wenn Sie sich an Ihre jQuery erinnern, müssen Sie nur den Selektor verwenden, um alle Post-Elemente zu finden

$('.athing')

Mach etwas mit unserem Post-Element

Nachdem wir nun die Möglichkeit haben, unser Element mit jQuery auszuwählen, können wir unser Element ändern. Lassen Sie uns die Hintergrundfarbe der Beiträge mit dem folgenden Code ändern. Ändern Sie den Code $ (document) .ready () in diesen

$(document).ready(function() { $('.athing').css('background-color', '#DDD');});

Hinweis: #DDD ist eine Abkürzung für #DDDDDD.

Schauen wir uns die resultierende Seite an. Denken Sie daran, Ihr Userscript zu speichern und dann die HackerNews-Seite zu aktualisieren. Möglicherweise müssen Sie Ihren Debugger schließen, um die gesamte Seite anzuzeigen.

Sind wir schon fertig? Nicht ganz. Wir haben alle unsere Post-Elemente geändert, anstatt sie zu wechseln. Es mag wie der von uns gewünschte Zebra-Effekt aussehen, aber das liegt nur daran, dass das Score / Subinfo-Element nicht beeinflusst wird. Wenn Sie dazu neigen, auch dieses Element zu ändern, können Sie Ihre Methode gerne in den Kommentaren veröffentlichen. Es liegt außerhalb des Geltungsbereichs dieses Handbuchs.

Ach nein?! Was machen wir? Ich möchte keine Loops schreiben!

jQuery zur Rettung

Hab keine Angst, Camperkollegen. jQuery ist wieder zur Rettung gekommen.

jQuery bietet spezielle Selektoren nur für einen solchen Anlass.

Jetzt einführen : ungerade

: ungerader Selektor

Beschreibung: Wählt ungerade Elemente mit Nullindex aus. Siehe auch gerade. Beachten Sie insbesondere, dass die 0-basierte Indizierung… api.jquery.com bedeutet

Alles, was wir tun müssen, ist hinzuzufügen : ungerade bis zum Ende unseres Selektors, damit die Linie so aussieht. Hinweis: Ich habe auch die Farbe in #EEE geändert. besser zu mischen.

 $(‘.athing:odd’).css(‘background-color’, ‘#EEE’);

Speichern Sie Ihr Skript und aktualisieren Sie HackerNews. Sie sollten dieses Endprodukt sehen

Einpacken

Hier hast du es. Jetzt haben Sie eine weitere kreative Möglichkeit, Ihre angehenden Codierungszauberer zu entfesseln! Mithilfe von Benutzerskripten können Sie die Funktionalität oder das Erscheinungsbild einer Website optimieren, eine Funktion hinzufügen, die Sie sich immer gewünscht haben, und vieles mehr.

Hausaufgaben

Schreiben Sie Ihr eigenes Benutzerskript, um einer häufig verwendeten Website etwas hinzuzufügen. Ob es sich um ein Styling oder eine Schaltfläche handelt, mit der die Sichtbarkeit bestimmter Elemente umgeschaltet werden kann, liegt ganz bei Ihnen. Geben Sie Ihr Produkt in den Kommentaren hier an!

Geh hinaus und erobere Camper!

Mehr lesen

Manipulationsschlüssel

Tampermonkey ist eine kostenlose Browser-Erweiterung und der beliebteste Userscript-Manager für Blink-basierte Browser wie Chrome… tampermonkey.net GreaseSpot Wiki

GreaseSpot ist eine Community-Dokumentation für Benutzerskripte mit Greasemonkey. wiki.greasespot.net Greasy Fork - sichere und nützliche Benutzerskripte

Mit Benutzerskripten haben Sie die Kontrolle über Ihre Browser-Erfahrung. Nach der Installation erstellen sie automatisch die Websites, die Sie… greasyfork.org Erste Schritte: Erstellen einer Chrome-Erweiterung

Mit Erweiterungen können Sie Chrome Funktionen hinzufügen, ohne tief in nativen Code einzutauchen. Sie können neue erstellen… developer.chrome.com So entwickeln Sie eine Firefox-Erweiterung

Dieser Blog-Beitrag ist sehr veraltet. Wenn Sie eine neuere Anleitung zur Entwicklung von Erweiterungen wünschen, lesen Sie bitte das neue How to… blog.mozilla.org