Fonctionnalités de JustZix

Vous définissez un motif d'URL, écrivez du code CSS et/ou JS — l'extension l'injecte automatiquement à chaque chargement de la page. Chaque règle a son propre éditeur avec coloration syntaxique (CodeMirror).

• CSS injecté via une balise <style> dans le head du document — pleine spécificité disponible.
• JS exécuté dans le MAIN world de la page via chrome.scripting.executeScript — contourne la CSP dans 99% des cas, accès à window.
• Activez / désactivez des règles individuelles d'un clic sur la barre d'outils flottante.
• L'éditeur a un thème sombre/clair, des numéros de ligne, une recherche et une barre de redimensionnement déplaçable.

En savoir plus →

Structure à quatre niveaux qui passe de « une correction CSS rapide » à « 100 règles réparties sur 12 projets clients ». Les interrupteurs se propagent en cascade dans la hiérarchie.

• Dossier — niveau supérieur, possède son propre motif d'URL et un label de 3 lettres pour le bouton flottant.
• Groupe — sous-organisation au sein d'un dossier. Chaque dossier a au moins un groupe (« Par défaut » par défaut).
• Règle — l'unité CSS/JS proprement dite. Appartient à un groupe. Possède des motifs d'URL optionnels pour affiner.
• Action — bouton cliquable dans le panneau d'actions qui exécute du JS personnalisé à la demande.

Dossier "client-acme"
├── Groupe "styles"
│   ├── Règle "masquer pubs"
│   └── Règle "mode sombre"
└── Groupe "actions"
    └── Règle "barre QA"
        ├── Action "FILL"
        ├── Action "CLR"
        └── Action "COPY"

En savoir plus →

Faites correspondre par URL exacte, site entier, tous les sous-domaines, ou tout ce qui correspond à une sous-chaîne. Les motifs peuvent se cumuler aux niveaux dossier + groupe + règle pour un contrôle fin.

• https://example.com/admin — URL exacte uniquement
• https://example.com/* — toutes les pages du site
• https://*.example.com/* — tous les sous-domaines
• *://localhost:*/* — toute appli locale, tout port, tout protocole
• *staging* — toute URL contenant « staging »

En savoir plus →

Un petit bouton rond apparaît sur chaque page où l'un de vos dossiers correspond. Un clic active/désactive tous les dossiers correspondants. La couleur montre l'état actuel d'un coup d'œil.

• Inject Green (ou la couleur de votre dossier) — tous les dossiers correspondants activés.
• Syntax Orange — certains activés, certains désactivés (état mixte).
• Muted Gray — tous désactivés.
• Halt Red — extension globalement désactivée.
• Le clic droit ouvre un panneau avec tous les dossiers/groupes/règles correspondants à basculer individuellement.
• Glissez pour repositionner. Position mémorisée par fenêtre.

En savoir plus →

Une deuxième barre flottante avec des contrôles interactifs. Chaque action est l'un des six types — du simple bouton au curseur ou à l'interrupteur à trois états. Chacune a un label, une couleur et un raccourci clavier optionnel ; la barre mémorise sa position, et un clic droit la masque pour le reste de la session.

• BUTTON — un bouton fire-and-forget : un clic exécute du code JS.
• SELECT — une liste déroulante ; options statiques ou générées en JS, en choisir une déclenche l'action.
• INPUT — un champ texte dans la barre, style command-bar — tapez une valeur et validez.
• SLIDER — un curseur pilotant une variable CSS en direct (p. ex. luminosité, zoom).
• TEXTAREA — un bloc-notes multiligne, contenu mémorisé par domaine.
• TOGGLE3 — un contrôle segmenté à trois états (p. ex. dev / staging / prod).

En savoir plus →

Dans le JS de n'importe quelle règle ou le code de n'importe quel bouton d'action, vous avez accès à deux globales. window.JZ contrôle les boutons d'action — appelez-les programmatiquement, enchaînez des workflows, intégrez des mutation observers. window.JUSTZIX est un logger qui écrit directement dans la fenêtre Output Console — pas besoin de DevTools.

