Haben Sie jemals eine Website besucht und gedacht: „Warum ist dieser Button nicht da, wo er hingehört?", „Wer hat diesen giftgrünen Hintergrund ausgesucht?", „Wo bleibt der Dark Mode, Entwickler?!" Und dann haben Sie die DevTools geöffnet und angefangen, CSS direkt im Inspector zu bearbeiten, nur um zu sehen, wie es aussehen könnte.

Ich mache das ständig. Über die Jahre der Arbeit mit Websites habe ich ein Arsenal von fünf Werkzeugen zusammengestellt, mit denen ich fast jede Seite nach meinen Wünschen umgestalten kann. Das ist kein Hacking, die Änderungen sind nur für Sie sichtbar, auf Ihrem Rechner. Im Grunde ist es Modding, wie bei Spielen: Sie tauschen ein Modell aus, gestalten die Oberfläche um, entfernen störende Elemente. Die Seite bleibt für alle anderen gleich, aber für Sie wird sie genau so, wie Sie sie sehen wollen.

💡 Kurzüberblick:

• Installieren Sie Stylish und wählen Sie ein fertiges Theme auf Userstyles.org, die Seite ändert sich noch vor dem Laden
• Meistern Sie „Element blockieren" in uBlock Origin, entfernen Sie jedes störende Element mit zwei Klicks von einer Seite
• Fügen Sie ein Benutzerskript über Tampermonkey hinzu, automatisieren Sie Aktionen auf Ihren bevorzugten Plattformen
• Öffnen Sie die DevTools (F12) und bearbeiten Sie die Seite wie Text, alle Änderungen verschwinden nach dem Neuladen
• Konfigurieren Sie Burp Suite als HTTP-Proxy, fangen Sie Daten ab und ersetzen Sie sie in Echtzeit

1. Stylish, sofortige Änderung des Seitendesigns

Stylish, meine bevorzugte kosmetische Browser-Erweiterung. Sie wendet benutzerdefinierte Stile auf eine Seite an, bevor diese gerendert wird. Kein Aufblitzen des ursprünglichen Designs, wie es bei Benutzerskripten vorkommt: Sie öffnen YouTube und sehen sofort Ihr pinkes Hello Kitty, nicht das standardmäßige weiß-rote Theme.

Die Erweiterung ist über zehn Jahre alt, gehört derzeit Similarweb und hat 2 Millionen Nutzer. Die Userstyles.org-Bibliothek enthält über eine halbe Million fertiger Themes, von Dark Modes für Google Docs bis zu Retro-Wave für YouTube.

Warum ist Stylish manuellen Bearbeitungen in den DevTools grundlegend überlegen? Weil die Stile persistent sind: Sie schließen den Browser, öffnen ihn morgen, das Theme ist immer noch da. Außerdem ist es bequem, Themes mit einem Klick zu wechseln, falls eine Seite mehrere Themes hat.

Was Sie tun können:

• Dark Theme auf jeder Seite aktivieren, die keines hat
• Das alte Seitendesign nach einem Redesign wiederherstellen (ja, jemand hat einen solchen Stil wahrscheinlich schon geschrieben)
• Schriftgröße oder Kontrast für bessere Lesbarkeit erhöhen
• Ablenkende Elemente wie Sticky Header oder Abonnement-Pop-ups ausblenden

Das Erstellen eigener Stile erfordert CSS. Die grundlegende Syntax ist einfach: Selektor, Eigenschaft, Wert. Für komplexe Stile empfehle ich eine Alternative, Stylus, einen quelloffenen Stil-Manager ohne Telemetrie.

2. UBlock Origin, chirurgisches Blockieren von Elementen

uBlock Origin, das ist in erster Linie ein Werbeblocker, aber seine Funktion „Element blockieren" verdient einen eigenen Platz in dieser Liste. Sie erlaubt es Ihnen, alles von einer Seite zu entfernen: ein störendes Banner, einen Benutzeravatar, der Sie irritiert, einen Zähler „Nur noch 3 Plätze verfügbar", ein Wetter-Widget, das die halbe Seite einnimmt.

