JustZix — manuel d'utilisation

Injection de styles CSS personnalisés, de code JavaScript et de boutons d'action sur n'importe quelle page

Concept et notions principales

JustZix permet d'injecter automatiquement votre propre CSS et JavaScript sur des pages choisies, ainsi que de définir des boutons d'action (raccourcis exécutant des fragments de code à la demande).

Hiérarchie des données

Motifs d'URL au niveau de la règle et du groupe

Chaque règle ainsi que chaque groupe peut recevoir sa propre liste de motifs d'URL supplémentaires (chip-input). Quand la liste est vide — l'élément fonctionne partout où le motif du dossier correspond. Quand vous définissez par ex. https://justzix.com/admin/* — l'élément ne fonctionnera que sur les sous-pages de l'admin.

Tutoriel — introduction interactive

Pour les nouveaux utilisateurs, JustZix dispose d'un tutoriel interactif intégré qui vous guide pas à pas dans la création d'une solution complète — d'un dossier, en passant par un groupe et un jeu de règles, jusqu'au code CSS/JS et un bouton d'action. Les conseils apparaissent sous forme de bulles à côté des éléments successifs du panneau.

Comment le lancer :

• Automatiquement — à la première ouverture du panneau, lorsque vous n'avez encore aucun dossier.
• Manuellement — à tout moment depuis le menu des réglages → Tutoriel.

Dans la fenêtre « Centre de tutoriels », vous choisissez un tutoriel et cliquez sur Commencer. Pendant le tutoriel :

• Les boutons Retour et Suivant passent d'une étape à l'autre ; la barre en bas de la bulle indique la progression.
• Certaines étapes attendent que vous effectuiez l'action indiquée — p. ex. cliquer le bouton mis en évidence.
• Les étapes avec du code d'exemple ont un bouton Copier.
• La touche Échap ou le bouton × ferme le tutoriel à tout moment.

Interface et navigation

Mode édition

Accessible via un clic droit sur l'icône de l'extension → « Options », ou un clic sur l'icône → bouton « Panneau d'édition ».

• Logo en haut de la barre latérale — le logotype complet justzix (sigle + wordmark Inter). Il bascule automatiquement entre la variante claire et sombre selon le mode de l'application (SVG inline + variables CSS, sans remplacer de fichier). Un clic sur le logo ouvre le Tableau de bord.
• Section « Dossiers » — sous le logotype : libellé « DOSSIERS » + bouton d'ajout de dossier, champ de recherche, filtre « Uniquement actifs ».
• Arborescence des dossiers — dossier ▶ groupe ▶ règle. La flèche de déploiement bascule l'état. Un clic sur une règle ouvre l'édition de cette règle uniquement.
• Menu Paramètres (drop-up en bas de la barre latérale) — un seul bouton ouvrant un panneau d'options : Mode sombre, Manuel d'utilisation, Export des paramètres, Import des paramètres, Importer depuis une URL, Synchronisation cloud, Mes partages, AI Helper, Site du projet, choix de la langue, indicateur de quota de stockage ainsi que le numéro de version de l'extension. Se ferme avec Échap ou un clic en dehors du panneau.
• Barre du dossier — libellé du bouton (3 lettres), couleur, nom, motif d'URL, options du panneau d'action, export/import, suppression.
• Cartes de règles — chacune avec 3 onglets : CSS JavaScript Actions.
• Barre de fil d'Ariane — dans l'éditeur de dossier, de groupe et de règle, elle affiche le chemin de navigation ; tout à gauche se trouve l'icône « maison » — un retour rapide au Tableau de bord.
• Redimensionnement de l'éditeur — la barre sous chaque éditeur (CSS et JS) peut être tirée vers le bas pour agrandir la zone de travail.
• Bascule de la barre latérale — une barre verticale entre la barre latérale et l'éditeur masque le panneau de gauche pour gagner de la place.

Bouton flottant (sur les pages correspondantes)

Un petit bouton rond apparaît automatiquement sur les pages correspondant à n'importe quel dossier. Par défaut il affiche le texte ZIX, mais chaque dossier peut avoir son propre libellé.

Libellé du dossier : dans la barre du dossier, à l'extrême gauche (à côté du sélecteur de couleur) se trouve un champ de texte pour le libellé du bouton. Limites imposées : 3 caractères max, toujours en MAJUSCULES (la conversion en majuscules se fait immédiatement pendant la saisie). Le champ accepte lettres et chiffres — exemples : ZIX, QA, DEV, ADM, X. Lorsque plusieurs dossiers correspondent, le libellé est pris du premier qui en a un de défini ; les autres sont ignorés (champ vide = repli sur ZIX).

État indiqué par la couleur (palette de marque) :

• Inject Green (ou couleur du dossier si définie) — tous les dossiers correspondants sont activés
• Syntax Orange (ou couleur atténuée du dossier) — certains activés, certains désactivés
• Muted Gray — tous désactivés
• Halt Red (avec opacité 0,7) — l'extension est désactivée globalement

Couleur du dossier : si vous définissez le sélecteur de couleur sur un dossier, le bouton flottant sur les pages correspondantes prendra cette couleur. Les états « mixte » et « off » modulent automatiquement la saturation. Lorsque plusieurs dossiers correspondent, la couleur du premier dossier ayant une couleur définie est utilisée.

Tableau de bord

En accédant au panneau d'édition, l'extension ouvre le Tableau de bord — une page d'accueil avec un récapitulatif de la bibliothèque et des raccourcis rapides. Auparavant, le panneau sélectionnait automatiquement le premier dossier de la liste ; vous voyez désormais une vue d'ensemble à la place.

Le Tableau de bord est accessible par un clic sur le logo dans la barre latérale et par l'icône « maison » de la barre de fil d'Ariane de chaque éditeur (dossier, groupe, règle). L'en-tête du Tableau de bord lui-même possède également une icône « maison » — son clic actualise les données (recharge la bibliothèque depuis le stockage et reconstruit le Tableau de bord).

Le Tableau de bord est organisé en rangées fixes de cartes :

• Bibliothèque — un inventaire : le nombre de dossiers, groupes, règles, actions, barres d'action, fenêtres in-page ainsi que les règles avec CSS et les règles avec JS.
• Statistiques d'utilisation — des compteurs réels : clics d'action, applications de CSS, exécutions de JS et affichages de fenêtres. Les valeurs sont cumulées sur tous les appareils appairés (via la synchronisation cloud).
• Règles récemment modifiées — une liste des 6 dernières règles maximum (triées par date de modification) ; un clic ouvre la règle dans l'éditeur.
• Astuce — un conseil aléatoire tiré du manuel ; le pool compte 30 astuces, entre lesquelles vous passez avec les boutons « précédente » / « suivante ». À côté se trouve un lien vers le manuel complet.
• Derniers exemples — les exemples les plus récents de la bibliothèque justzix.com (avec leur catégorie et leur date d'ajout).
• Du blog — les derniers articles de blog du site du projet.
• État de l'extension — une rangée de trois cartes : la version installée (avec l'information indiquant si une plus récente est disponible), l'utilisation de chrome.storage.local ainsi que la date de la dernière sauvegarde cloud.

Les cartes « Derniers exemples » et « Du blog » récupèrent leur contenu depuis le site du projet ; lorsque le point de terminaison est indisponible (par ex. hors ligne), les deux cartes sont masquées. La version de l'extension est revérifiée à chaque ouverture du tableau de bord.

Arborescence des dossiers (barre latérale)

Le panneau de gauche en mode édition affiche les dossiers de manière hiérarchique — on peut déployer chaque dossier pour voir ses règles et accéder à l'édition d'une règle précise.

Navigation

Réorganisation (glisser-déposer)

Survolez un dossier, un groupe ou une règle — une poignée de glisser-déposer apparaît à gauche. Saisissez à la souris et faites glisser :

Dossiers

