Dokumentation

Die Erweiterung läuft in Chrome 120 und neuer sowie in Firefox 136 und neuer.

Nutzerskripts zulassen

Browser führen JavaScript einer Erweiterung auf Webseiten nur mit einer eigenen Berechtigung aus. Ohne sie werden die Stile der Regeln weiterhin angewendet, das JavaScript der Regeln läuft aber nicht; das Pop-up und die Einstellungsseite zeigen dann, wie Sie es einschalten.

• Chrome 138 und neuer: Öffnen Sie die Details der Erweiterung (chrome://extensions → User JavaScript and CSS → „Details“) und aktivieren Sie „Nutzer-Scripts zulassen“. Der Entwicklermodus ist nicht nötig.
• Chrome 120–137: Aktivieren Sie oben rechts auf chrome://extensions den „Entwicklermodus“. Das ist eine Vorgabe von Google für jede Erweiterung mit Nutzerskripts.
• Firefox: Klicken Sie im Pop-up auf „Nutzerskripts zulassen“ und bestätigen Sie dies im Dialog des Browsers. Firefox kann der Erweiterung außerdem den Zugriff auf Websites entziehen: Dann zeigt das Pop-up „Zugriff auf Websites zulassen“ und die Einstellungsseite oben ein Banner mit „Zulassen“.

Regeln

Eine Regel ist in dieser Erweiterung JavaScript- und/oder CSS-Code, der auf Webseiten ausgeführt wird, die zu ihren URL-Mustern passen.

URL-Muster

• Ein Muster hat die Form <scheme>://<host>/<path>: https://site.com/*;
• Mehrere Muster werden durch Kommas getrennt: https://one.com/*, https://two.com/*;
• Eine Ausnahme beginnt mit !: !https://site.com/admin/*.

Die Erweiterung wandelt jedes Muster in das Format der Match Patterns des Browsers um, und das Pop-up und der Zähler auf dem Symbol zeigen genau, wo der Browser die Regel ausführt.

Ein Muster mit Schema wird fast so verwendet, wie es geschrieben ist:

Sie schreiben	Die Regel läuft auf
https://site.com/*	site.com und www.site.com, nicht auf anderen Subdomains
https://*.site.com/*	site.com und allen seinen Subdomains
https://site.com/path	Seiten auf site.com und www.site.com, deren Pfad mit /path beginnt
https://site.com	ganz site.com und www.site.com
http*://site.com	site.com und www.site.com über http und https
http://localhost:*/*	localhost auf jedem Port

Ein Muster ohne Schema steht für die Website mit ihren Subdomains, über http und https:

Sie schreiben	Die Regel läuft auf
site.com, *site.com*, *.site.com	site.com und allen seinen Subdomains
www.site.com	www.site.com und site.com
пример.рф	пример.рф und seinen Subdomains
site.com/path	Seiten auf site.com und seinen Subdomains, deren Pfad mit /path beginnt
localhost:3000	localhost auf Port 3000
/admin	Seiten mit /admin im Pfad auf jeder Website
*	jeder Website

Eine Ausnahme mit Schema gilt genau so, wie sie geschrieben ist: https://site.com/*, !https://www.site.com/* läuft auf site.com, aber nicht auf www.site.com. Eine Ausnahme ohne Schema folgt der Tabelle oben: !site.com/admin schließt /admin auf site.com und seinen Subdomains aus.

Ports in Firefox. In Firefox kann ein Muster keinen Port enthalten, daher wird der Port weggelassen: localhost:3000 läuft auf localhost auf jedem Port, und eine Ausnahme mit Port schließt alle Ports des Hosts aus. Ein Muster für jede Website auf einem Port (*://*:8080/*) würde zu einem Muster für alle Websites, deshalb wird es in Firefox rot markiert.

Rot markiert wird ein Muster, das der Browser nicht akzeptiert: ein * innerhalb des Hosts (https://shop*.site.com/*, https://site.*/*) oder ein Schema, auf dem die Erweiterung nicht laufen kann (chrome-extension://, ws://). Ein solches Muster wird übersprungen, die übrigen Muster der Regel funktionieren weiter. Wird eine Ausnahme abgelehnt, läuft die Regel nirgends, bis Sie sie korrigieren – sonst liefe sie auf genau den Seiten, die Sie ausgeschlossen haben.

JavaScript-Eigenschaften

Die Schaltflächen im Kopf des JavaScript-Bereichs:

• Isolierte Umgebung: Das Skript sieht das DOM der Seite, aber nicht ihre Variablen und Funktionen.
• Alle Frames: Das Skript läuft auch in Frames, deren Adresse zur Regel passt. Jeder Frame wird einzeln mit den Mustern der Regel abgeglichen.
• Beim Start ausführen: Das Skript läuft, bevor das DOM aufgebaut ist, sonst danach, aber bevor Ressourcen wie Bilder und Frames geladen sind. Für ein solches Skript wird das Ereignis DOMContentLoaded nicht ausgelöst.

Stileigenschaften

Die Schaltflächen im Kopf des Stilbereichs:

• Sass-Präprozessor: eingeschaltet (Standard) – der Stil wird als Sass oder SCSS kompiliert, die Syntax ergibt sich daraus, ob {;} im Code vorkommt; ausgeschaltet – der Stil wird so angewendet, wie er geschrieben ist.
• Automatisch !important für alle Eigenschaften: fügt jeder Eigenschaft des kompilierten Stils !important hinzu.
• In verschachtelten Frames anwenden: Der Stil gelangt auch in Frames innerhalb der Seite. Standardmäßig eingeschaltet.
• Im Shadow DOM anwenden: Der Stil gilt auch innerhalb von Webkomponenten mit offenem Shadow DOM. Standardmäßig ausgeschaltet.

Ein Stil ändert sich in offenen Tabs sofort, ohne die Seite neu zu laden: wenn Sie ihn bearbeiten, die Regel aktivieren oder ihre Adresse ändern.

Gemeinsame Regeln

Mit gemeinsamen Regeln bauen Sie Abhängigkeiten zwischen Regeln auf und legen ausdrücklich fest, in welcher Reihenfolge sie geladen werden. Jede Regel lässt sich im Regelmenü als „Gemeinsame Regel“ markieren – dann erscheint sie in der Modulliste anderer Regeln. Von eingebundenen Regeln werden nur die JS- und CSS-Inhalte übernommen, ihre übrigen Eigenschaften werden ignoriert.

Frühere Versionen

Die Erweiterung bewahrt den Code einer Regel vor jedem der letzten 10 Speichervorgänge auf: „Frühere Versionen“ im Regelmenü. Eine Version wird in den Editor übernommen und gilt, sobald Sie sie speichern. Versionen bleiben nur in diesem Browser: Sie werden weder exportiert noch in der Cloud gesichert.

Weitere Funktionen

• Die Markierung „Regel aktiviert“ wird ignoriert, wenn es sich um eine gemeinsame Regel handelt, die von einer anderen Regel eingebunden wird;
• Die Markierung „In der Cloud sichern“ bedeutet nur, dass die Regel in das Cloud-Backup aufgenommen wird;
• „Als Vorlage für neue Regeln verwenden“ im Regelmenü: Neue Regeln beginnen mit dem Code und den Eigenschaften dieser Regel.

Module

Externe JS- und CSS-Module lassen sich in Regeln einbinden, sie laufen vor den Regeln. Unterstützt werden Links https://..., den Typ der Ressource erkennt die Erweiterung selbst.

Der Inhalt eines Moduls wird heruntergeladen und im Speicher der Erweiterung abgelegt. Aktualisiert wird er mit „Erneut herunterladen“ im Bearbeitungsfenster des Moduls oder nach Zeitplan: über die Einstellung „Bibliotheksupdates“ – manuell, täglich oder wöchentlich. Schlägt ein Download fehl, bleibt die vorherige Version des Moduls erhalten.

Speicher

Lokaler Speicher

• „JSON exportieren“ speichert Ihre Regeln, Bibliotheken und Einstellungen in einer Datei.
• „JSON importieren“ öffnet eine Liste der Regeln und Bibliotheken aus der Datei. „Ausgewählte hinzufügen“ fügt die markierten zu Ihren hinzu: Vorhandene Regeln werden ersetzt, ihr alter Code bleibt unter „Frühere Versionen“ erhalten. „Alles ersetzen“ ersetzt Ihre Regeln und Bibliotheken durch die aus der Datei.

Browser-Synchronisierung

Ist im Browser die Synchronisierung eingeschaltet, lässt sich ein Backup in die Cloud Ihres Google- oder Firefox-Kontos hochladen. Dafür ist keine zusätzliche Anmeldung oder Einrichtung nötig: storage.sync ist der Standard-Synchronisierungsbereich für Erweiterungen. Backups werden manuell hochgeladen und heruntergeladen.

Der Platz ist auf 100 KB begrenzt, daher werden vor dem Hochladen die Inhalte externer Module und alle generierten Daten aus der Kopie entfernt und das Ergebnis komprimiert. Reicht der Platz trotzdem nicht, schalten Sie „In der Cloud sichern“ bei Regeln aus, die Sie im Backup nicht brauchen.

Agenten (MCP)

KI-Agenten – Claude Code, Codex, Gemini CLI, Cursor, VS Code, Claude Desktop und andere – können Ihre Regeln über den lokalen MCP-Server user-js-css-mcp lesen und bearbeiten. Die Funktion ist experimentell.

1. Öffnen Sie auf der Einstellungsseite den Bereich MCP und aktivieren Sie „MCP-Verbindungen zulassen“.
2. Wählen Sie Ihren Client. Der Bereich liefert einen fertigen Befehl, einen Link zur Installation mit einem Klick oder einen Konfigurationsblock, der Verbindungsschlüssel ist bereits eingetragen.
3. Starten Sie den Client neu: Er startet den Server selbst, und der Bereich zeigt an, dass der Client verbunden ist.

Der Server läuft auf Ihrem Computer (127.0.0.1) und benötigt Node.js 18+ oder Bun 1.2+. Erweiterung und Server prüfen vor jeder Anfrage den Verbindungsschlüssel, sodass kein anderes Programm auf dem Computer sie nutzen kann. „Ersetzen“ neben dem Schlüssel trennt alle Clients, die mit dem alten Schlüssel eingerichtet wurden.

Ein Agent kann Regeln und Bibliotheken auflisten, lesen, durchsuchen, anlegen und ändern, herausfinden, welche Regeln auf einer Seite laufen, nachlesen, warum eine Regel nicht funktioniert, Regeln in einer Datei sichern und daraus wiederherstellen sowie eine Regel auf eine frühere Version zurücksetzen.