Erste Schritte
Klicken Sie in der Symbolleiste auf das Stylebot-Symbol und dann auf Diese Seite stylen. Oder drücken Sie auf einem beliebigen Tab alt+shift+M, oder klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Stylebot → Element gestalten.
Klicken Sie auf die Elementauswahl, zeigen Sie auf die Seite und klicken Sie auf ein Element. Drücken Sie vor dem Klicken ↑, um stattdessen das übergeordnete Element auszuwählen. Ändern Sie es dann unter Einfach, oder schreiben Sie CSS unter Code. Änderungen werden sofort gespeichert und bei jedem Besuch der Website geladen.
- Schriftarten
- Durchsuchen Sie 400 Google Fonts, und Stylebot lädt die gewählte Schrift. Oder geben Sie eine beliebige auf Ihrem Computer installierte Schriftart ein.
- Position des Editors
- In Chrome und Edge öffnet sich der Editor im Seitenbereich. Über Position in seinem Menü ⋯ öffnen Sie ihn in einem separaten Fenster oder docken ihn in der Seite an. Firefox und Safari haben keinen Seitenbereich.
- Einen Stil ausschalten
- Verwenden Sie den Schalter im Popup oder alt+shift+S. Der Stil bleibt erhalten, wird aber nicht angewendet.
Profile
Ein Profil ist ein eigenes Stylesheet für dieselbe Website. So können Sie mehrere Looks behalten und zwischen ihnen wechseln. Es ist immer nur eines aktiv, und jede Website beginnt mit „Standard“.
Klicken Sie im Kopfbereich des Editors auf den Profilnamen neben der Website, um Profile zu erstellen, umzubenennen, zu duplizieren oder zu löschen. Wechseln Sie dort oder im Popup zwischen ihnen; im Popup schaltet Kein Stil das Styling für die Website aus. Neue Profile sind anfangs leer.
Voreinstellungen
Im Tab „Voreinstellungen“ finden Sie zwei, und beide lassen sich mit Ihren eigenen Änderungen kombinieren. Lesbarkeit verwandelt die Artikel einer Website in eine aufgeräumte Leseansicht, mit Design, Schriftart, Größe und Breite Ihrer Wahl; Seiten, die keine Artikel sind, bleiben unverändert. Graustufen entfernt die Farbe von der Website, in beliebiger Stärke.
Synchronisierung und Versionsverlauf
- Google Drive-Synchronisierung
- Verbinden Sie Google Drive in den Optionen. Ihre Stile, einschließlich Profile, werden alle 30 Minuten und direkt nach jeder Änderung synchronisiert. Stylebot sieht nur die Dateien, die es selbst in Ihrem Drive erstellt, und es gibt keinen Stylebot-Server.
- Konflikte
- Wurde ein Stil auf zwei Computern geändert, bleibt Ihre neuere Änderung erhalten, und die andere Version wird in einem Kommentar gespeichert. So geht nichts verloren.
- Backup
- Exportieren und importieren Sie alle Ihre Stile als JSON in den Optionen.
- Versionsverlauf
- Jede Änderung auf diesem Computer bleibt in den Optionen erhalten, auch solche, die per Synchronisierung eintreffen. Stellen Sie jede frühere Version wieder her, für einzelne Websites oder alle.
Galerie
Die Galerie enthält Stile, die andere mit Stylebot erstellt haben. Sehen Sie sich einen in der Vorschau auf der Website an, für die er gedacht ist, lesen Sie sein CSS und installieren Sie ihn mit einem Klick.
- Einen Stil veröffentlichen
- Wählen Sie im Popup im Menü ⋯ eines Stils oder im Menü ⋯ des Editors In der Galerie veröffentlichen und melden Sie sich mit Google an. Ihre Änderungen bleiben auf Ihrem Computer, bis Sie ein Update veröffentlichen.
- Ihre Stile
- Melden Sie sich in der Galerie an, um Ihre veröffentlichten Stile umzubenennen oder zu löschen und Ihren Benutzernamen zu ändern.
URL-Regeln
Standardmäßig ordnet Stylebot Stile den Websites anhand des Domainnamens zu. Bearbeiten Sie die URL eines Stils in den Optionen und verwenden Sie diese Muster für genauere Regeln.
**Passt auf eine beliebige Zeichenfolge.*Passt auf eine beliebige Zeichenfolge bis zum nächsten /.,Trennt eine Liste von Mustern. Eine URL passt, wenn eines der Muster passt.^Macht die URL am Anfang zu einem regulären Ausdruck.Beispiele
docs.google.com- Die Domain docs.google.com oder eine ihrer Subdomains.
docs**- Jede URL, die mit docs beginnt.
docs*.google.com- docs.google.com, docs1.google.com, docs2.google.com usw.
*.ycombinator.com- news.ycombinator.com und apps.ycombinator.com.
docs.google.com, spreadsheets.google.com- Eine der beiden Domains oder eine ihrer Subdomains.
^http://www.reddit.com/$- Nur die Reddit-Startseite.
*- Jede Website. Nützlich für Stile, die überall gelten sollen.
CLI
Mit dem Befehl stylebot kann ein Coding-Agent wie Claude Code, Codex oder Cursor Websites direkt in Ihrem Browser umgestalten – mit Ihrem eigenen Abo statt einem API-Schlüssel. Sie können die Befehle auch selbst ausführen.
- Einrichtung
- Installieren Sie die CLI, verbinden Sie sie mit Ihren Browsern und aktivieren Sie dann in den Optionen Befehlszeilenzugriff erlauben. Die CLI-Seite führt durch jeden Schritt. Vorerst nur für Chrome und Edge.
- Claude Code
- Fügen Sie das Stylebot-Plugin hinzu und bitten Sie mit
/stylebotum eine Änderung, etwa ein dunkles Design für eine Website. - Datenschutz
- Der CLI-Zugriff ist ausgeschaltet, bis Sie ihn aktivieren. Stylebot und die CLI kommunizieren nur miteinander, auf diesem Computer; ein Agent sendet, was er liest, an seinen eigenen Anbieter.
Tastenkombinationen
Globale Tastenkombinationen funktionieren auf jeder Seite, die Stylebot gestalten kann. Ändern lassen sie sich in den Tastenkombinations-Einstellungen Ihres Browsers, verlinkt in den Optionen. Die Tastenkombinationen des Editors sehen Sie, wenn Sie dort ? drücken.
Hilfe und Support
Einen Fehler gefunden oder eine Idee? Erstellen Sie ein Issue auf GitHub. Stylebot ist kostenlos und Open Source und wird seit 2011 gepflegt. Wenn es Ihnen nützt, können Sie es unterstützen, indem Sie mir einen Kaffee spendieren.