← Tous les articles

Types d'actions

BUTTON : l'action JustZix la plus simple — fire-and-forget avec personnalisation par bouton

15 mai 2026 · par JustZix Team

Un type d'action est si basique qu'il est sauté dans les articles. BUTTON — clic → exécuter le code → fini. Pas d'état, pas de mémoire, pas de liste d'options à choisir. C'est une « fonction sans état » dans la barre d'actions. Mais cette simplicité est précisément ce qui le rend le plus puissant : BUTTON représente 80 % de toutes les actions dans un setup JustZix typique, parce que la plupart des choses que vous voulez faire sont « clic = X ».

Quand BUTTON, quand autre chose ?

Seul BUTTON est sans état. Tous les autres types conservent une valeur par action.id (sessionStorage + backup chrome.storage.local). BUTTON = fonction pure : entrée (clic) → sortie (effet sur la page).

Première action BUTTON

Dans l'éditeur JustZix → règle → barre d'actions → « + BUTTON ». Configuration :

label: "🚀 Remplir démo"   // texte du bouton + icône
code: |
  // value, $el, $action injectés automatiquement comme extras
  document.querySelector('[name=email]').value = 'demo@test.com';
  document.querySelector('[name=name]').value = 'Demo User';
  document.querySelectorAll('input, textarea').forEach(el =>
    el.dispatchEvent(new Event('input', { bubbles: true }))
  );
  JUSTZIX.log('Données démo remplies.');

Clic « 🚀 Remplir démo » → champs du formulaire remplis, le framework de la page (React/Vue/Angular) voit l'event input → état mis à jour.

Deux couleurs + customStyles

BUTTON a 2 couleurs de base :

