Premiers pas
Cliquez sur l’icône Stylebot dans la barre d’outils, puis sur Styliser cette page. Vous pouvez aussi appuyer sur alt+shift+M dans n’importe quel onglet, ou faire un clic droit sur un élément et choisir Stylebot → Styliser l’élément.
Cliquez sur le sélecteur d’élément, survolez la page et cliquez sur un élément. Appuyez sur ↑ avant de cliquer pour sélectionner plutôt son parent. Modifiez-le ensuite dans De base, ou écrivez du CSS dans Code. Les modifications sont enregistrées au fur et à mesure et s’appliquent à chaque visite du site.
- Polices
- Cherchez parmi 400 Google Fonts et Stylebot charge celle que vous choisissez, ou saisissez le nom de n’importe quelle police installée sur votre ordinateur.
- Position de l’éditeur
- Dans Chrome et Edge, l’éditeur s’ouvre dans le panneau latéral. Utilisez Position dans son menu ⋯ pour l’ouvrir dans une fenêtre séparée ou l’ancrer dans la page. Firefox et Safari n’ont pas de panneau latéral.
- Désactiver un style
- Utilisez l’interrupteur de la fenêtre pop-up, ou alt+shift+S. Le style est conservé, mais n’est plus appliqué.
Profils
Un profil est une feuille de style distincte pour un même site : vous pouvez ainsi garder plusieurs apparences et passer de l’une à l’autre. Un seul profil s’applique à la fois, et chaque site commence avec le profil Par défaut.
Cliquez sur le nom du profil à côté du site, dans l’en-tête de l’éditeur, pour créer, renommer, dupliquer ou supprimer des profils. Passez de l’un à l’autre à cet endroit ou dans la fenêtre pop-up, où Aucun style désactive le style pour ce site. Les nouveaux profils sont vides au départ.
Préréglages
L’onglet Préréglages en propose deux, qui se combinent avec vos propres modifications. Lisibilité transforme les articles d’un site en une vue de lecture épurée, avec le choix du thème, de la police, de la taille et de la largeur ; les pages qui ne sont pas des articles restent intactes. Niveaux de gris retire la couleur du site, à l’intensité de votre choix.
Synchronisation et historique des versions
- Synchronisation Google Drive
- Connectez Google Drive dans les options. Vos styles, profils compris, se synchronisent toutes les 30 minutes et juste après chaque modification. Stylebot ne voit que les fichiers qu’il crée dans votre Drive, et il n’y a pas de serveur Stylebot.
- Conflits
- Si un style a été modifié sur deux ordinateurs, votre modification la plus récente est conservée et l’autre version est gardée dans un commentaire : rien n’est perdu.
- Sauvegarde
- Exportez et importez tous vos styles au format JSON depuis les options.
- Historique des versions
- Chaque modification faite sur cet ordinateur est conservée dans les options, y compris celles qui arrivent par la synchronisation. Restaurez n’importe quelle version antérieure, pour certains sites ou pour tous.
Galerie
La Galerie rassemble des styles créés par d’autres avec Stylebot. Prévisualisez-en un sur le site auquel il est destiné, lisez son CSS et installez-le en un clic.
- Publier un style
- Choisissez Publier dans la Galerie dans le menu ⋯ d’un style, dans la fenêtre pop-up, ou dans le menu ⋯ de l’éditeur, puis connectez-vous avec Google. Vos modifications restent sur votre ordinateur jusqu’à ce que vous publiiez une mise à jour.
- Vos styles
- Connectez-vous à la Galerie pour renommer ou supprimer les styles que vous avez publiés, et pour modifier votre nom d’utilisateur.
Règles d’URL
Par défaut, Stylebot associe les styles aux sites par nom de domaine. Modifiez l’URL d’un style dans les options et utilisez ces motifs pour cibler plus précisément.
**Correspond à n’importe quelle suite de caractères.*Correspond à n’importe quelle suite de caractères jusqu’au prochain /.,Sépare une liste de motifs. Une URL correspond si l’un des motifs correspond.^Au début d’une URL, la transforme en expression régulière.Exemples
docs.google.com- Le domaine docs.google.com ou l’un de ses sous-domaines.
docs**- Toute URL commençant par docs.
docs*.google.com- docs.google.com, docs1.google.com, docs2.google.com, etc.
*.ycombinator.com- news.ycombinator.com et apps.ycombinator.com.
docs.google.com, spreadsheets.google.com- L’un ou l’autre domaine, ou l’un de leurs sous-domaines.
^http://www.reddit.com/$- Uniquement la page d’accueil de Reddit.
*- Tous les sites. Pratique pour les styles à appliquer partout.
CLI
La commande stylebot permet à un agent de code comme Claude Code, Codex ou Cursor de modifier le style des sites directement dans votre navigateur, avec votre propre abonnement plutôt qu’une clé d’API. Vous pouvez aussi lancer les commandes vous-même.
- Configuration
- Installez la CLI, connectez-la à vos navigateurs, puis activez Autoriser l’accès en ligne de commande dans les options. La page CLI détaille chaque étape. Chrome et Edge uniquement pour l’instant.
- Claude Code
- Ajoutez le plugin Stylebot et demandez une modification avec
/stylebot, par exemple un thème sombre pour un site. - Confidentialité
- L’accès à la CLI reste désactivé tant que vous ne l’activez pas. Stylebot et la CLI ne communiquent qu’entre eux, sur cet ordinateur ; un agent envoie ce qu’il lit à son propre fournisseur.
Raccourcis clavier
Les raccourcis globaux fonctionnent sur toutes les pages que Stylebot peut styliser ; modifiez-les dans les paramètres de raccourcis de votre navigateur, accessibles depuis les options. Pour les raccourcis propres à l’éditeur, appuyez sur ? dans l’éditeur.
Aide et assistance
Vous avez trouvé un bug ou vous avez une idée ? Ouvrez un ticket sur GitHub. Stylebot est gratuit et open source, maintenu depuis 2011. S’il vous est utile, vous pouvez le soutenir en m’offrant un café.