So machen Sie Inspect-Elementänderungen mit Tampermonkey dauerhaft in Ihrem Browser

Die Funktion „Element prüfen“ in Ihrem Webbrowser ist ein Entwicklertool, mit dem Sie die Front-End-Aspekte einer Website, einschließlich HTML, CSS und JavaScript, ändern und vorübergehende Änderungen vornehmen können. Mit Inspect Element können Sie noch viel mehr tun. Nach einer Aktualisierung gehen jedoch alle Änderungen verloren.

Manchmal möchten Sie die Änderungen jedoch möglicherweise über einen längeren Zeitraum beibehalten oder zusätzliche Funktionen hinzufügen, um das Benutzererlebnis zu verbessern. Eine Möglichkeit, Inspect Element-Änderungen dauerhaft zu machen, ist die Verwendung der Tampermonkey-Erweiterung. Sie können damit benutzerdefinierte Skripts zu Webseiten hinzufügen und die Änderungen dauerhaft auf Ihrem lokalen Computer vornehmen.

Sehen wir uns an, wie Sie Tampermonkey verwenden, um die Änderungen des Inspektionselements in Ihrem lokalen Browser dauerhaft zu machen.

Was ist Tampermonkey und wie kann man es installieren?

Tampermonkey, ein Userscript-Manager, ist eine beliebte Browsererweiterung, die für alle gängigen Webbrowser verfügbar ist, einschließlich Chrome, Edge, Opera Next und Firefox. Sie können damit benutzerdefinierte und vorhandene Benutzerskripte erstellen und ausführen, um Webseiten zu ändern, um sie zu reparieren oder zu verbessern.

Es verfügt außerdem über eine Benutzerskriptbibliothek, die von anderen Tampermonkey-Benutzern erstellt wurde. Sie können beispielsweise das Local YouTube Downloader-Benutzerskript verwenden, um Laden Sie YouTube-Videos mit Tampermonkey herunter oder Sehen Sie sich markierte YouTube-Videos an, ohne sich anzumelden.

Die Erweiterung führt die gespeicherten Benutzerskripte aus, sobald die angegebene Webseite geladen wird, sodass die beabsichtigten Änderungen dauerhaft erscheinen.

Bevor wir mit dem Schreiben eines Skripts beginnen, müssen Sie Tampermonkey installieren. Beginnen wir also mit der Installation der Erweiterung:

1. Gehe zum Offizielle Seite von Tampermonkey. Es erkennt Ihren Webbrowser automatisch. Wenn nicht, klicken Sie je nach verwendetem Browser auf eine beliebige Registerkarte in Chrome, Microsoft Edge, Firefox, Safari und Opera.
2. Im Herunterladen Abschnitt, klicken Sie auf Im Store erhältlich. Sie werden zum Webshop Ihres Browsers weitergeleitet.
3. Klicke auf Installieren um die Erweiterung zu Ihrem Browser hinzuzufügen. Befolgen Sie die Anweisungen auf dem Bildschirm, um die Installation abzuschließen.

Wenn Ihr Browser nicht aufgeführt ist, Sie aber einen Chromium-Browser verwenden, sollten Sie diese Erweiterung über installieren können Chrome Store.

Nach der Installation können Sie mit dem Schreiben benutzerdefinierter Benutzerskripte mithilfe von JavaScript beginnen, um die beabsichtigten Änderungen an jeder Website vorzunehmen. Selbstverständlich benötigen Sie grundlegende Kenntnisse in HTML, CSS und JavaScript, um das Userscript zu schreiben und Änderungen mit Tampermonkey vorzunehmen.

Um die Fähigkeiten von Tampermonkey zu demonstrieren, schreiben wir ein Skript, um eine WhatsApp-Teilen-Schaltfläche hinzuzufügen, um Artikellinks mit Ihren WhatsApp-Kontakten zu teilen.

Was Sie vor Änderungen an Website-Elementen beachten sollten