color       → fond du bouton
colorText   → couleur du texte du label (et de l'icône si emoji)

Plus un objet customStyles optionnel — override CSS granulaire :

customStyles: {
  padding: '8px 16px',         // défaut 6px 12px
  fontSize: '14px',             // défaut 12px
  borderRadius: '4px',          // défaut 6px
  fontFamily: 'Fira Code, monospace',
  fontWeight: '600',
  letterSpacing: '0.5px',
}

Rendu : chaque propriété de customStyles passe par el.style.setProperty(key, value, 'important') — l'emporte sur les règles par défaut de JustZix. Cela permet d'aligner les boutons sur le style de marque du site que vous modifiez (p. ex. bleu Bootstrap, ripple Material Design, personnalisation par domaine).

Ce qui est disponible dans le champ code

Le code BUTTON s'exécute dans le MAIN world (chrome.scripting.executeScript world:'MAIN') via background.js. Automatiquement disponible :

• window.JZ — helpers d'action (JZ.click, JZ.value, JZ.setValue, etc.) quand il n'y a pas de collision
• window.JUSTZIX — logger (depuis v2.13.76, nom de marque, toujours disponible)
• $el — référence au bouton (HTMLElement) — utile si vous voulez modifier le bouton lui-même après le clic
• $action — objet {id, label, type, el} — méta-info sur l'action
• Contexte complet de la page — toutes les globales window de la page (jQuery, internes de React, etc.)
• async/await OK — le wrapper est une IIFE async

Cas d'usage 1 — Chaînes rapides

Les séquences d'actions fréquemment répétées peuvent être automatisées par un seul bouton :

// Action « 🔥 Flux de test »
JZ.click('Login');               // clique l'action BUTTON dont le label est « Login »
await new Promise(r => setTimeout(r, 500));
JZ.click('Ajouter au panier');
await new Promise(r => setTimeout(r, 500));
JZ.click('Checkout');
JUSTZIX.log('Flux de test terminé.');

Chaîne de 3 boutons en 1 → cliquer « Flux de test » les déclenche séquentiellement. Chacun des 3 sous-boutons reste réutilisable individuellement.

Cas d'usage 2 — Exécution conditionnelle

BUTTON est « exécuter à la demande », donc parfait pour les scripts destructeurs avec un garde-fou d'URL :

// Action « 🗑️ Vider le panier staging »
if (!location.hostname.includes('staging')) {
  JUSTZIX.error('Seulement sur staging ! Abandon.');
  alert('Ce bouton ne fonctionne que sur staging.');
  return;
}
const items = document.querySelectorAll('.cart-item .remove-btn');
items.forEach(btn => btn.click());
JUSTZIX.log(`${items.length} articles vidés.`);

Pas de risque d'auto-run (comme le JS pane), pas de champ texte à remplir manuellement — juste un clic quand vous voulez, où vous voulez.

Cas d'usage 3 — Feedback visuel après le clic

Vieux classique : un bouton qui change de label au succès :

// Action « 💾 Sauvegarder l'état »
const oldLabel = $el.textContent;
$el.textContent = '⏳ Sauvegarde...';
$el.style.opacity = '0.6';
try {
  await fetch('/api/state', {
    method: 'POST',
    body: JSON.stringify(getState()),
  });
  $el.textContent = '✓ Sauvegardé';
  setTimeout(() => {
    $el.textContent = oldLabel;
    $el.style.opacity = '';
  }, 2000);
} catch (e) {
  $el.textContent = '✗ Erreur';
  JUSTZIX.error('Échec de la sauvegarde', e);
}

$el est la référence DOM du bouton — modifiez-le directement. Feedback visuel sans état externe.

Cas d'usage 4 — Plusieurs boutons, un flux

Au lieu d'un bouton « Flux QA complet », 5 boutons séparés dans un cluster visuel :

// Action « 1️⃣ »
JUSTZIX.log('Étape 1 : login');
JZ.click('Login as test user');

// Action « 2️⃣ »
JUSTZIX.log('Étape 2 : naviguer');
location.href = '/admin/orders';

// Action « 3️⃣ »
JUSTZIX.log('Étape 3 : filtrer');
document.querySelector('select.status').value = 'pending';
document.querySelector('select.status').dispatchEvent(new Event('change'));

Chaque étape comme bouton séparé → l'utilisateur voit visuellement où il en est dans le flux. De plus, il peut répéter n'importe quelle étape sans tout redémarrer.

Pièges

• Le code BUTTON DOIT avoir un label. La vérification isActionRenderable exige les deux (label + code). Une action sans code ne sera jamais rendue.
• customStyles via setProperty(..., 'important') l'emporte sur la plupart du CSS de la page, mais certains styles de site utilisent des pseudo-éléments spécifiques (::before avec content) — customStyles ne peut pas aider là. Contournement : ajoutez une règle CSS dans la section CSS de la même règle (le !important en cascade l'emporte quand même).
• Le code s'exécute dans le MAIN world. Signifie : les scripts de la page (React, Vue, jQuery) voient les events que vous dispatchez. Mais aussi : les scripts de la page peuvent interférer avec votre code (p. ex. surcharger fetch, console). Le correctif Output Console via chrome.scripting.executeScript aide (immunisé contre la CSP), mais le principe général : la page et votre code partagent le scope.
• Les erreurs async dans le code n'apparaissent pas automatiquement dans l'Output Console. Enveloppez try/catch autour des instructions await + JUSTZIX.error explicite. Ou : utilisez window.addEventListener('error') globalement dans une règle JS.
• Pas de throttle/debounce intégré. clic-clic-clic = 3 invocations de code indépendantes. Si le code est coûteux (fetch, réécriture du DOM), protégez-le vous-même : let busy = false; + garde.

La suite

BUTTON est l'épine dorsale de toutes les toolbars JustZix. Voyez aussi les autres types d'actions :

• SELECT static vs js — choisir dans une liste d'options
• INPUT — texte sur une ligne + Entrée→run
• TEXTAREA — bloc-notes multi-lignes
• SLIDER — contrôleur de plage natif
• TOGGLE3 — segmented controls à 3 états
• window.JZ + JUSTZIX helpers — API programmatique

Installez JustZix — entièrement gratuit, sans compte, sans serveur.