Jedes Mal, wenn ich das Internet ohne Blocker sehe, zum Beispiel auf einem fremden Rechner, kann ich nicht glauben, wie viel Müll da ist. Sehen die Leute wirklich YouTube mit fünf Werbeeinblendungen in einem zehnminütigen Video?

So funktioniert Element blockieren: Rechtsklick auf ein Element → „Element blockieren" → uBlock hebt das Ziel hervor und schlägt einen CSS-Selektor vor. Sie können im DOM-Baum nach oben gehen und die Kriterien erweitern, zum Beispiel nicht ein bestimmtes Banner blockieren, sondern den gesamten Container mit dem Werbe-iframe. Der Filter wird dauerhaft gespeichert.

Fortgeschrittene Technik, der Reiter „Meine Filter" in den Einstellungen. Dort können Sie URL-Filter mit Platzhaltern eingeben, um das Laden ganzer Kategorien von Ressourcen zu unterbinden. Ich habe das genutzt, um problematische JS-Dateien von WordPress-Plugins und -Themes bei der Suche nach Kompatibilitätskonflikten auf Kundenseiten zu deaktivieren.

3. Tampermonkey, Skripte für alle Fälle

Tampermonkey, das leistungsfähigste Werkzeug in dieser Liste. Es ist ein Userscript-Manager mit 12 Millionen Installationen, mit dem Sie Ihr eigenes JavaScript auf jeder beliebigen Website ausführen können. Wenn Stylish das Erscheinungsbild verändert und uBlock Überflüssiges entfernt, dann fügt Tampermonkey neues Verhalten hinzu.

Mein wichtigstes Szenario: der Kampf gegen Anti-Adblock-Pop-ups. Sie kennen das Schema: Sie besuchen eine Seite, der Blocker entfernt Werbung, und die Seite erkennt dies und blendet einen Banner ein: „Bitte deaktivieren Sie Ihren Blocker". uBlock erledigt das manchmal, aber wenn die Seite randomisierte Klassen und IDs verwendet (um an Filtern vorbeizukommen), kommt Tampermonkey ins Spiel. Ich schreibe ein Skript, das nach einem Element mit einem bestimmten Text oder Bild sucht und den gesamten übergeordneten Container entfernt. Grob, aber es funktioniert.

Friedlichere Szenarien:

• Einen „Alle herunterladen"-Button zu einer Dateiseite hinzufügen
• Formulare automatisch mit Standarddaten ausfüllen
• Standardmäßig HD-Qualität auf YouTube aktivieren (obwohl es dafür inzwischen eigene Erweiterungen gibt)
• Die Admin-Funktionalität einer Website durch das Hinzufügen von Hotkeys oder einem Schnellaktionspanel erweitern

Fertige Skripte finden Sie auf Greasy Fork und OpenUserJS. Es gibt Tausende Skripte für alle Gelegenheiten, von Video-Downloads bis hin zu Verbesserungen der GitHub-Oberfläche. Für sicherheitskritische Vorgänge (Passwörter, Zahlungen) empfehle ich, Tampermonkey zu deaktivieren oder die betreffenden Seiten in den Einstellungen der Erweiterung auf die Blacklist zu setzen.

4. Entwicklertools, Spielwiese für Experimente

Ich verbringe mehr Zeit in den Chrome DevTools als in irgendeiner IDE. Die Entwicklung von Plugins für WordPress ist größtenteils Versuch und Irrtum: ausgedacht → im Inspector korrigiert → für gut befunden → programmiert. Ohne DevTools wäre ich um ein Vielfaches langsamer.

Für Nicht-Entwickler sind die Entwicklertools eine Sandbox, in der Sie eine Website temporär verändern und das Ergebnis sofort sehen können. Öffnen Sie die DevTools (F12), gehen Sie zum Tab „Elements", wählen Sie „Inspect" (Pfeilsymbol in der Ecke des Panels) und klicken Sie auf einen beliebigen Teil der Seite. Bearbeiten Sie Text, ändern Sie Farben, verschieben Sie Blöcke, löschen Sie Elemente. Nach einem Neuladen der Seite ist alles wieder im Normalzustand.