Wenn Sie Änderungen an einer Website vornehmen, ist es wichtig, deren Richtlinien zur Verwendung von JavaScripts von Drittanbietern zu respektieren. Versuchen Sie nicht, Benutzerskripte willkürlich auf einer Website auszuführen, insbesondere wenn Sie mit sensiblen Daten arbeiten.

Während Sie mit Tampermonkey das Erscheinungsbild einer Website ändern und Funktionen hinzufügen können, sind alle Änderungen nur lokal in Ihrem Browser sichtbar und haben keinen Einfluss auf die Quelle.

Erste Schritte mit Tampermonkey

Sobald Sie die Änderungen geplant haben, die Sie an einer Webseite vornehmen möchten, können Sie mit dem Schreiben Ihres Skripts beginnen. Neue Benutzerskripte können über die Symbolleiste oder das Tampermonkey-Dashboard erstellt werden.

Um ein neues Skript zu erstellen, klicken Sie auf Erweiterungen Symbol in der Browser-Symbolleiste und wählen Sie Tampermonkey. Als nächstes wählen Sie aus Erstellen Sie ein neues Skript. Dadurch wird ein Skripteditor im Tampermonkey-Dashboard geöffnet.

Der Standard-Header oder die Metadatenkommentare von Tampermonkey sehen folgendermaßen aus:

// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://example.com/*
// @grantnone
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();

Diese Metadatenkommentare enthalten wichtige Informationen über den Namen, den beabsichtigten Zweck und die Berechtigungen des Benutzerskripts und teilen Tampermonkey mit, wann das Skript ausgeführt werden soll.

In diesem Leitfaden konzentrieren wir uns auf @übereinstimmen Direktive, auch Metadatendatei genannt. Tampermonkey verwendet diese Anweisung, um sicherzustellen, dass das Userscript nur auf eine bestimmte Website oder Webseiten angewendet wird. In diesem Fall wird das folgende Benutzerskript nur auf example.com (ersetzen Sie die Website-URL gemäß Ihren Anforderungen) und allen seinen Seiten ausgeführt.

Schreiben eines Userscripts zum Hinzufügen einer WhatsApp-Share-Schaltfläche

Am Ende jedes MakeUseOf-Artikels finden Sie ein Teilen-Widget für verschiedene Social-Media-Plattformen außer WhatsApp. Während Sie die URL kopieren und einfügen können, ist eine WhatsApp-Teilen-Schaltfläche nützlich, wenn Sie häufig Artikel in Ihrer WhatsApp-Gruppe teilen.

Sie können in Tampermonkey ein Benutzerskript erstellen, um am Ende des Artikels einen WhatsApp-Teilen-Button hinzuzufügen. Wir integrieren die Schaltfläche in das bestehende Teilen-Widget, sodass Sie die Webseiten-URL mit Ihren WhatsApp-Kontakten teilen können.

Beginnen wir mit der Erstellung einer einfachen WhatsApp-Share-Schaltfläche.

//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';

Nachdem wir nun über einen einfachen WhatsApp-Teilen-Button verfügen, fügen wir ihm etwas Stil hinzu. Dadurch erhält die Schaltfläche ihre Hintergrund- und Textfarbe, den Rahmen, den Abstand und den Cursorstil. Mit ein wenig Bastelei können Sie die Schaltflächeneigenschaften ändern, um das Erscheinungsbild zu optimieren.

//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';

Wenn der Knopf bereit ist, ist es Zeit, ihn zu testen. Aber wo platzieren Sie es? Als gängige Praxis wird der Teilen-Button häufig am Ende von Artikeln platziert.

In diesem Fall verfügen wir jedoch bereits über ein Freigabe-Widget am Ende jedes Artikels. Daher ist es ideal, diesen Teilen-Button zu einem Teil des Widgets zu machen.