• Dossier → dossier — réorganisation (une ligne bleue indique l'emplacement d'insertion : au-dessus ou en dessous de l'élément)

Groupes

• Groupe → groupe (même dossier) — réorganisation dans le dossier
• Groupe → groupe (autre dossier) — déplacement du groupe entre les dossiers
• Groupe → nom de dossier — déplacement du groupe à la fin du dossier cible

Règles

• Règle → règle (même groupe) — réorganisation au sein du groupe
• Règle → règle (autre groupe) — déplacement de la règle entre les groupes en conservant la position
• Règle → nom de groupe — déplacement de la règle à la fin du groupe cible
• Règle → nom de dossier — déplacement de la règle dans le premier groupe du dossier (quand le dossier a plusieurs groupes)

Bascule de la barre latérale

Une barre verticale entre la barre latérale et l'éditeur masque le panneau de gauche — utile quand vous avez besoin de plus de place pour l'éditeur. L'état est mémorisé entre les sessions. Après affichage/masquage, CodeMirror met automatiquement à jour sa largeur.

Redimensionnement des éditeurs

Sous chaque éditeur (CSS, JS, code d'action) se trouve une barre horizontale avec une poignée à tirer verticalement. Saisissez à la souris et tirez vers le bas pour agrandir l'éditeur. Hauteur min. 80 px, max. illimitée — la page défile naturellement avec son contenu.

Recherche dans les éditeurs de code

Au-dessus de chaque éditeur de code CodeMirror — CSS et JavaScript dans la carte de règle ainsi que le « Code JS » dans l'éditeur d'action — se trouve une barre de recherche : un champ de texte et un bouton avec une icône de loupe.

• Une fois la recherche lancée, tous les fragments trouvés sont surlignés — l'occurrence courante en jaune (texte noir), les autres en bleu (texte blanc).
• À côté du champ apparaît un compteur d'occurrences au format n / total.
• Quand il y a plus d'une occurrence, des flèches ▲ ▼ apparaissent pour passer d'un résultat à l'autre. L'occurrence courante est défilée jusqu'à devenir visible.
• Éditer le code invalide les résultats — il faut relancer la recherche.

Raccourcis

Motifs d'URL

Un motif d'URL définit sur quelles pages le dossier s'active.

États des règles (Actif / Activé)

Chaque règle a deux indicateurs indépendants :

Cascade des interrupteurs

Bascule du dossier  →  change le statut « activé » de toutes les règles actives de ses groupes
Bascule du groupe   →  change le statut « activé » de toutes les règles actives de ce groupe
Bascule de la règle →  change uniquement le statut « activé » de cette règle

Les règles avec Actif : NON (badge ○) sont ignorées lors des cascades — vous les pilotez uniquement manuellement, indépendamment de l'état du dossier et du groupe.

Exemples pratiques

Bouton flottant et panneau

Dans le panneau déroulant (clic droit) vous pouvez :

• Activer/désactiver des dossiers individuels
• Activer/désactiver des groupes individuels (quand le dossier a plus d'un groupe)
• Activer/désactiver des règles individuelles dans le dossier
• Activer/désactiver des barres d'action — la section « Barres d'action » sous la liste des règles, une case à cocher par barre, modifie actionBar.enabled (persistant, se propage au panneau d'édition)
• Déconnecter des barres — la section « Connexions » apparaît quand le bouton flottant est collé à des barres (snap & connect), boutons « Déconnecter de : X » + « Tout déconnecter »

Le panneau n'affiche que les règles actives (●) — les indépendantes (○) sont masquées pour la concision. Quand le dossier n'a qu'un seul groupe nommé « Par défaut », l'en-tête de groupe est omis — on voit uniquement les règles.

Widget du popup (icône de l'extension)

Un clic sur l'icône JustZix dans la barre des extensions de Chrome ouvre le widget du popup — un panneau de contrôle compact pour l'onglet courant. De haut en bas :

• Panneau d'édition — bouton ouvrant le mode édition (la page d'options) dans un nouvel onglet.
• Plugin enabled — grand interrupteur de l'activation globale de l'extension (vert = activée, gris = désactivée).
• Mode édition de la barre — interrupteur du mode édition de la barre d'action pour l'onglet courant.
• AI Helper — interrupteur qui ouvre / ferme la fenêtre de l'assistant IA sur l'onglet courant.
• Adresse URL de l'onglet courant.
• Liste des dossiers correspondant à la page — une case à cocher activant/désactivant chaque dossier ainsi qu'une icône « eye-off » masquant le bouton flottant pour cette page.
• Barres d'action — section avec une case à cocher par barre (persistant actionBar.enabled).
• Restaurer le bouton flottant — lien qui apparaît quand le bouton a été masqué pour la page courante.

Barres d'action (ActionBars)

Dans un même espace de travail vous pouvez avoir plusieurs barres d'action — chacune avec son propre nom, orientation, couleur de fond, son propre jeu de boutons et une position indépendante par fenêtre de navigateur. Une barre peut être assignée à un dossier, un groupe ou une règle individuelle (cela détermine la visibilité et la cascade).

Création et édition d'une barre

Dans l'éditeur de dossier, de groupe ou de règle se trouve un bouton « Barres d'action (N) ». Un clic ouvre la fenêtre modale de gestion des barres. Dans la modale :

• Ajouter une barre — vous choisissez le niveau d'assignation (dossier / groupe / règle du contexte courant)
• Nom (6 caractères max en MAJUSCULES) — un onglet optionnel avec le nom dépasse au-dessus du bord de la barre
• Orientation — horizontale ou verticale
• Couleur de fond — sélecteur de couleur (palette de marque JustZix)
• Activée — quand décochée, la barre n'est pas rendue du tout (pas seulement masquée visuellement). L'état est enregistré dans le stockage, indépendant de la position par fenêtre

Visibilité héritée vers le bas

• La barre d'un dossier est visible pour toutes les règles actives de ce dossier (elle agrège leurs actions via barId).
• La barre d'un groupe — uniquement pour les règles de ce groupe.
• La barre d'une règle — uniquement quand la règle est active.
• Une barre sans aucune action visible et activée dans une branche donnée n'est pas rendue du tout.

Assignation d'une action à une barre

Chaque action dans l'onglet « Actions » de la carte de règle a un menu déroulant « Barre d'action » — vous choisissez la barre cible dans la liste de celles visibles pour cette règle (barres propres de la règle + barres du groupe + barres du dossier).

Collage des barres (snap & connect)

Pendant le glissement d'une barre, l'extension détecte les bords des barres voisines et du bouton flottant à une distance ≤ 12 px. Un indicateur visuel d'accrochage apparaît, et au relâchement les barres se connectent en un groupe de connexions. Ensuite :

• Les barres connectées se déplacent ensemble (déplacement de groupe).
• Le bouton flottant JustZix peut aussi participer aux connexions (__float comme pseudo-barre).
• Les connexions sont mémorisées par fenêtre dans la mémoire de session.

Clic droit sur la poignée de glissement d'une barre → menu contextuel :

• Masquer cette barre (jusqu'au rechargement) — masquage runtime par fenêtre de navigateur. La barre revient après F5 / changement d'URL / fermeture et réouverture de l'onglet. Désactivation permanente : voir Afficher/masquer les barres plus bas.
• Déconnecter de : X () — apparaît pour chaque connexion voisine.
• Déconnecter toutes les connexions () — quand la barre est connectée à plus d'une autre.

En mode édition de la barre, ce menu est désactivé ; le clic droit sur une étiquette donne alors l'option « Supprimer l'étiquette ».

Afficher/masquer les barres — depuis 3 endroits

Pour activer/désactiver de manière permanente les barres d'action (sans F5), l'extension offre trois points d'entrée, tous mappés sur le même actionBar.enabled du stockage — un changement depuis un endroit se propage au panneau d'édition et aux autres interfaces :

1. Panneau flottant (clic droit sur le bouton flottant principal de JustZix) — section « Barres d'action » sous la liste des dossiers/groupes/règles. La case à cocher par barre montre l'état persistant. Clic → bascule de actionBar.enabled.
2. Widget du popup (clic sur l'icône de l'extension à côté de l'adresse) — section « Barres d'action » sous la liste des dossiers. Plus une petite icône « eye-off » par dossier — elle masque le bouton flottant pour la page courante (restauration via le lien « Restaurer le bouton flottant »).
3. chrome.contextMenus (clic droit sur la page → JustZix → Barres d'action) — un sous-menu dynamique avec une case à cocher par barre. La liste est reconstruite par onglet actif et à chaque changement d'état.

Mode édition de la barre — disposition libre

Le mode édition de la barre d'action s'active de trois manières : par le raccourci Ctrl+Alt+S (fonctionne depuis n'importe quel endroit de la page), par l'interrupteur dans le widget du popup de l'extension, et depuis le menu contextuel de Chrome (clic droit → « Mode édition de la barre d'action »). En haut de l'écran apparaît une barre d'information ; utiliser de nouveau l'un des interrupteurs quitte le mode.

En mode édition, le fonctionnement normal des éléments est suspendu (le clic ne déclenche pas de code, les champs n'acceptent pas le focus) — à la place les éléments peuvent être disposés et redimensionnés :

• Sélection — clic = un seul élément ; Ctrl+clic = ajouter/retirer de la sélection ; clic dans le vide ou Esc = tout désélectionner. Shift+glissement sur une zone vide = sélection par zone (rectangle).
• Déplacement — glissement de la sélection à la souris. Plusieurs éléments sélectionnés se déplacent ensemble.
• Redimensionnement d'un élément — avec une sélection unique, un cadre apparaît avec 8 poignées (4 coins + 4 bords).
• Redimensionnement de la barre — la barre a des poignées sur le bord droit, le bord inférieur et au coin (redimensionnement du canevas).
• Étiquettes — le bouton « + Label » au-dessus de la barre ajoute une étiquette de texte statique au premier emplacement libre. Un double-clic sur une étiquette ouvre l'éditeur (texte, police, taille, couleur, « Supprimer »). Les étiquettes se déplacent et se redimensionnent comme les éléments d'action.
• Suppression des étiquettes — la touche Delete supprime toutes les étiquettes sélectionnées d'un coup ; le clic droit sur une étiquette donne l'option « Supprimer l'étiquette » ; il y a aussi un bouton « Supprimer » dans l'éditeur d'étiquette. Les éléments d'action se suppriment dans le panneau d'édition (ils appartiennent aux règles).
• Réinitialisation de la barre — le bouton « Réinitialiser la barre » au-dessus de la barre restaure la disposition par défaut (flow) : il supprime les positions et tailles personnalisées des éléments ainsi que toutes les étiquettes (avec confirmation).
• Annulation — Ctrl+Z annule le dernier changement (déplacement, redimensionnement, ajout/édition/suppression d'étiquette, réinitialisation). L'historique couvre la session d'édition courante.

Le mode édition est « strict » : le déplacement et le redimensionnement s'accrochent à une grille de 8 px, un élément ne peut pas être sorti de la barre ni posé sur un autre — en cas de collision, les deux éléments (celui déplacé et celui en dessous) reçoivent un cadre rouge, et au relâchement l'élément revient à sa place précédente. La barre ne peut pas être réduite au point qu'un élément se retrouve à l'extérieur ; quand un nouvel élément ou une étiquette ne tient pas dans la barre, le canevas de la barre s'agrandit automatiquement. Le clic droit sur la barre en mode édition n'affiche pas le menu « masquer/déconnecter la barre ».

Modes de disposition de la barre : la barre démarre en mode flow (flexbox classique — éléments les uns après les autres, verticalement ou horizontalement). Le premier déplacement ou redimensionnement d'un élément convertit la barre en mode custom (canevas avec positionnement libre) — visuellement sans changement, car la disposition courante est capturée comme point de départ.

Types d'action : BUTTON / SELECT / INPUT / SLIDER / TEXTAREA / TOGGLE3

Chaque action a un type — choisi via un menu déroulant au début de chaque action dans la carte de règle. 6 types sont disponibles :

Les étiquettes de texte statiques ne sont pas un type d'action — on les ajoute directement sur la barre en mode édition (voir « Mode édition de la barre » → étiquettes).

Champs communs

• Label — 6 caractères max (majuscules, monospace). Affiché sur le bouton, comme placeholder de l'INPUT/TEXTAREA, ou comme onglet au-dessus du SELECT/SLIDER/TOGGLE3.
• Couleur — sélecteur de couleur (fond de l'élément ; pour TOGGLE3 = fond de l'état actif).
• Seconde couleur (colorText) — sélecteur à côté du premier, plus un champ hex avec ctrl+C/V natif. Sémantique par type :
  • BUTTON / SELECT (face) / INPUT / TEXTAREA — couleur du texte
  • SLIDER — couleur de la barre (accent-color du curseur) ; le texte du libellé et de la valeur sont des champs séparés (voir « Couleurs granulaires » plus bas)
  • TOGGLE3 — couleur du texte de l'état actif
  Chaque sélecteur a un bouton × qui restaure la valeur par défaut (vide = le moteur de rendu se replie sur le CSS par défaut — généralement le blanc).
• Barre d'action — menu déroulant assignant l'action à une ActionBar précise.
• Visibilité — la case à cocher « visible » permet de masquer rapidement sans supprimer.
• Raccourci clavier — cliquez et appuyez sur une combinaison (les raccourcis réservés par Chrome sont signalés).
• Code JS — exécuté à l'activation. Variables disponibles : value, $el (élément DOM), $action ({ id, label, type, el }) ; pour TOGGLE3 en plus stateIdx (0-2) et stateLabel.

SELECT — modale des options

Un clic sur « Options (N) » dans la carte d'une action de type SELECT ouvre une modale :

• Variant : static (options configurées ici) ou js (le code remplit un <select> natif).
• Liste des options pour static : chaque ligne est un { name, value }. name = ce que voit l'utilisateur, value = ce qui arrive au JS comme variable value.
• Couleurs granulaires du menu déroulant — communes aux deux variantes :
  • colorDropdownBg — fond du panneau popup (static) + fond des <option> (variante js)
  • colorOption — couleur du texte du nom de l'option dans le menu déroulant
  • colorSelected — fond de l'option choisie (static ; en js, spécifique au navigateur)
  • colorHover — fond de l'option sous le curseur (static)
• ID stable de l'action — l'action.id complet avec un bouton de copie + un exemple de sélecteur JS.

INPUT — modale de configuration

• Placeholder — texte visible avant la saisie.
• Default value — valeur initiale (quand aucune entrée n'existe en mémoire).
• colorPlaceholder — couleur du texte du placeholder (via une variable CSS car le pseudo-élément ::placeholder n'est pas stylisable en inline).
• ID stable de l'action + exemple de sélecteur JS.

SLIDER — modale de configuration

• Min / Max — plage numérique (par ex. 0–100). Requis : min < max.
• Step — pas (par ex. 1, 5, 0.1). Par défaut 1.
• Default value — valeur initiale (quand aucune mémoire). Par défaut (min+max)/2.
• Unit — unité affichée après la valeur (par ex. « px », « % »). Optionnelle.
• colorLabel — couleur du libellé à gauche de la barre.
• colorValue — couleur du nombre+unité à droite.
• Code JS — exécuté sur change (relâchement de la souris / Tab / Enter). value = valeur numérique.

TEXTAREA — modale de configuration

• Placeholder / Default value — comme pour INPUT (la valeur initiale peut contenir des \n pour les sauts de ligne).
• Rows — nombre de lignes visibles (1-20, par défaut 3). Détermine la hauteur du champ.
• colorPlaceholder — comme pour INPUT.
• Code JS — exécuté sur change (blur, PAS Enter — Enter dans une textarea est un vrai saut de ligne). L'utilisateur sort du champ → la valeur est enregistrée et le code déclenché. value = chaîne avec sauts de ligne.

TOGGLE3 — modale de configuration

• 3 états — exactement 3, chacun avec les champs label (5 caractères max, majuscules) et value (chaîne transmise au code comme value). Libellés par défaut : OFF / MID / ON.
• Default state — un bouton radio à côté de chaque état indique lequel est initial (quand aucune mémoire). Par défaut 0.
• colorBg — fond du conteneur wrap (tout le contrôle segmenté).
• colorHover — fond au survol d'un bouton inactif.
• colorInactiveText — couleur du texte des états inactifs (l'état actif utilise colorText).
• Code JS — exécuté à chaque changement d'état (clic sur un état inactif). Variables : value (state.value, repli sur state.label), stateIdx (0-2), stateLabel, $el (le div conteneur).

Mémoire persistante (SELECT, INPUT, SLIDER, TEXTAREA, TOGGLE3)

Le choix / la valeur / la position du curseur / le contenu de la textarea / l'état actif du toggle3 sont automatiquement mémorisés par action. Après F5 la valeur revient ; après fermeture de l'onglet et sa réouverture (sur une page correspondant à la règle) aussi. Singleton par action.id — une valeur unique indépendante de l'URL précise.

Format des valeurs en mémoire par type :

• SELECT (les deux variantes), INPUT, TEXTAREA → chaîne
• SLIDER → nombre (ou chaîne numérique après un aller-retour avec le stockage)
• TOGGLE3 → entier 0-2 (l'INDEX de l'état actif, pas la value)

Stockage :

• Principal : sessionStorage — synchrone, résistant au F5, par onglet.
• Sauvegarde : chrome.storage.local.actionMemory[id] — inter-onglets, durable.

Pas de synchronisation entre appareils : la mémoire reste locale. Deux ordinateurs peuvent avoir des valeurs différentes (par ex. un filtre différent par utilisateur).

ID stable de l'action

Chaque action a un action.id immuable (format a_<base36>_<random>). Dans la carte de règle, à côté de chaque action se trouve un badge avec le numéro de ligne — un clic copie l'ID complet dans le presse-papiers, l'infobulle affiche l'ID complet.

Dans le user-JS, référez-vous via data-jz-action-id :

const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');
el.value = 'nouvelle valeur';
el.dispatchEvent(new Event('change'));

Ou via les helpers window.JZ — voir Appel programmatique des actions depuis le JS.

Menu contextuel de Chrome

Clic droit sur n'importe quelle page → JustZix :

• Activer/désactiver le bouton flottant pour cette page — bascule la visibilité du bouton flottant principal (comme « eye-off » dans le popup).
• Mode édition de la barre d'action (activer/désactiver) — bascule le mode édition de la barre sur l'onglet actif ; troisième point d'entrée à côté du raccourci Ctrl+Alt+S et de l'interrupteur du popup.
• AI Helper (activer/désactiver) — ouvre ou ferme la fenêtre de l'assistant IA sur l'onglet actif.
• Barres d'action ▸ — sous-menu avec une case à cocher par barre. La liste contient uniquement les barres pertinentes pour l'onglet actif. La case à cocher = état persistant actionBar.enabled.
• Fenêtres CSS ▸ / Fenêtres JS ▸ / Consoles JS ▸ / Consoles Output ▸ — sous-menus analogues pour chacun des 4 types de fenêtres sur la page (voir la section plus bas). La case à cocher = état activé par fenêtre.
• Fenêtre temporaire (TEMP) ▸ — sous-menu avec 4 entrées : panneau TEMP CSS / panneau TEMP JS / Console TEMP JS / Console TEMP Output. Clic = bascule (créer ou fermer). Fonctionne sur n'importe quelle page, indépendamment de la correspondance d'un dossier.

Les sous-menus de fenêtres se reconstruisent sur : tabs.onActivated, tabs.onUpdated (changement d'URL) et storage.onChanged pour folders/groups/rules/actionBars/cssPanes/jsPanes/jsConsoles/outputConsoles/floatingHidden. Le sous-menu TEMP est statique (toujours 4 entrées).

Fenêtres sur la page (CSS / JS / Consoles)

L'extension propose quatre types de fenêtres flottantes injectées sur les pages, à côté des barres d'action. Chaque fenêtre est assignée à un dossier, un groupe ou une règle (elle hérite de la visibilité en cascade, comme les barres d'action) et apparaît sur les pages correspondant par l'URL.

Gestion : dans l'éditeur de dossier / groupe / règle vous trouverez un bouton « Fenêtres ▾ (N) ». Un clic déploie un menu avec les 4 types — vous choisissez un type, une modale s'ouvre avec la liste des fenêtres de ce niveau (plus les fenêtres héritées des niveaux supérieurs). Vous ajoutez, nommez, colorez, supprimez.

CSS pane

Fenêtre flottante avec un champ de texte pour le CSS. Chaque changement (après une courte pause) met à jour le <style> injecté — vous voyez l'effet en direct. Le contenu est mémorisé par onglet de navigateur (il survit au F5, disparaît à la fermeture de l'onglet). Idéal pour tester rapidement du CSS sans l'enregistrer dans une règle.

JS pane

Champ de texte pour du JavaScript exécuté dans le contexte de la page. Le code s'exécute après un changement (avec un délai) ou manuellement via le bouton ▶ Run / le raccourci Ctrl+Enter. Les erreurs d'exécution s'affichent dans une barre rouge sous le code. Quand le code a changé depuis la dernière exécution, le bouton Run s'éclaire en jaune (état « dirty »).

JS Console (REPL)

Une console à part entière dans la page. Vous saisissez du code dans le champ du bas, Ctrl+Enter (ou ▶) l'exécute, le résultat s'ajoute à la zone de journaux au-dessus. Fonctions :

• Historique des commandes — les flèches ↑/↓ sur la première/dernière ligne de l'input font défiler les commandes précédentes (comme dans un terminal).
• Ctrl+L — efface la sortie.
• Interception de console.* — les appels console.log/warn/error/info pendant l'exécution sont affichés dans le journal (colorés selon le type).
• Lignes colorées : commande (bleu), résultat (clair), erreur (rouge), console.log (gris), console.warn (jaune).

L'input, la sortie et l'historique sont mémorisés par onglet. La console exécute le code dans le MAIN world de la page — vous avez accès à toutes les variables et fonctions de la page.

Output Console

Un aperçu des journaux en lecture seule — il intercepte automatiquement tout ce qui se passe sur la page : console.log/warn/error/info/debug, les exceptions non capturées, les rejets de Promise non gérés, le trafic réseau ainsi que les pushes dans dataLayer, et aussi votre propre logger window.JUSTZIX.*. Contrairement à la JS Console (où vous saisissez vous-même le code) — ici les journaux affluent d'eux-mêmes.

Six onglets avec compteurs

La fenêtre est divisée en 6 onglets, chacun avec un compteur d'entrées (badge) :

Barre de filtres contextuels

Entre les onglets et le champ de recherche se trouve une barre de filtres qui change selon l'onglet sélectionné :

• All — pas de filtres supplémentaires.
• JZconsole / Console — cases à cocher des niveaux : log, info, warn, error, debug. Décochez un niveau → les lignes disparaissent de l'aperçu.
• Network — trois rangées : type de ressource (document, script, stylesheet, image, xhr/fetch, font, …), classe de statut HTTP (2xx/3xx/4xx/5xx) ainsi que des curseurs de plage de taille et de durée (0–100000 ms) plus un champ de filtrage par domaine. Les rangées de cases à cocher ont des raccourcis tout sélectionner / tout désélectionner.
• Errors — pas de cases à cocher ; vous déployez chaque erreur pour voir les détails.
• DataLayer — la fenêtre se divise en deux (voir plus bas).

Recherche

Sous la barre de filtres, un champ de recherche est toujours visible. Il filtre les entrées de l'onglet actif en direct (correspondance partielle, sans tenir compte de la casse). Esc efface le champ.

Journaux de console — déroulables comme dans les DevTools

Les entrées console.* sont par défaut repliées — elles montrent un aperçu abrégé (par ex. [PickupMap][2026-05-16T15:25Z] AUTO_SELECTION_SKIPPED: {reason: 'Lower priority source', …}). Un clic déploie les arguments complets (objets/tableaux comme arbre JSON déroulable), comme dans la console des DevTools.

Onglet Network

Network intercepte les requêtes via chrome.webRequest (permission webRequest dans le manifeste). Chaque entrée montre entre autres la méthode, l'URL, le statut, le type de ressource, la taille, la durée, l'adresse distante (Remote address) et l'initiateur (Initiator). Un buffer de requêtes est maintenu en arrière-plan, donc les entrées antérieures à l'ouverture de la fenêtre apparaissent aussi.

Onglet DataLayer

La fenêtre DataLayer est divisée en deux colonnes :

• Gauche — Nouveaux pushes : le flux des appels successifs dataLayer.push(...) dans l'ordre des événements.
• Droite — État actuel : le contenu en direct de l'objet window.dataLayer comme arbre JSON indexé (0:, 1:, …) déroulable — vous descendez dans les données imbriquées, comme dans l'inspecteur d'objet des DevTools. L'instantané se met à jour après chaque push. Dans l'en-tête de la colonne de droite se trouvent des boutons tout déployer / tout replier — ils agissent récursivement sur tout l'arbre.

Les clics sur l'interface propre de JustZix (déploiement des nœuds de l'arbre, boutons de la fenêtre) ne sont pas transmis à cet onglet. Si la page collectait les événements click (par ex. l'auto-event de GTM), un clic dans la fenêtre générerait un push vers dataLayer et réinitialiserait le déploiement de l'arbre — l'extension reconnaît ces pushes et ne les rapporte pas (le véritable window.dataLayer de la page reste intact).

Logger personnalisé — window.JUSTZIX

L'Output Console expose une API globale pour journaliser depuis votre code (JS pane, actions, code de la page) :

JUSTZIX.log('journal ordinaire');
JUSTZIX.warn('avertissement');
JUSTZIX.error(new Error('erreur'));   // affichera la stack trace
JUSTZIX.info({ obj: 1, arr: [2,3] });
JUSTZIX.debug('détails');             // masqué par défaut (filtre)

Alias disponibles :

• window.JUSTZIX — le principal, fonctionne toujours
• window.__JUSTZIX__ — alias toujours disponible
• window.JZ — alias uniquement si la page n'a pas son propre window.JZ (certaines pages, par ex. Google Ads, occupent ce nom)

Après l'apparition de l'Output Console, vous verrez dans le journal une ligne de bienvenue indiquant quel alias est disponible sur cette page.

Ce qui est intercepté

• console.log/warn/error/info/debug(...) de la page — ils passent aussi par la console normale des DevTools (nous ne les bloquons pas)
• window.JUSTZIX.*(...) — votre canal dédié (il ne va pas aux DevTools)
• Exceptions non capturées (throw new Error(...)) — affichées en rouge avec l'emplacement de l'erreur
• Rejets de Promise non gérés — Promise.reject(...) sans .catch

Les erreurs des requêtes fetch/XHR ne vont pas dans l'onglet Errors (ce ne sont pas des exceptions JS) — vous les trouverez dans l'onglet Network via le statut 4xx/5xx. Nous n'interceptons pas les violations de CSP ni les avertissements internes de Chrome.

Aide rapide — Ctrl+Shift+H

Ctrl+Shift+H ouvre une fenêtre déplaçable d'aide rapide — un guide pour utiliser JustZix sur la page : raccourcis globaux, raccourcis dans les fenêtres, la Console Output, manipulation des fenêtres à la souris, le mode édition de barre et la journalisation vers la Console Output. Elle fonctionne sur n'importe quelle page. Vous faites glisser la fenêtre par son en-tête ; Esc / clic en dehors / × / nouveau Ctrl+Shift+H la ferme.

Personnalisation de l'apparence de la fenêtre

Couleurs : dans la modale de gestion (panneau d'édition), chaque fenêtre a un sélecteur de couleur — le point de l'en-tête, le fond et le texte de l'en-tête, le fond et le texte du corps, la couleur des boutons d'action.

Police et taille : clic droit sur la barre d'en-tête de la fenêtre → menu avec choix de police (Consolas, Menlo, Monaco, Courier New et autres monospace) ainsi que de taille (10–24 px).

Glisser-déposer, accrochage et connexion

Chaque fenêtre se fait glisser par sa barre d'en-tête. En rapprochant le bord d'une autre fenêtre / barre d'action / bouton flottant (≤ 12 px), un accrochage magnétique apparaît — les fenêtres se collent en un groupe. Faire glisser un groupe collé déplace tous les éléments ensemble. Les positions sont mémorisées par fenêtre de navigateur.

Redimensionnement de la fenêtre

Chaque fenêtre a 8 poignées de redimensionnement : 4 aux coins (changement de largeur et de hauteur en même temps) et 4 sur les bords (changement d'un seul axe). La poignée tirée maintient le bord opposé en place. Plage : largeur 180–1200 px, hauteur 120–900 px. La nouvelle taille (pane.size) est enregistrée — pour les fenêtres permanentes synchronisée entre les appareils, pour les fenêtres TEMP par onglet.

Défilement à l'intérieur de la fenêtre

Le défilement avec la molette de la souris à l'intérieur d'une fenêtre fait défiler uniquement le contenu de cette fenêtre — la page en dessous ne défile pas. Cela s'applique également lorsque la zone de la fenêtre atteint la fin du défilement ou lorsque le curseur se trouve au-dessus d'une partie non défilable (l'en-tête, la barre de filtre).

Clic droit sur l'en-tête de la fenêtre

• Mettre devant / Mettre derrière — modifier l'ordre des fenêtres quand elles se chevauchent (saut unique au-dessus / en-dessous de tous les voisins qui se chevauchent).
• Déconnecter de : X / Déconnecter toutes les connexions — quand la fenêtre est collée.
• Fermer la fenêtre [type] — masque la fenêtre (on peut la réactiver depuis le panneau / le popup).
• Police / Taille — choix de la police et de la taille du texte.

Bouton de fermeture et double-clic sur l'en-tête

Chaque fenêtre (aussi bien temporaire TEMP que persistante) a un bouton × de fermeture dans le coin droit de l'en-tête. Les TEMP sont masquées (réouverture via le menu contextuel de la page ou un raccourci), les persistantes — désactivées (réactivation via une case à cocher dans le popup). Double-clic sur la barre d'en-tête :

• Persistantes (CSS pane / JS pane / JS Console / Output Console) — replient / déplient la fenêtre jusqu'à l'en-tête. État mémorisé.
• TEMP — bascule entre la taille mémorisée ↔ par défaut.
• AI Helper — bascule entre la taille mémorisée ↔ par défaut.

Collage et surlignage du bord

Quand le bord d'une fenêtre s'approche d'une autre fenêtre JustZix (seuil de 12 px), un bord rouge apparaît du côté du collage (sur les deux fenêtres). Relâcher le curseur dans cette position effectue le snap — les fenêtres se déplacent ensuite en groupe. Toutes les fenêtres de l'extension participent à ce mécanisme : barres d'action, FAB, panneaux persistants (CSS/JS/Console/Output), TEMP et l'AI Helper.

Panneaux TEMP — fenêtres temporaires

Vous pouvez créer une fenêtre temporaire sur n'importe quelle page — même une page pour laquelle vous n'avez aucun dossier. Les panneaux TEMP sont un outil rapide et ad hoc : vous testez du CSS/JS sur une page étrangère sans configurer de règles.

Caractéristiques des panneaux TEMP :

• Fonctionnent sur chaque page (ils ignorent la correspondance des dossiers)
• Mémorisés par onglet — ils survivent au F5, disparaissent à la fermeture de l'onglet. Ne se synchronisent pas entre les appareils.
• Couleur différente des fenêtres standard — orange (CSS), rouge (JS), rose (JS Console), cyan (Output) — tout le cadre de la fenêtre dans cette couleur.
• « TEMP » dans le nom.
• Croix rouge × dans le coin supérieur droit de l'en-tête — ferme la fenêtre. Les données (code, log, géométrie) restent dans la session — rouvrir une fenêtre du même type les restaure. Elles ne disparaissent qu'à la fermeture de l'onglet.
• Icône de corbeille dans l'en-tête de TEMP CSS / TEMP JS — efface le contenu de l'éditeur en un clic. L'effacement va dans l'historique d'annulation du navigateur (Ctrl+Z l'annule). Pour CSS, le <style> en direct est mis à jour immédiatement.
• Au maximum un exemplaire d'un type donné — un deuxième appui sur le raccourci ferme la fenêtre existante ; un troisième la rouvre avec le contenu préservé.
• Mémoire de taille (par appareil) — après le redimensionnement d'une fenêtre TEMP, sa dernière taille est mémorisée séparément pour chaque type (CSS / JS / Console JS / Output) dans le stockage de l'appareil. Elle survit à un redémarrage du navigateur et ne se synchronise pas entre les appareils. Une fenêtre TEMP nouvellement ouverte démarre à la taille par défaut (380×240).
• Double-clic sur l'en-tête = bascule de taille — un double-clic sur la barre d'en-tête d'une fenêtre TEMP la bascule entre la taille par défaut et la taille mémorisée.

Création / fermeture (bascule) :

• Ctrl+Alt+G — panneau TEMP CSS
• Ctrl+Alt+H — panneau TEMP JS
• Ctrl+Alt+J — Console TEMP JS
• Ctrl+Alt+K — Console TEMP Output
• ou : clic droit sur la page → JustZix → Fenêtre temporaire (TEMP) ▸

AI Helper — assistant IA

AI Helper est un assistant IA intégré à l'extension, qui aide à préparer et déployer une solution CSS/JS pour une tâche précise sur la page courante. Le modèle peut examiner la page, tester le code en direct dans des fenêtres TEMP et — après votre validation — créer un dossier, un groupe et une règle prêts à l'emploi.

Configuration des clés API

Dans le menu Paramètres de la barre latérale, l'entrée « AI Helper » ouvre une modale de configuration :

• Clés API pour trois fournisseurs : OpenAI, Anthropic et Gemini (Google). La clé d'un seul fournisseur suffit pour utiliser l'assistant.
• Fournisseur par défaut et modèle par défaut — utilisés à l'ouverture de la fenêtre de chat (le modèle peut aussi être récupéré automatiquement — le plus avancé disponible est alors choisi).
• À côté de chaque clé se trouve une case à cocher « synchroniser » (désactivée par défaut).

Fenêtre de chat

La fenêtre AI Helper est une fenêtre flottante (par onglet, comme les fenêtres TEMP — déplaçable, redimensionnable avec 8 poignées, croix de fermeture, une seule instance). Vous l'ouvrez / la fermez :

• par le raccourci Ctrl+Alt+\,
• par l'interrupteur « AI Helper » dans le widget du popup,
• depuis le menu contextuel de Chrome → JustZix → AI Helper.

Dans la fenêtre : choix du fournisseur (quand vous avez plus d'une clé) et du modèle (liste récupérée en direct), historique de conversation, bouton pour effacer la conversation ainsi qu'un champ de texte (envoi par bouton ou Ctrl+Enter). Le modèle reçoit automatiquement le contexte de la page courante — URL, titre et fragment HTML.

Workflow agentique

AI Helper mène la conversation selon un workflow établi :

1. Il demande des détails — la portée de l'URL, les noms du dossier/groupe/règle, les couleurs, l'objectif exact.
2. Il examine la page avec l'outil query_page (sélecteurs, structure du DOM) avant d'écrire du code.
3. Il insère le code CSS/JS préparé dans une fenêtre temporaire TEMP, que vous voyez en direct sur la page.
4. Il vérifie les erreurs lui-même — avec les outils read_temp_pane et read_console, il vérifie que le code testé ne signale aucune erreur avant de vous montrer le résultat.
5. Il demande de vérifier l'effet et demande explicitement si le test a réussi.
6. Quand le test échoue — il corrige le code et teste à nouveau.
7. Seulement après votre confirmation, il rend la solution permanente : crée un dossier → un groupe → une règle, et au besoin également une barre d'action et des actions. Chaque création d'entité nécessite une confirmation distincte dans l'extension.

Le modèle utilise les outils via un protocole texte simple (bloc @@JZ_TOOL@@ … @@END@@) fonctionnant de manière identique pour OpenAI, Anthropic et Gemini. Les appels d'outils et leurs résultats apparaissent dans la fenêtre comme des « puces » distinctes. Outils disponibles :

Apparence de la fenêtre AI Helper

Un clic droit sur la barre d'en-tête de la fenêtre AI Helper ouvre un menu avec les options « Mettre devant » / « Mettre derrière » (modifier l'ordre des fenêtres JustZix quand elles se superposent), « Déconnecter de : X » (quand AI Helper est collé à une autre fenêtre) et « Apparence… ». Le panneau « Apparence… » permet de styliser séparément quatre rôles dans la conversation : vos messages, réponses de l'IA, résultats des outils, formulaires intégrés — chacun avec sa propre police, taille, couleur de texte et de fond. Les valeurs sont enregistrées par appareil.

Collage avec d'autres fenêtres et ordre (Z-order)

La fenêtre AI Helper participe au même mécanisme de collage que les barres d'action, les fenêtres persistantes (CSS / JS / Console / Output) et les fenêtres TEMP. Glisser un bord près d'une autre fenêtre JustZix (seuil de 12 px) → attraction magnétique, un bord rouge indique le côté du collage sur les deux fenêtres. Les fenêtres collées se déplacent en groupe.

Quand les fenêtres se chevauchent, les options « Mettre devant » / « Mettre derrière » dans le menu contextuel de chaque fenêtre (clic droit sur l'en-tête) font un saut unique — la fenêtre passe au-dessus / en-dessous de tous les voisins qui se chevauchent, pas besoin de cliquer plusieurs fois.

Capture d'écran de la page (pour les modèles vision)

L'outil screenshot_page capture la vue actuelle de la page et l'envoie au modèle comme image. Toute l'interface de JustZix est automatiquement masquée avant la capture (FAB, barres d'action, AI Helper, panneaux persistants, TEMP). Un tampon des 3 captures les plus récentes, joint en une fois à la requête suivante (après envoi — supprimé du tampon, pour économiser les tokens). Nécessite un modèle compatible vision (par ex. gpt-4o, claude-3+/4, gemini-1.5+/2). Sous la puce de résultat dans le chat, une vignette s'affiche — un clic ouvre la vue en plein écran.

Raccourcis clavier

Globaux (fonctionnent depuis n'importe quel endroit de la page)

À l'intérieur d'une fenêtre (quand elle a le focus)

Éditeurs de code (panneau d'édition)

Export et import

L'extension propose cinq formats d'export (complet, partiel, dossier, groupe, règle) avec détection automatique du type de fichier à l'import, pour éviter un écrasement accidentel.

Export — complet ou des éléments sélectionnés

Dans le menu Paramètres de la barre latérale : Export des paramètres. La modale propose deux modes :

• Tout — exporte tous les dossiers, groupes, règles et paramètres globaux (bouton flottant, panneaux masqués, etc.)
• Sélectionné — affiche une arborescence dossier → groupes → règles avec des cases à cocher :
  • La case d'un dossier / groupe coche tous les éléments en dessous
  • L'état indéterminé (trait) montre une sélection partielle à chaque niveau
  • Boutons Tout sélectionner / Tout désélectionner pour une manipulation rapide
  • Un résumé en direct en bas montre ce qui sera exporté

Les fichiers d'export partiel portent le nom justzix-partial-DATE.json (vs. justzix-backup-DATE.json pour l'export complet), et contiennent un indicateur partial: true et un champ groups[].

Export d'un seul dossier (avec sélection)

Dans la barre du dossier : Export — ouvre une modale avec l'arborescence des groupes et règles (comme dans l'export partiel, mais limitée à ce dossier). Seules les règles sélectionnées et les groupes auxquels elles appartiennent sont exportés — les groupes vides ne sont pas inclus dans le fichier.

Format justzix-folder — le fichier contient un champ groups[] avec la hiérarchie des groupes et règles du dossier.

Export d'un groupe

Dans la barre du groupe : Export — une modale avec la liste des règles du groupe (cases à cocher). Fichier : justzix-grupa-<nom>-<date>.json, format justzix-group.

Export d'une seule règle

Dans la vue d'une règle : Export de la règle — télécharge immédiatement le fichier (sans modale). Format justzix-rule, nom : justzix-zestaw-<nom>-<date>.json.

Import — détection automatique du type (modale d'import complet)

Après le chargement d'un fichier / le collage du JSON, l'extension reconnaît automatiquement le type et affiche un panneau de détection coloré :

Modes d'import partiel (panneau violet)

• Fusionner avec l'existant (par défaut) — fait correspondre les dossiers par ID, ajoute les nouveaux ; les autres dossiers des paramètres actuels restent intacts.
  En cas de conflit d'ID apparaît un prompt avec 3 options :
  • 1 / nadpisz — écrase les dossiers existants (supprime leurs groupes et règles)
  • 2 / kopia (par défaut) — importer comme copies avec de nouveaux ID, « (import) » dans le nom du dossier, aucune perte de données existantes
  • Annuler — interrompt l'import
• Remplacer l'existant — efface tout et insère uniquement les éléments sélectionnés du fichier.

Import d'un seul dossier

Dans la barre du dossier : Import. Vérifie les conflits par ID et par nom :

• Importer comme nouveau — avec la mention « (import) » dans le nom
• Écraser — supprime les anciens groupes et règles du dossier et insère les nouveaux
• Fusionner — ajoute les nouveaux groupes / règles au dossier existant (en conservant les deux)

Import d'un groupe

Dans la barre du groupe : Import — accepte 3 formats :

• justzix-group — insère toutes les règles du groupe du fichier
• justzix-folder — insère toutes les règles de tous les groupes du dossier
• justzix-rule — insère une seule règle

Toutes les règles du fichier arrivent dans le groupe courant avec de nouveaux ID (l'opération est toujours du type « ajouter une copie » — aucun conflit).

Import d'une seule règle

Dans la vue d'une règle : Import de la règle — accepte uniquement justzix-rule. Prompt avec 3 options :

• 1 / zastap — remplace le contenu de la règle courante (id et groupId conservés)
• 2 / kopia (par défaut) — ajoute comme nouvelle règle à côté de la courante, dans le même groupe, avec la mention « (import) »
• Annuler — interrompt

Utilisations pratiques de l'export partiel

• Partage avec l'équipe — exportez 2-3 dossiers avec la configuration du projet, vos collègues les importent en mode « Fusionner » sans perdre leurs propres paramètres
• Sauvegarde des seules configurations importantes — par ex. la production reste, vous ignorez les expériences
• Migration partielle — transférez une seule règle entre les appareils
• Versionnement — exportez un dossier précis vers git avec la documentation du projet

Synchronisation cloud

Paramètres → Synchronisation cloud ouvre la modale du compte de synchronisation. L'extension conserve votre bibliothèque (dossiers, groupes, règles, actions, barres d'action, fenêtres in-page) dans le cloud justzix.com et la maintient cohérente entre les appareils. La synchronisation fonctionne uniquement lorsque vous êtes connecté — sans compte, l'extension fonctionne uniquement en local.

Compte et clé de synchronisation

• Inscription — l'extension génère une clé de synchronisation (le secret unique du compte). Conservez-la en lieu sûr — c'est le seul moyen de se connecter sur un autre appareil.
• Connexion — vous collez la clé de synchronisation ainsi qu'un libellé d'appareil facultatif (par ex. « Ordinateur portable du travail »). Vous pouvez décider si la clé est mémorisée dans le stockage de l'extension ou conservée uniquement pour la session.
• Une adresse e-mail peut être rattachée au compte (vérifiée par un lien) — elle sert à récupérer l'accès.

Première synchronisation — résolution des conflits

Lors de la connexion, l'extension compare les données locales avec celles du cloud :

• Seul le cloud a des données → elles sont téléchargées sur cet appareil.
• Seul l'appareil a des données → elles sont envoyées vers le cloud.
• Les deux ont des données → une modale de conflit apparaît avec trois stratégies :

Vous pouvez aussi Annuler — l'extension se déconnecte alors et ne change rien.

Synchronisation continue

Après la première réconciliation, la synchronisation s'exécute en arrière-plan : l'extension envoie les modifications et récupère les nouvelles entités environ une fois par minute. Une modification faite sur un appareil apparaît sur les autres après un court instant. Le point d'état à côté de l'entrée « Synchronisation cloud » indique si le compte est connecté.

Onglet Statut — bibliothèque cloud, historique, actions

L'onglet Statut de la modale de synchronisation affiche l'état du compte et propose des boutons d'action :

• Synchroniser maintenant — push immédiat des modifications et pull des nouvelles entités.
• Snapshot complet — télécharge un instantané de la bibliothèque depuis le compte.
• Actualiser les données du compte — actualise les informations du compte et la liste des sessions actives.
• Resynchronisation complète avec le compte — bidirectionnelle : elle télécharge d'abord toute la bibliothèque depuis le compte, puis envoie les entités locales qui manquent sur le compte. Elle répare les entités « bloquées » localement — celles qui ne sont jamais arrivées sur le serveur (push rejeté, absentes du premier instantané) et que la synchronisation ordinaire ne détecte pas car elles ne changent pas. Non destructive : les entités déjà présentes sur le compte sont ignorées (sans écraser les versions plus récentes) et les entités supprimées sur un autre appareil ne sont pas ressuscitées.

Bibliothèque cloud

Compteurs des entités présentes sur le compte : dossiers, groupes, règles, actions, barres d'action, fenêtres in-page. Seules les entités atteignables dans l'arbre sont comptées (un groupe doit avoir un dossier existant, une règle — un groupe, une barre/fenêtre — un parent existant) — de façon cohérente avec les compteurs du Tableau de bord. Ils s'actualisent à l'ouverture du panneau et après une synchronisation manuelle.

Historique de synchronisation

Un journal local à l'appareil des dernières synchronisations. La page affiche les 10 dernières entrées ; le bouton « Voir l'historique complet » ouvre une fenêtre avec la liste complète (jusqu'à 100 entrées). Chaque entrée contient :

• l'heure ainsi que l'appareil initiateur — nom et identifiant numérique de session (le même que dans « Sessions actives ») ;
• un récapitulatif chiffré — ↑ envoyées, ↓ téléchargées, ✕ supprimées ;
• les modifications concrètes — regroupées par type avec un compteur (par ex. « Actions ×10 ») et les noms des éléments lorsqu'ils sont connus ;
• l'état quantitatif de la bibliothèque après la synchronisation (six compteurs).

Le journal est local — il n'est pas synchronisé entre les appareils. Une entrée est créée après chaque cycle de synchronisation qui a réellement changé quelque chose ; un « Synchroniser maintenant » manuel laisse toujours une entrée, même sans aucune modification.

Ce qui se synchronise et ce qui ne se synchronise pas

• Synchronisé : dossiers, groupes, règles, actions, barres d'action, fenêtres in-page (panneaux CSS/JS, consoles), le thème (clair/sombre) et la langue de l'interface, ainsi que les clés API d'AI Helper — mais uniquement celles dont la case « synchroniser » est cochée à côté de la clé (voir AI Helper).
• Non synchronisé (état par appareil) : les positions des fenêtres et barres flottantes, les tailles des fenêtres, la mémoire des valeurs SELECT/INPUT, les fenêtres TEMP, les clés API sans case cochée.

Les statistiques d'utilisation (applications de CSS, exécutions de JS, affichages de fenêtres) sont synchronisées en tant qu'entités distinctes par appareil — la tuile du Tableau de bord les cumule sur tous les appareils appairés. Le thème et la langue sont synchronisés en tant que paramètre de compte partagé et appliqués lors de la prochaine ouverture du panneau sur un autre appareil.

Partage par lien (Shares)

Une alternative à l'envoi d'un fichier JSON sur une messagerie. Vous publiez un lien public avec une durée de vie (1h / 6h / 12h / 24h / 48h) et le transmettez au destinataire. Le backend justzix.com conserve le payload dans le cloud jusqu'à expiration, après quoi il est supprimé.

Nécessite un compte de synchronisation (Sync) connecté. Le jeton lui-même est un secret public — quiconque a le lien peut télécharger, donc ne l'envoyez pas sur des canaux publics si le contenu est sensible.

Format du jeton

JZS-XXXX-XXXX-XXXX-XXXX (16 caractères Crockford base32, ~80 bits d'entropie). L'URL entière https://www.justzix.com/s/JZS-... est aussi acceptée — l'extension l'analyse et la normalise (lettres ambiguës I/L→1, O→0, U→V).

Limites du compte

• max 20 liens actifs par compte
• max 50 Mo au total
• max 5 Mo par partage individuel
• max 30 nouveaux liens par heure

Dépasser une limite = erreur avec un message en polonais. Révoquez les liens inutilisés dans le panneau Mes partages.

Création d'un lien (expéditeur)

Le bouton « Partager l'URL » dans quatre points d'entrée, à côté de « Télécharger le fichier » :

• Export complet — Paramètres → Export des paramètres → bouton « Partager l'URL » (type justzix-full)
• Dossier — barre du dossier → Export → « Partager l'URL » (type justzix-folder)
• Groupe — barre du groupe → Export → « Partager l'URL » (type justzix-group)
• Règle — barre d'outils dans la vue de la règle → « Partager l'URL » à côté de Export / Import (type justzix-rule)

Un clic ouvre la modale de génération de lien : sujet + résumé de ce que vous partagez, boutons radio de TTL (24h par défaut), « Générer le lien ». En cas de succès, la modale bascule sur la vue du résultat avec deux valeurs copiables :

• URL complète https://www.justzix.com/s/JZS-... — à envoyer à quelqu'un sans l'extension (affiche une landing page)
• Le jeton seul JZS-XXXX-XXXX-XXXX-XXXX — à coller dans l'extension du destinataire dans « Importer depuis une URL »

Chacun a son bouton « Copier ». La date d'expiration est également affichée dans le fuseau horaire local.

Panneau « Mes partages »

Paramètres → Mes partages (une modale distincte, ne fait pas partie de la synchronisation — ce sont deux fonctionnalités différentes). Il affiche la liste des liens actifs : un compteur dans l'en-tête X/20 actifs · Y Mo / 50 Mo, et pour chaque partage une carte avec :

• Le type (Export complet / Dossier / Groupe / Règle) et l'ID
• La date d'expiration (« expire dans Xh Ymin ») ainsi qu'un compteur de téléchargements
• Le jeton en monospace (clic = sélectionne tout)
• Un résumé X dossiers · Y groupes · Z règles · N lignes JS · A Ko
• Les boutons Copier le lien / Copier le jeton / Révoquer

La révocation ne retire pas le contenu déjà téléchargé. Si quelqu'un a eu le temps de télécharger le payload, il l'a localement chez lui. Le partage est une « limite temporelle au mieux », pas du DRM.

Importer depuis un lien (destinataire)

Paramètres → Importer depuis une URL (entre « Import des paramètres » et « Synchronisation cloud », icône de chaîne ). La modale a deux étapes :

Étape 1 — saisie. Vous collez le lien ou le jeton seul. Validation côté client : le jeton est extrait de l'URL, normalisé en Crockford-base32, les 16 caractères + le format sont vérifiés. Format erroné → message avec un indice sur le format correct.

Étape 2 — aperçu. L'extension affiche le résumé du partage :

• Expéditeur (nom affiché ou « anonyme » s'il n'en a pas défini)
• Expire dans (temps relatif)
• Type (Export complet / Dossier / Groupe / Règle)
• Taille du payload
• Contenu (nombres de dossiers / groupes / règles / actions)
• Caractères CSS / lignes JS
• Téléchargements

Si le partage contient du JavaScript (jsLines > 0) — une bannière d'avertissement rouge apparaît avec un lien « Afficher le code JavaScript ». Il ouvre une surimpression avec le code JS complet de chaque règle et action — examinez-le avant d'importer, car le code s'exécutera sur les pages correspondantes.

Étape 3 — import. Un clic sur « Importer » → le backend renvoie le payload complet → l'extension crée de nouvelles entités avec toujours des ID frais (ne remplace jamais les existants par ID) :

Nom du nouveau conteneur : <nom-de-l-expéditeur ou "Import"> <date PL> — vous pouvez ensuite le renommer / le déplacer à volonté.

Erreurs du destinataire

Le backend ne distingue pas le 404 « n'a jamais existé » du 404 « expiré / révoqué » — volontairement, pour ne pas révéler si un jeton a jamais existé.

Appel programmatique des actions depuis le JS

Chaque action (de l'onglet « Actions » dans la carte de règle) peut être appelée de manière programmatique depuis le JS de la règle ou le code d'une autre action. L'espace de noms global window.JZ est installé dans le MAIN world automatiquement avant chaque exécution de user-JS.

API — actions

Exemple — lecture et définition de valeurs

// === Lecture ===
const filter = JZ.value('FILT');           // INPUT/TEXTAREA — chaîne
const opacity = JZ.value('OPAC');          // SLIDER — chaîne numérique ("75")
const mode = JZ.value('MODE');             // SELECT static — chaîne (option.value)
const theme = JZ.value('THM');             // TOGGLE3 — state.value de l'état actif

// === Définition ===
JZ.setValue('FILT', 'nouvelle valeur');    // INPUT/TEXTAREA — chaîne + dispatch input+change
JZ.setValue('OPAC', 75);                   // SLIDER — clamp aux min/max, dispatch input+change
JZ.setValue('SRT', 'prod');                // SELECT(js) — select natif + dispatch change
JZ.setValue('MODE', 'staging');            // SELECT static — content.js exécute le flux (mémoire + UI + code)
JZ.setValue('THM', 'dark');                // TOGGLE3 — recherche par state.value (repli sur label, puis idx)
JZ.setValue('THM', 2);                     // TOGGLE3 — équivalent ; l'index numérique fonctionne aussi

API — barres et bouton flottant

Variables de contexte dans le code d'action

Dans le champ « Code JS » d'une action, vous avez automatiquement accès à des variables — injectées comme const par le service worker d'arrière-plan avant l'exécution :

Snippet dans l'UI

Dans la modale de configuration d'une action de type SELECT et INPUT, le panneau « ID stable de l'action » affiche l'action.id complet avec un bouton de copie ainsi qu'un exemple de sélecteur JS (document.querySelector('[data-jz-action-id="..."]')). Sous la liste des BUTTON, on voit des puces JZ.click('LBL') — un clic sur une puce copie le snippet dans le presse-papiers.

Prérequis

• L'élément d'action doit être visible dans une barre d'action sur la page courante (l'action a visible: true, la barre est visible dans l'arborescence + l'URL de la page correspond aux règles).
• Action invisible ou page sur laquelle la barre est masquée → JZ.click() renvoie false, JZ.action() renvoie null.
• Le raccourci clavier défini sur une action a son propre mécanisme (listener keydown en capture-phase dans content.js) — il ne nécessite pas JZ.click().

Exemple — une action AUTO appelant une séquence

// Code de l'action "AUTO"
JZ.click('LOAD');                          // clic sur l'action LOAD (par ex. charge des données)
setTimeout(() => JZ.click('PROC'), 500);   // 500 ms plus tard PROC (traite)
setTimeout(() => JZ.click('SAVE'), 1500);  // 1500 ms plus tard SAVE (enregistre)

Exemple — JS de règle réagissant au DOM

Après l'apparition d'un élément dynamique, cliquez sur l'action qui le supprime :

// Code JS de la règle — observer sur un modal qui apparaît dynamiquement
const observer = new MutationObserver(() => {
  if (document.querySelector('.cookie-banner')) {
    JZ.click('CCK');  // clique sur l'action qui supprime la bannière
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Exemple — définition programmatique de la valeur d'un INPUT

// JZ.click sur un INPUT ne change pas la valeur — utilisez le motif avec dispatch 'change' :
const el = JZ.action('SRCH');           // ou JZ.actionById('a_mp1deeq3_uimd8l')
if (el) {
  el.value = 'nouveau filtre';
  el.dispatchEvent(new Event('change'));
}

Accès direct via le DOM

Si vous préférez travailler directement avec le DOM (par ex. vous changez un style, vous n'appelez pas) :

// Recherche par l'ID stable (recommandé — résistant au changement de libellé) :
const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');

// Recherche par libellé (insensible à la casse — MAJUSCULES dans data-jz-key) :
const btn = document.querySelector('[data-jz-key="MYBT"]');
btn.style.opacity = '0.5';      // assombrir
btn.dataset.busy = 'true';      // attribut personnalisé

Où vivent les éléments d'action dans le DOM :

Tous les éléments ont un attribut data-jz-action-id (identifiant stable unique). Le sélecteur .jz-actions-bar est sûr — il n'entre pas en conflit avec le DOM de la page.

Fonctionnalités sélectionnées

Recherche dans la barre latérale

Le champ « Rechercher » filtre l'arborescence des dossiers. Logique de correspondance :

• Correspondance par nom de dossier ou URL → tout le dossier avec toutes ses règles devient visible et auto-déployé
• Correspondance par nom de règle, tag ou contenu CSS/JS → seules les règles correspondantes du dossier sont affichées, le dossier est auto-déployé
• Aucun résultat → message « Aucun résultat pour [requête] »

La correspondance est insensible à la casse, un surlignage en jaune montre l'emplacement de la correspondance.

Interrupteur global

Après un clic sur l'icône de l'extension dans la barre d'outils de Chrome, le widget du popup apparaît avec un grand interrupteur vert/gris « Plugin enabled ». En mode désactivé, aucun CSS/JS n'est injecté sur aucune page, indépendamment des paramètres des dossiers. Le bouton flottant est alors désactivé (Halt Red, opacité 0,7). L'état survit au redémarrage de Chrome.

Insérer l'URL de l'onglet

Un bouton à côté du champ de motif d'URL — il insère protocol://host/* de l'onglet actif. Création d'un dossier en 2 secondes. L'adresse de la page d'options de l'extension est ignorée — il prend l'onglet externe le plus récent.

Validation d'URL en direct

En ligne, à droite du champ d'URL, apparaît l'information « Correspond à X onglets ouverts » ou un avertissement. Repère les fautes de frappe immédiatement.

Historique des modifications d'une règle

Un instantané du CSS et du JS est créé 3 secondes après la dernière édition (debounce). Limite de 5 versions — la plus ancienne est éliminée. Lors de la restauration d'une version, le contenu actuel est ajouté à l'historique comme instantané le plus récent, vous pouvez donc toujours annuler l'annulation.

Tags et recherche par tags

Dans l'en-tête de la carte de règle se trouve un champ pour les tags — saisissez-les séparés par des virgules. Ils apparaissent comme de petites étiquettes dans la barre latérale à côté du nom de la règle. La recherche trouve aussi par tags.

Libellé et couleur du dossier

Chaque dossier peut avoir son propre libellé sur le bouton flottant (3 lettres max, MAJUSCULES) et une couleur (sélecteur de couleur). Le libellé et la couleur aident à reconnaître visuellement quel projet est actif sur une page donnée.

Statistiques de clics des actions

Chaque bouton d'action compte combien de fois il a été cliqué. Cela aide à voir lesquels sont vraiment utilisés.

Validation du CSS

Sous l'éditeur CSS s'affiche une barre avec la liste des problèmes de syntaxe :

• Commentaire /* ... */ non fermé
• Accolades non fermées (il manque un })
• Accolade fermante } en trop (avec le numéro de ligne)

C'est une validation syntaxique simple — elle ne vérifie pas la justesse des propriétés/valeurs. Le CSS avec une erreur est quand même injecté (le navigateur ignorera simplement les règles erronées).

Aperçu du JS à l'import

Dans la modale d'import d'un seul dossier, après le chargement du fichier, une liste des règles apparaît avec une métrique :

Contenu du fichier (3 règles) :
  Auto-login              CSS : 0L • JS : 4L                    JS
  Masquer la bannière cookie  CSS : 8L • JS : 0L
  Debug GTM               CSS : 0L • JS : 12L • 2 actions (8L)  JS

Un avertissement avec le nombre de lignes JS si des lignes sont présentes. Un clic sur le bouton JS affiche le code complet à examiner avant l'import.

Isolation try/catch du JS

Chaque règle JS est exécutée séparément, avec son propre try/catch. Une erreur dans une règle ne bloque pas l'exécution des autres. Les erreurs sont journalisées dans la console avec le nom de la règle/action et la stack trace complète.

Quota de stockage

Un indicateur de consommation de mémoire dans le menu Paramètres de la barre latérale (par ex. 1.2 MB / 10 MB). Rouge au-dessus de 80 %.

Filtre « Uniquement actifs »

Une case à cocher au-dessus de la liste — elle masque les règles marquées comme indépendantes (○) et n'affiche que celles actives dans le dossier (●). Cela aide à filtrer les règles « manuelles » quand un dossier en a beaucoup. Réagit immédiatement aux changements des interrupteurs.

Mise à jour de l'extension

L'extension a une clé fixe dans le manifeste (le build Firefox — un gecko.id fixe), ce qui signifie que l'ID de l'extension est invariable entre les mises à jour — les données (dossiers, règles, paramètres) sont conservées. JustZix est livré pour quatre navigateurs : Chrome, Edge, Opera et Firefox.

Notification de nouvelle version

Dans le menu Paramètres (à côté du numéro de version) une bannière verte « Une nouvelle version est disponible » apparaît lorsque le serveur publie un paquet plus récent que celui installé. La bannière contient un lien de téléchargement. La vérification est silencieuse — sans réseau, la bannière ne s'affiche tout simplement pas.

Procédure de mise à jour (Chrome / Edge / Opera)

1. Téléchargez le nouveau ZIP de mise à jour
2. Décompressez-le en écrasant le même dossier où se trouvait la version précédente
3. Dans chrome://extensions/ (Edge : edge://extensions/) trouvez l'extension et cliquez sur l'icône de rafraîchissement sur la tuile
4. L'extension se recharge avec les nouveaux fichiers, les données restent

Firefox

Le build Firefox se charge via about:debugging → « Ce Firefox » → « Charger un module complémentaire temporaire » (en pointant vers manifest.json dans le dossier justzix_firefox/). Une mise à jour = recharger après avoir écrasé les fichiers.

Exemples CSS

/* Masquer les publicités courantes */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"] {
  display: none !important;
}

/* Masquer la bannière cookie */
.cookie-banner, #cookie-notice {
  display: none !important;
}

html {
  filter: invert(0.92) hue-rotate(180deg);
}
img, video, picture, iframe, [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Colorer tous les éléments avec data-testid */
[data-testid] {
  outline: 2px dashed #f59e0b !important;
  outline-offset: -2px;
}
[data-testid]::before {
  content: attr(data-testid);
  position: absolute;
  background: #f59e0b;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 9999;
}

/* Augmenter la lisibilité des tableaux de l'admin */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* En-tête de tableau collant */
table.admin-list thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* Lignes alternées */
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

/* Souvent les pages ont un max-width rigide de 1200px - forcer la largeur */
.container, .main-content, main {
  max-width: 95% !important;
  width: 95% !important;
}

body::before {
  content: "ENVIRONNEMENT DEV";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc2626;
  color: white;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  z-index: 999999;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body { padding-top: 28px !important; }

Exemples JavaScript

// Uniquement pour le dev ! N'enregistrez jamais de vrais mots de passe
window.addEventListener('load', () => {
  const login = document.querySelector('input[name="login"]');
  const pass = document.querySelector('input[name="password"]');
  if (login) login.value = 'admin@dev.local';
  if (pass) pass.value = 'devpass123';
});

// Intercepter dataLayer.push (GTM)
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]', 'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

// Intercepter gtag
const origGtag = window.gtag;
if (origGtag) {
  window.gtag = function(...args) {
    console.log('%c[GA4]', 'color:#2563eb;font-weight:bold', args);
    return origGtag.apply(window, args);
  };
}

// Toutes les 500 ms pendant 10 s, vérifier et cliquer les boutons "Accepter"
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const buttons = [...document.querySelectorAll('button, a')];
  const target = buttons.find(b =>
    /akceptuj|zgoda|accept all/i.test(b.textContent || '')
  );
  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S - enregistrer le formulaire
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }
  // Ctrl+Shift+E - passer en édition (exemple non testé)
  if (e.ctrlKey && e.shiftKey && e.key === 'E') {
    e.preventDefault();
    document.querySelector('a.edit-link')?.click();
  }
});

// Ignorer les confirm et beforeunload agaçants pendant les tests
window.confirm = () => true;
window.alert = (msg) => console.log('[alert supprimé]', msg);
window.onbeforeunload = null;
window.addEventListener('beforeunload', e => {
  e.stopImmediatePropagation();
}, true);

// Rappel - le CSS pur ne le fera pas quand le parent a display:none
window.addEventListener('load', () => {
  const target = document.querySelector('.important-info');
  const newParent = document.querySelector('.sidebar');
  if (target && newParent) {
    newParent.prepend(target);
  }
});

// Afficher tous les input type="hidden" masqués
document.querySelectorAll('input[type="hidden"]').forEach(input => {
  const wrapper = document.createElement('div');
  wrapper.style.cssText = 'background:#fef3c7;padding:4px;font-size:11px;font-family:monospace;border:1px dashed #f59e0b;';
  wrapper.innerHTML = `${input.name}: ${input.value}`;
  input.parentNode.insertBefore(wrapper, input);
});

Exemples de boutons d'action

document.querySelectorAll('input, textarea, select').forEach(el => {
  if (el.type === 'hidden') return;
  if (el.type === 'checkbox' || el.type === 'radio') {
    el.checked = false;
  } else {
    el.value = '';
  }
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'Jan',
  lastName: 'Testowy',
  street: 'Testowa 1',
  city: 'Warszawa',
  zip: '00-001'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

// Pour une boutique typique — cliquer le premier "ajouter au panier"
const btn = document.querySelector('.add-to-cart, [data-action="add-to-cart"]');
if (btn) btn.click();
else alert('Bouton ajouter au panier introuvable');

navigator.clipboard.writeText(location.href).then(() => {
  console.log('Copié :', location.href);
});

// Extrait le jeton JWT du localStorage / des cookies pour le débogage
const token = localStorage.getItem('authToken')
  || document.cookie.match(/token=([^;]+)/)?.[1];
if (token) {
  navigator.clipboard.writeText(token);
  alert('Jeton copié. Premiers caractères : ' + token.slice(0, 20) + '...');
} else {
  alert('Aucun jeton');
}

// Intercepter tous les fetch et les afficher dans la console
const origFetch = window.fetch;
window.fetch = async function(...args) {
  console.log('%c[FETCH]', 'color:#2563eb', args[0]);
  const res = await origFetch.apply(this, args);
  return res;
};
console.log('Journalisation des fetch activée. Chaque appel apparaîtra dans la console.');

const info = {
  url: location.href,
  userAgent: navigator.userAgent.split(' ').pop(),
  cookies: document.cookie.split(';').length,
  localStorage: Object.keys(localStorage).length,
  framework: window.React ? 'React' : window.Vue ? 'Vue' : window.jQuery ? 'jQuery' : 'unknown'
};
alert(JSON.stringify(info, null, 2));

Scénarios d'utilisation

1. Travail avec plusieurs clients / projets

Chaque projet a son propre dossier avec son propre motif d'URL. Vous pouvez avoir des dossiers :

• justzix.com — modifications de la production
• justzix dev — pour https://dev.justzix.com/* avec une bannière rouge « DEV »
• client X — modifications sur un autre domaine

Dans le panneau de droite, les dossiers privés peuvent être rapidement activés/désactivés. L'export d'un seul dossier permet de partager une configuration avec l'équipe.

2. Environnement de développement avec marquage visuel

Sur chaque dev/staging, ajoutez une bannière et un auto-login. Une règle CSS (bannière) et une JS (auto-fill). Vous créez un dossier distinct pour chaque environnement, ils s'activent par une simple case à cocher.

3. Outils pour le product manager / la QA

Un panneau d'action avec des boutons : FILL (données de test), CART (achat de test), CLR (vider le formulaire), STATE (afficher l'état de l'application dans une alerte). Sans développeur, sans console, en un clic.

4. Modifications de pages publiques

Vos blogs/documentations préférés avec une meilleure lisibilité — conteneur plus large, police, mode sombre. Chaque page dans un dossier distinct, « Actif » laissé toujours activé.

5. Débogage de l'analytique / GTM

Une règle par domaine avec du JS interceptant dataLayer.push et gtag. Vous l'activez quand un client signale un problème d'analytique, sans toucher au code de la page.

6. Travail sur les panneaux d'administration

Le motif *://*.justzix.com/admin/* et du CSS améliorant les tableaux, listes, formulaires. Plus une action « Filtre de test » qui définit automatiquement les filtres pour un workflow typique.

7. Tests sûrs en production

L'action RO (read-only) injecte du CSS qui masque tous les boutons « Supprimer », « Enregistrer », « Envoyer » — un « mode lecture seule » temporaire pour ne pas faire d'erreur.

// Masquer les boutons dangereux
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('MODE READ-ONLY activé');

Problèmes courants et solutions

Le JavaScript ne s'est pas exécuté

• Vérifiez que la page correspond au motif — le bouton flottant devrait être visible
• Le JS se déclenche une fois par vie de la page — vous avez changé le code ? Rechargez la page (F5)
• Vérifiez la console des DevTools — les erreurs JS y sont journalisées comme [JustZix] JS error
• La règle doit être Activée — « Actif » seul ne suffit pas

Le CSS ne fonctionne pas

• Spécificité — la page a ses propres styles ; utilisez !important ou des sélecteurs plus spécifiques
• Classes dynamiques — certains frameworks génèrent des classes du type .css-1abcd qui changent. Utilisez des attributs ([data-testid]) ou des sélecteurs stables
• Shadow DOM — certains éléments sont dans le Shadow DOM et le CSS de l'extérieur n'y a pas accès. Il faut du JS

Le bouton flottant n'apparaît pas

• L'URL ne correspond à aucun motif
• Le bouton a été masqué auparavant — dans le widget du popup, cliquez sur Restaurer le bouton flottant
• La page a bloqué les scripts injectés (rare)

J'ai perdu des données après une mise à jour de l'extension

L'extension a une clé fixe dans le manifeste — les mises à jour suivantes conservent les données. Si malgré tout les données ont disparu :

• Exportez régulièrement les paramètres (Export)
• Mettez à jour en écrasant le même dossier — ne changez pas le chemin
• Dans chrome://extensions/, utilisez le bouton de rafraîchissement, ne supprimez pas et ne réinstallez pas
• Si vous perdez des données, importez l'export précédent — 1-2 clics suffisent

Les positions des boutons/panneaux se réinitialisent

C'est normal — les positions sont par fenêtre de navigateur et stockées dans la mémoire de session (chrome.storage.session). Après la fermeture de la fenêtre, les positions disparaissent ; dans une nouvelle fenêtre vous démarrez avec les positions par défaut. La position survit à la navigation entre les onglets de la même fenêtre.

L'export partiel a omis certains paramètres globaux

Oui — l'export partiel contient uniquement les dossiers et règles sélectionnés plus les paramètres de visibilité qui leur sont liés. Il ne contient pas les positions des panneaux flottants (elles sont par fenêtre) ni les autres préférences globales. Pour une sauvegarde complète, utilisez le mode « Tout ».

L'import partiel a écrasé un dossier qui n'existait pas avant

Le mode « Fusionner » fait correspondre les dossiers par ID. Si le fichier importé avait un ID en conflit avec un dossier existant (par ex. le même fichier avait déjà été importé une fois), un prompt apparaît : 1 écraser / 2 copie (par défaut, sûr) / Annuler. En choisissant 2 vous obtenez des copies avec de nouveaux ID et la mention « (import) » dans le nom du dossier — vous ne perdez rien.

L'arborescence des dossiers ne se déploie pas

La flèche de déploiement n'apparaît que si le dossier a des règles. Un dossier vide a un point grisé à la place de la flèche. L'état de déploiement de chaque dossier est mémorisé dans chrome.storage.local.

Je ne vois pas le bouton Export/Import du dossier

Ces boutons sont dans la barre du dossier (en haut de la zone d'édition), à côté du bouton « Supprimer le dossier ». À ne pas confondre avec les boutons du menu Paramètres, qui concernent l'ensemble des paramètres.

AI Helper ne répond pas

• Pas de clé API — dans Paramètres → AI Helper, saisissez la clé d'au moins un fournisseur (OpenAI / Anthropic / Gemini).
• Clé invalide — la fenêtre affichera l'erreur renvoyée par le fournisseur ; vérifiez la clé et les limites du compte chez le fournisseur.
• La clé ne s'est pas synchronisée sur le deuxième appareil — la synchronisation ne fonctionne que pour les clés dont la case « synchroniser » est cochée et nécessite un compte de synchronisation JustZix connecté.

Conflit avec la Content Security Policy

Le JS des règles et des actions s'exécute dans le contexte de la page via une stratégie en couches résistante aux règles strictes de Content Security Policy. La plupart des pages — y compris les grands services comme Facebook — fonctionnent immédiatement, sans configuration.

Les pages avec une CSP très stricte (certaines banques, sites d'entreprise) peuvent bloquer l'exécution. Pour que le JS fonctionne sur toutes les pages, activez l'option « Autoriser les scripts utilisateur » pour JustZix : ouvrez chrome://extensions, accédez aux détails de JustZix et activez le commutateur (les navigateurs plus anciens nécessitent aussi le mode développeur). Lorsqu'une page bloque l'exécution, la fenêtre JavaScript / la Console JS affiche un message approprié.

JustZix — manuel