Das häufigste Nicht-Programmierer-Szenario: die Vorbereitung einer Screenshot- oder Druckversion. Entfernen Sie vor der Aufnahme alles Unnötige von der Seite: Werbeblöcke, Pop-ups, Chat-Widgets, überflüssige Spalten. Exportieren Sie mit der Druck-Taste, und Sie erhalten ein sauberes, übersichtliches Bild, als wäre die Seite ursprünglich so gestaltet worden.

Im Tab „Network" gibt es eine weitere praktische Funktion: Rechtsklick auf eine beliebige Anfrage → „Request-URL blockieren" oder „Request-Domain blockieren". Ich nutze das, wenn ich prüfen muss, wie eine Website ohne ein bestimmtes Skript oder eine bestimmte Schriftart funktioniert, zum Beispiel um die Ursache eines Konflikts bei einem Kundenprojekt einzugrenzen.

5. Burp Suite Community Edition, Traffic-Interception

Die radikalste Methode der fünf. Burp Suite ist ein interaktiver HTTP-Proxy: Er sitzt zwischen Ihrem Browser und dem Server und kann jede Anfrage oder Antwort abfangen, anhalten und verändern. Die Community Edition, die kostenlose Version von PortSwigger, ist für das „Modden" von Websites mehr als ausreichend.

Wozu braucht man das? Es gibt Situationen, in denen weder CSS noch clientseitiges JavaScript das gewünschte Ergebnis liefern können, weil die Daten bereits in der „falschen" Form vom Server kommen. Burp fängt die Serverantwort ab, bevor der Browser sie verarbeitet, und erlaubt Ihnen, JSON, HTML oder Header im laufenden Betrieb auszutauschen. Die Website rendert dann so, als hätte der Server genau das gesendet, was Sie ersetzt haben.

Praxisfall: Bei einem Projekt lieferte die API eine Produktliste mit dem Feld "available": false für Positionen, die nicht vorrätig waren. Ich musste das Layout der Produktkarte für verschiedene Zustände prüfen. Statt in die Datenbank einzugreifen oder den Backend-Entwickler um die Generierung von Testdaten zu bitten, fing ich die Antwort in Burp ab, änderte ein paar false in true und sah in einer Sekunde das Layout für „verfügbare" Produkte.

Das Schwierigste an Burp ist die Ersteinrichtung. Sie müssen die Proxy-Adresse (localhost:8080) in den Browsereinstellungen hinterlegen und das Burp-SSL-Zertifikat installieren, um mit HTTPS-Seiten arbeiten zu können. Ohne das Zertifikat bemängelt der Browser eine „unsichere Verbindung". In der offiziellen PortSwigger-Dokumentation ist dieser Vorgang Schritt für Schritt beschrieben.

⁉️🤔 Häufig gestellte Fragen

Ist es legal, Websites auf diese Weise zu verändern?

Ja, denn die Änderungen finden ausschließlich auf Ihrem Gerät statt. Sie hacken keinen Server, stehlen keine Daten und umgehen keine Paywall. Es ist vergleichbar mit dem Tapezieren einer Wohnung: Die Wände bleiben dieselben, die Optik ändert sich. Die einzige Ausnahme sind automatisierte Skripte, die eine übermäßige Serverlast erzeugen (etwa Parsing in einer Schleife ohne Verzögerung). Handeln Sie vernünftig.

Welches Tool sollte ich wählen, wenn ich überhaupt kein Programmierer bin?

Beginnen Sie mit Stylish: Erweiterung installieren, zu Userstyles.org gehen, ein Theme auswählen, fertig. Zum Blockieren störender Elemente eignet sich uBlock Origin mit der Funktion „Element blockieren", dafür brauchen Sie keinen Code. Tampermonkey und Burp Suite sind für diejenigen, die bereit sind, Code zu schreiben oder zumindest zu lesen.