Dazu untersuchen wir das vorhandene Freigabe-Widget, um den übergeordneten Container zu finden, der die Freigabeelemente enthält, um ihn im Userscript zu finden. Drücken Sie auf der Webseite Strg + Umschalt + C, um „Element prüfen“ zu öffnen. Wählen Sie als Nächstes das Freigabe-Widget-Element auf der Seite aus, um es zu überprüfen.

Sie werden sehen, dass es ein ist Element mit dem Klassennamen „Unten teilen”. Sie können dieses Element mit dem auswählen querySelector Methode in Ihrem Benutzerskript.

const sharingDiv = document.querySelector ('div.sharing.bottom');

Nachdem wir das Element ausgewählt haben, fügen wir die Schaltfläche „Teilen“ als untergeordnetes Element ein:

if (sharingDiv) {
 sharingDiv.appendChild(Whatsapp_btn);
}

Drücken Sie Strg + S um das Skript zu speichern. Wenn Sie die Seite neu laden, sehen Sie eine Schaltfläche zum Teilen, die in das vorhandene Freigabe-Widget eingefügt ist. Aber ein Klick darauf bringt nichts.

Damit die Schaltfläche funktioniert, erstellen wir eine Funktion zum Generieren einer WhatsApp-Freigabe-URL basierend auf der URL der aktuellen Seite. Sie können location.href verwenden, um die Seiten-URL zurückzugeben.

functiongenerateWALink() {
 const pageURL = encodeURIComponent(window.location.href);
 return`https://api.whatsapp.com/send? text=${pageURL}`;
}

Als Nächstes fügen wir der Schaltfläche einen Ereignis-Listener hinzu. Wenn Sie darauf klicken, öffnet der Browser einen neuen Tab mit einem WhatsApp-Freigabelink, über den Sie eine Nachricht verfassen können.

Whatsapp_btn.addEventListener('click', () => {
 const whatsappURL = generateWALink();
 window.open(whatsappURL, '_blank');
});

Speichern Sie das Userscript und führen Sie es aus

Sobald Sie das Benutzerskript bereit haben, drücken Sie Strg + S um die Änderungen zu speichern. Öffne das Installierte Benutzerskripte Registerkarte in Tampermonkey, um alle in Ihrem Browser installierten Benutzerskripte anzuzeigen.

Um das Userscript in Aktion zu sehen, öffnen Sie die Zielwebseite. Sie sehen ein Grün Aktie Taste. Durch Klicken auf die Schaltfläche werden Sie aufgefordert, den WhatsApp-Desktop zu öffnen, sofern Sie die App installiert haben. Anschließend können Sie den Kontakt aus der Liste auswählen, um den Artikellink zu senden.

Sie können das Skript weiter modifizieren, um weitere Verbesserungen hinzuzufügen. Sie können beispielsweise das WhatsApp-Symbol auf der Schaltfläche anzeigen oder seine Platzierung mithilfe einer InsertAfter()-Funktion ändern.

Sie können einzelne Benutzerskripte über das Tampermonkey-Dashboard aktivieren, deaktivieren oder bearbeiten. Alternativ können Sie auf das Tampermonkey-Symbol in der Symbolleiste klicken, um alle aktiven Benutzerskripte auf einmal zu deaktivieren.

Mit Tampermonkey Änderungen an Inspektionselementen dauerhaft machen

Tampermonkey ist einer der vielen verfügbaren Userscript-Manager, mit denen Sie Webseiten ändern können, um Ihr Surferlebnis zu verbessern. Kleine Änderungen können zu einer besseren Zugänglichkeit beitragen und kleinere Probleme mit Ihrer Lieblingswebsite beheben.

Bevor Sie mit dem Schreiben eines Skripts beginnen, prüfen Sie, ob bereits ein Skript anderer Benutzer vorhanden ist. Seien Sie jedoch vorsichtig bei der Installation von Benutzerskripten Dritter aus unbekannten Quellen, um bösartigen Code zu vermeiden.