Documentation

L’extension fonctionne dans Chrome 120 et versions ultérieures, et dans Firefox 136 et versions ultérieures.

Autoriser les scripts utilisateur

Les navigateurs n’exécutent le JavaScript d’une extension sur les pages web qu’avec une autorisation distincte. Sans elle, les styles des règles s’appliquent quand même, mais leur JavaScript ne s’exécute pas ; le popup et la page des options indiquent alors comment l’activer.

• Chrome 138 et versions ultérieures : ouvrez les détails de l’extension (chrome://extensions → User JavaScript and CSS → « Détails ») et activez « Autoriser les scripts utilisateur ». Le mode développeur n’est pas nécessaire.
• Chrome 120 à 137 : activez le « Mode développeur » en haut à droite de chrome://extensions. C’est une exigence de Google pour toutes les extensions qui utilisent des scripts utilisateur.
• Firefox : cliquez sur « Autoriser les scripts utilisateur » dans le popup, puis confirmez dans la boîte de dialogue du navigateur. Firefox peut aussi laisser l’extension sans accès aux sites : le popup affiche alors « Autoriser l’accès aux sites », et la page des options affiche « Autoriser » dans un bandeau en haut.

Règles

Dans l’extension, une règle est du code JavaScript et/ou CSS qui s’exécute sur les pages web correspondant à ses motifs d’URL.

Motifs d’URL

• Un motif a la forme <scheme>://<host>/<path> : https://site.com/* ;
• Plusieurs motifs se séparent par des virgules : https://one.com/*, https://two.com/* ;
• Une exclusion commence par ! : !https://site.com/admin/*.

L’extension convertit chaque motif au format des motifs de correspondance du navigateur, et le popup comme le badge montrent exactement où le navigateur exécutera la règle.

Un motif avec un schéma est utilisé presque tel quel :

Vous écrivez	La règle s’exécute sur
https://site.com/*	site.com et www.site.com, pas les autres sous-domaines
https://*.site.com/*	site.com et tous ses sous-domaines
https://site.com/path	les pages commençant par /path sur site.com et www.site.com
https://site.com	tout site.com et www.site.com
http*://site.com	site.com et www.site.com en http et en https
http://localhost:*/*	localhost sur n’importe quel port

Un motif sans schéma désigne le site et ses sous-domaines, en http et en https :

Vous écrivez	La règle s’exécute sur
site.com, *site.com*, *.site.com	site.com et tous ses sous-domaines
www.site.com	www.site.com et site.com
пример.рф	пример.рф et ses sous-domaines
site.com/path	les pages commençant par /path sur site.com et ses sous-domaines
localhost:3000	localhost sur le port 3000
/admin	les pages dont le chemin contient /admin, sur n’importe quel site
*	n’importe quel site

Une exclusion avec un schéma est utilisée exactement telle qu’elle est écrite : https://site.com/*, !https://www.site.com/* s’exécute sur site.com, mais pas sur www.site.com. Une exclusion sans schéma suit le tableau ci-dessus : !site.com/admin exclut /admin sur site.com et ses sous-domaines.

Les ports dans Firefox. Dans Firefox, un motif ne peut pas indiquer de port, le port est donc ignoré : localhost:3000 s’exécute sur localhost quel que soit le port, et une exclusion avec un port exclut tous les ports de l’hôte. Un motif visant n’importe quel site sur un seul port (*://*:8080/*) deviendrait un motif pour tous les sites : dans Firefox, il est donc signalé en rouge.

Est signalé en rouge un motif que le navigateur n’accepte pas : un * au milieu de l’hôte (https://shop*.site.com/*, https://site.*/*) ou un schéma sur lequel l’extension ne peut pas s’exécuter (chrome-extension://, ws://). Un tel motif est ignoré, et les autres motifs de la règle continuent de fonctionner. Si c’est une exclusion qui est refusée, la règle ne s’exécute nulle part tant que vous ne l’avez pas corrigée : sinon, elle s’exécuterait sur les pages que vous avez exclues.

Propriétés JavaScript

Les boutons de l’en-tête du panneau JavaScript :

• Environnement isolé : le script voit le DOM de la page, mais pas ses variables ni ses fonctions.
• Tous les cadres : le script s’exécute aussi dans les cadres dont l’adresse correspond à la règle. Chaque cadre est vérifié séparément par rapport aux motifs de la règle.
• Exécuter au début du chargement : le script s’exécute avant la construction du DOM ; sinon, il s’exécute après, mais avant le chargement des ressources comme les images et les cadres. Notez que l’événement DOMContentLoaded n’est pas déclenché pour un tel script.

Propriétés des styles

Les boutons de l’en-tête du panneau des styles :

• Préprocesseur Sass : activé (par défaut), le style est compilé en Sass ou en SCSS, la syntaxe étant déterminée par la présence de {;} dans le code ; désactivé, le style est appliqué tel qu’il est écrit.
• Ajouter !important à toutes les propriétés : ajoute !important à chaque propriété du style compilé.
• Appliquer dans les cadres imbriqués : le style s’applique aussi dans les cadres à l’intérieur de la page. Activé par défaut.
• Appliquer dans le shadow DOM : le style s’applique aussi à l’intérieur des composants web dont le shadow DOM est ouvert. Désactivé par défaut.

Un style change immédiatement dans les onglets ouverts, sans actualiser la page : quand vous le modifiez, activez la règle ou changez son adresse.

Règles partagées

Les « règles partagées » permettent de créer des dépendances entre règles et de maîtriser explicitement leur ordre de chargement. Toute règle peut être marquée comme « Règle partagée » dans le menu de la règle : elle s’ajoute alors à la liste des modules des autres règles. Seul le contenu JS et CSS d’une règle incluse est repris, ses autres propriétés sont ignorées.

Versions précédentes

L’extension conserve le code d’une règle avant chacun des 10 derniers enregistrements : « Versions précédentes » dans le menu de la règle. Une version revient dans l’éditeur et s’applique une fois enregistrée. Les versions ne sont conservées que dans ce navigateur : elles ne sont ni exportées ni enregistrées dans le cloud.

Autres particularités

• Le marqueur Règle activée est ignoré quand la règle est partagée et incluse par une autre règle ;
• Le marqueur Enregistrer dans le cloud signifie seulement que la règle fait partie de la sauvegarde cloud ;
• « Utiliser comme modèle pour les nouvelles règles » dans le menu de la règle : les nouvelles règles démarrent avec le code et les propriétés de cette règle.

Modules

Des modules JS et CSS externes peuvent être ajoutés aux règles ; ils s’exécutent avant les règles. Les liens https://... sont pris en charge, et l’extension reconnaît le type de la ressource.

Le contenu d’un module est téléchargé et conservé dans le stockage de l’extension. Il se met à jour avec « Télécharger à nouveau » dans la fenêtre de modification du module, ou selon le calendrier choisi dans le paramètre « Mise à jour des bibliothèques » : « Manuelle », « Quotidienne » ou « Hebdomadaire ». Si un téléchargement échoue, la version précédente du module est conservée.

Stockage

Stockage local

• « Exporter en JSON » enregistre vos règles, bibliothèques et paramètres dans un fichier.
• « Importer un JSON » ouvre la liste des règles et bibliothèques du fichier. « Ajouter la sélection » ajoute celles qui sont cochées aux vôtres : les règles que vous avez déjà sont remplacées, et leur ancien code reste dans les versions précédentes. « Tout remplacer » remplace vos règles et bibliothèques par celles du fichier.

Synchronisation du navigateur

Si la synchronisation est activée dans le navigateur, une sauvegarde peut être envoyée vers le cloud de votre compte Google ou Firefox. Cette méthode ne demande ni connexion supplémentaire ni configuration : storage.sync est le type de synchronisation standard des extensions. Les sauvegardes s’envoient et se récupèrent manuellement.

L’espace est limité à 100 Ko : avant l’envoi, le contenu des modules externes et toutes les données générées sont retirés de la copie, puis le résultat est compressé. Si la place manque encore, désactivez « Enregistrer dans le cloud » sur les règles dont vous n’avez pas besoin dans la sauvegarde.

Agents (MCP)

Les agents IA (Claude Code, Codex, Gemini CLI, Cursor, VS Code, Claude Desktop et d’autres) peuvent lire et modifier vos règles via le serveur MCP local user-js-css-mcp. Cette fonctionnalité est expérimentale.

1. Ouvrez la section MCP de la page des options et activez « Autoriser les connexions MCP ».
2. Choisissez votre client. La section fournit une commande prête à l’emploi, un lien d’installation en un clic ou un bloc de configuration, avec le secret de connexion déjà renseigné.
3. Redémarrez le client : il lance lui-même le serveur, et la section indique que le client est connecté.

Le serveur tourne sur votre ordinateur (127.0.0.1) et nécessite Node.js 18+ ou Bun 1.2+. L’extension et le serveur vérifient le secret de connexion avant chaque requête, si bien qu’aucun autre programme de l’ordinateur ne peut les utiliser. « Remplacer », à côté du secret, déconnecte tous les clients configurés avec l’ancien.

Un agent peut lister, lire, rechercher, créer et modifier des règles et des bibliothèques, trouver les règles qui s’exécutent sur une page, comprendre pourquoi une règle ne fonctionne pas, sauvegarder les règles dans un fichier et les restaurer, et ramener une règle à une version précédente.