Kann man eine Website mit solchen Bearbeitungen kaputtmachen?

Für sich selbst: ja, das können Sie. Ein Teil der Seite funktioniert möglicherweise nicht mehr, wenn Sie das falsche Element gelöscht oder einen wichtigen Button mit Ihrem Style überdeckt haben. Das lässt sich aber durch Deaktivieren der Erweiterung oder Zurücksetzen der Filter beheben. Für andere Nutzer bleibt die Website unberührt, Ihre Änderungen sind lokal.

Was tun, wenn eine Website Tampermonkey erkennt und Inhalte blockiert?

Manche Websites prüfen per JavaScript auf Erweiterungen. Probieren Sie einen alternativen Manager, Violentmonkey, er ist weniger bekannt und wird seltener von Erkennungen erfasst. Oder führen Sie das Skript über ein Snippet in den DevTools aus (Tab „Sources" → Snippets), das ist eine integrierte Chrome-Funktion, die von der Website nicht verfolgt wird.

Besteht das Risiko, dass die Erweiterung selbst mich ausspioniert?

Die Frage ist berechtigt. Stylish gehörte bis 2017 einem anderen Eigentümer und sammelte tatsächlich Daten. Inzwischen gehört die Erweiterung Similarweb mit einer veröffentlichten Datenschutzrichtlinie, die Erfassung ist anonymisiert und lässt sich in den Einstellungen deaktivieren. Wenn Sie ein vollständig offenes Werkzeug ohne Telemetrie wünschen, installieren Sie Stylus (Open-Source-Alternative). Ähnlich bei Skripten: Tampermonkey erhebt anonyme Statistiken (Version, Sprache, Betriebssystem), deaktivierbar in den Einstellungen über das Häkchen „Anonyme Statistiken".

Wie funktionieren diese Werkzeuge auf Mobilgeräten?

Auf Android können Sie in Firefox uBlock Origin und Tampermonkey als Add-ons installieren, das ist ein legitimer Weg. Auf iOS ist die Situation schlechter: Apple schränkt Erweiterungen ein. Eine teilweise Alternative ist der Browser Orion, der Chrome- und Firefox-Erweiterungen unter iOS unterstützt. Stylish funktioniert auf Mobilgeräten über eine separate App.

Lohnt es sich, Websites an die eigenen Bedürfnisse anzupassen?

Wenn Sie bis hierhin gelesen haben, lautet die Antwort wahrscheinlich „Ja". Das Web ist kein fertiges Produkt, sondern Rohmaterial. Jemand hat die Benutzeroberfläche für einen Durchschnittsnutzer entworfen, und Sie sind nicht der Durchschnitt. Sie haben Ihre eigenen Gewohnheiten, Ihren eigenen Geschmack, Ihre eigenen Auslöser für Ärger.

Meine persönliche Rangliste nach Aufwand-Ertrag-Verhältnis: Beginnen Sie mit uBlock Origin (5 Minuten für „Element blockieren", und die Website ist bereits aufgeräumt), ergänzen Sie Stylish für Ihre bevorzugten Plattformen (weitere 10 Minuten, und Sie haben ein dunkles Theme, wo es nie eines gab), und wenn Sie Automatisierung wünschen, öffnen Sie Greasy Fork und suchen Sie nach einem fertigen Skript für Ihre Aufgabe. DevTools und Burp für die Fälle, in denen die ersten drei Werkzeuge nicht ausreichen.

Sie können in fünf Minuten mit einer Erweiterung starten, und in einem Monat werden Sie Ihren Browser nicht wiedererkennen, weil Sie eine Sammlung von Themes, Skripten und Filtern für zwei Dutzend Websites zusammengestellt haben. Das ist ein Hobby mit niedriger Einstiegshürde und unbegrenztem Potenzial. Wie die Desktop-Anpassung unter Windows in den 2000ern, nur dass es auf das gesamte Internet skaliert.