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 n’a 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.
Ligne de commande
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. C’est la meilleure façon de faire styliser un site par un agent, et vous pouvez aussi lancer les commandes vous-même.
- Configuration
- Installez la CLI, connectez-la à vos navigateurs, puis activez Autoriser les applications de cet ordinateur à contrôler Stylebot dans les options. La page Ligne de commande 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 en ligne de commande 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.
Chat
Le Chat est idéal pour les retouches rapides. Décrivez la modification souhaitée dans l’onglet Chat et Stylebot écrit le CSS. Vous pouvez choisir un élément pour cibler quelque chose de précis, ou joindre une capture d’écran pour montrer ce que vous voulez dire. Pour des changements plus importants, comme un thème entièrement nouveau, utilisez la ligne de commande.
- Utilisez votre propre clé
- Connectez une clé d’API Claude, OpenAI ou Gemini. Les clés sont enregistrées uniquement sur cet ordinateur, jamais synchronisées. Les messages vont directement de votre navigateur au fournisseur.
- Où vont les modifications
- Chaque modification est appliquée immédiatement et ajoutée à la feuille de style du profil actuel. Cliquez sur N lignes ajoutées pour la voir dans Code, ou annulez-la depuis le chat.
- Coût
- Le nombre de jetons sous la zone de message indique ce que la conversation a consommé, avec un coût estimé.
Lisibilité et niveaux de gris
Les deux se trouvent dans l’onglet Préréglages et 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, sauvegarde et historique
- 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.
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.
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é.