• JZ.click('LBL') — cliquez programmatiquement le bouton d'action étiqueté « LBL ».
• JZ.action('LBL') — obtenez l'élément DOM du bouton (stylez-le, vérifiez ses attributs).
• JZ.actions() — tableau de tous les boutons d'action visibles.
• JZ.labels() — tableau des labels originaux (casse préservée).
• La recherche est insensible à la casse. JZ.click('btn') = JZ.click('BTN').
• JUSTZIX.log() / .warn() / .error() / .info() / .debug() — écrit une entrée dans l'Output Console (alias : __JUSTZIX__, JZ.log, etc.).

// Action « AUTO » — enchaîner trois autres actions
JZ.click('LOAD');
setTimeout(() => JZ.click('PROC'), 500);
setTimeout(() => JZ.click('SAVE'), 1500);

En savoir plus →

Une clé de synchronisation de 25 caractères lie votre compte. Toutes les règles, paramètres et modifications se propagent en quasi temps réel via un Last-Write-Wins par entité avec horodatages de Lamport.

• Clé générée localement — le backend ne voit jamais sa forme en clair (seulement le hash SHA-256).
• Conflit résolu par entité — jamais d'écrasement en masse de « tous vos paramètres ».
• Les tombstones propagent correctement les suppressions.
• UI de résolution de conflit à la connexion : utiliser le serveur / envoyer le local / fusionner LWW.
• Onglet Statut : historique de synchronisation, vue de la bibliothèque cloud et resynchronisation complète avec le compte.
• Nettoyage des comptes inactifs après 12 mois (avec e-mail d'avertissement 30 jours avant).
• Récupération par e-mail — une clé perdue en émet une nouvelle.

En savoir plus →

Deux façons de déplacer des données : des liens publics temporaires à partager avec d'autres (JZS-XXXX-XXXX-XXXX-XXXX, TTL de 1 à 48 h) et des sauvegardes automatiques horaires/quotidiennes/hebdomadaires pour vous-même.

• TTL du partage : 1h / 6h / 12h / 24h (par défaut) / 48h. Le token expire automatiquement.
• Le destinataire voit un aperçu avant l'import — avec une bannière d'avertissement JS si le bundle contient du JavaScript.
• Cinq formats d'export : justzix-full, partial, folder, group, rule.
• Sauvegardes : 24 horaires + 30 quotidiennes + 8 hebdomadaires, nettoyage automatique des plus anciennes.
• Panneau « Mes partages » avec compteur de téléchargements et bouton de révocation.

En savoir plus →

Cinq types de fenêtres de dev qui s'affichent directement sur la page — sans DevTools. Vous les déplacez, les ancrez bord à bord et les assemblez en un mini-tableau de bord. Chaque fenêtre peut être persistante (liée à une règle) ou temporaire (TEMP, invoquée par un raccourci).

• CSS pane — un éditeur CSS en direct, les changements apparaissent instantanément, contenu conservé par onglet.
• JS pane — un éditeur JS exécuté à la demande avec un bouton Run (Ctrl+Enter).
• JS Console — un REPL sur la page : tapez, Entrée, résultat ; historique des commandes avec les flèches.
• Output Console — un visualiseur de logs de la page à 6 onglets comptés : All, JZconsole, console.*, Network, erreurs et pushes dataLayer. L'onglet Network propose des filtres par domaine, taille et temps.
• AI Helper — un assistant IA intégré (OpenAI / Anthropic / Gemini) : inspecte la page, teste le code dans des fenêtres TEMP et, après votre accord, crée des règles.
• Recherche dans les éditeurs — une barre au-dessus de chaque éditeur CSS/JS : compteur de résultats, surlignage, raccourcis Ctrl+Alt+←/→.
• TEMP panes — les mêmes fenêtres sous Ctrl+Alt+G/H/J/K, éphémères, disparues au rechargement.
• Drag & snap & connect — déplacez les fenêtres, ancrez-les par les bords, assemblez-les en groupes.
• Personnalisation par fenêtre — couleur, police et taille depuis le menu du clic droit.

Ctrl+Alt+G  →  TEMP CSS pane
Ctrl+Alt+H  →  TEMP JS pane
Ctrl+Alt+J  →  TEMP JS Console
Ctrl+Alt+K  →  TEMP Output Console
Ctrl+Alt+\  →  AI Helper

En savoir plus →