← Tous les articles

Types d'actions

TEXTAREA : un bloc-notes multi-lignes dans la barre d'actions — brouillons, notes, snippets par domaine

15 mai 2026 · par JustZix Team

INPUT est sur une ligne. SELECT est un choix dans une liste. SLIDER est une plage. Et si vous voulez du texte libre multi-lignes — parce que vous prenez des notes QA pendant les tests, rédigez une réponse Reddit, ou avez un snippet curl de 5 lignes que vous voulez sous la main À CHAQUE FOIS que vous visitez ce domaine ? Alors vous utilisez TEXTAREA (depuis v2.13.21) — un <textarea> natif dans la barre d'actions avec une mémoire persistante par onglet.

En quoi diffère-t-il d'INPUT ?

Différence la plus importante : Entrée dans TEXTAREA est un saut de ligne, pas un déclencheur de code. C'est intentionnel — c'est un champ de texte destiné à contenir du texte, pas une barre de commande. Pour exécuter le code : Tab (blur natif) ou clic en dehors de la textarea.

Première action TEXTAREA

Dans l'éditeur JustZix, ajoutez une action TEXTAREA à la barre. Configuration :

label: "📝 Notes QA"
rows: 5
placeholder: "Description du bug, étapes de repro..."
defaultValue: ""  (vide — ne rien suggérer)
code: (vide — on veut juste un bloc-notes, pas d'action)

Visitez app.com/checkout. La barre d'actions a maintenant un champ texte. Tapez une note, F5 → la note revient. Ouvrez un nouvel onglet sur le même domaine → champ vide (chaque onglet a sa propre mémoire). Fermez l'onglet → vous perdez le texte dans cet onglet, mais si c'était le seul onglet, le backup chrome.storage.local conserve quand même la dernière valeur à la prochaine ouverture.

Trois couleurs + placeholder

Même config de couleurs qu'INPUT (les deux partagent la même variable CSS pour le placeholder) :

color           → fond de la textarea
colorText       → couleur du texte lui-même
colorPlaceholder → couleur du placeholder (variable CSS --jz-placeholder-color)

Sans overrides, la textarea ressemble à un défaut natif du navigateur — bordure grise, fond blanc, texte noir. Pour l'intégrer visuellement au reste de la barre d'actions (p. ex. un thème de toolbar QA sombre), mettez color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888".

Modèle de mémoire — ce qui survit au F5

TEXTAREA utilise un stockage hybride (identique à INPUT) :

1. sessionStorage (primaire) — sauvegarde synchrone à chaque frappe. Clé : jz_action_memory_{id}. Conserve la valeur pour toute la session de l'onglet, y compris au F5.
2. chrome.storage.local (backup) — sauvegarde asynchrone à la frappe. Survit à un redémarrage du navigateur sur le même onglet (si l'onglet revient via « Restaurer la session »).

Sauvegarde à chaque frappe — même une seule lettre atterrit immédiatement dans sessionStorage. Le code ne se déclenche qu'au blur. C'est une séparation délibérée : sauvegarder = souvent (sécurité), exécuter = rarement (efficacité).

Cas d'usage 1 — Bloc-notes QA par domaine

Vous testez un flux de checkout sur 3 environnements de staging. Chacun a ses propres particularités. Ajoutez une TEXTAREA « Notes QA » à une règle dont le scope est *staging*.app.com :

label: "🐛 Notes QA"
rows: 8
placeholder: "Ce que vous testez, étapes de repro, erreurs..."

Visitez staging1 → champ avec la session précédente. Modifiez. Visitez staging2 → vide (onglet différent = mémoire différente). Ouvrez Slack pour signaler le bug → le texte est prêt à copier, vous ne l'avez pas perdu entre les pages. Pas de Notion, pas de Sticky Notes, pas de F12.

Cas d'usage 2 — Brouillon de commentaire sur Reddit/GitHub

Vous écrivez un long commentaire sur une PR GitHub. Panne réseau → vous perdez le brouillon. Ou « je reviens » → 2 h d'autre navigation → vous revenez → page rafraîchie, brouillon parti. Correctif TEXTAREA :

// Dans l'éditeur JustZix → règle sur github.com :
label: "💬 Brouillon"
rows: 12
code: (vide — juste un bloc-notes)

En écrivant un commentaire → copiez dans la TEXTAREA une fois par minute. F5 ? sessionStorage le garde. Erreur réseau ? sessionStorage le garde. Même fermer l'onglet et le rouvrir (via « Restaurer la session ») → le backup chrome.storage.local revient.

Bonus : au lieu d'écrire dans la textarea de GitHub, écrivez dans la TEXTAREA JustZix, puis copiez. Alors même un chargement de page échoué ne détruira pas le texte — JustZix vit indépendamment de la page.

Cas d'usage 3 — Snippet curl pré-rempli

Vous testez souvent la même API. Réassembler le curl à chaque fois. TEXTAREA avec un defaultValue :

label: "🔧 curl"
rows: 6
defaultValue: |
  curl -X POST \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer YOUR_TOKEN" \
    -d '{"key":"value"}' \
    https://api.app.com/v1/endpoint
code: (vide — vous voulez seulement conserver un modèle)

Visitez le domaine → le champ a déjà le modèle de curl. Modifiez une fois par session (p. ex. collez le token), copiez vers le terminal. Onglet suivant sur ce domaine → defaultValue revient s'il n'y avait pas de mémoire antérieure, ou votre version modifiée s'il y en avait.

Cas d'usage 4 — Snippet JSON pour injection

Une config JSON de test que vous collez dans la textarea de l'app. Au lieu de la garder dans un fichier, gardez-la dans une action TEXTAREA avec un code déclenché au blur :

label: "📋 Config de test"
rows: 15
code: |
  // Après blur — injecte value dans la vraie textarea de l'app
  const target = document.querySelector('#config-textarea');
  if (target) {
    target.value = value;
    target.dispatchEvent(new Event('input', { bubbles: true }));
    target.dispatchEvent(new Event('change', { bubbles: true }));
    JUSTZIX.log('Config injectée (' + value.length + ' caractères)');
  }

Modifiez le JSON dans le champ JustZix → Tab → le code le copie automatiquement dans la vraie textarea de l'app + déclenche les events input/change (pour que le framework de la page le voie). Pas de copier-coller manuel.

Pièges

• Entrée ne déclenche PAS le code. Tab ou clic ailleurs si. Différent d'INPUT — important pour le modèle mental de l'utilisateur. Bonne pratique : utilisez des labels comme « Notes » / « Brouillon » / « 📝 … » (signal clair « ceci est un champ texte, pas une barre de commande »).
• rows clampe à 1-20. Les valeurs plus grandes sont fixées à 20. Pour un contenu très long (instructions, docs), utilisez plutôt un JS pane (aussi multi-lignes, mais dans un panneau flottant).
• Mémoire par onglet, pas globale. Chaque onglet a son propre sessionStorage. Pour partager du texte entre onglets — le backup chrome.storage.local le fait partiellement (à « Restaurer la session »), mais pas de sync en temps réel. Pour une vraie sync inter-onglets → CSS pane / JS pane (ils ont un modèle différent).
• Le glissement de la barre est bloqué pendant la saisie. mousedown sur la textarea bloque la propagation, pour que vous ne puissiez pas glisser la barre en saisissant la textarea. C'est intentionnel — vous glisseriez la barre au lieu de sélectionner du texte.
• placeholder retombe sur le label. Si vous ne définissez pas de placeholder séparé, il affiche le label. Vous pouvez avoir les deux — p. ex. label « Notes » + placeholder « Tapez vos notes QA ici... ».

La suite

TEXTAREA est de la « mémoire minimaliste » dans la barre d'actions — pas de code, pas d'overhead UI, juste une textarea. Elle se marie superbement aux autres types d'actions : JZ.value('Notes') lit la valeur depuis une autre action (p. ex. un BUTTON qui envoie des notes quelque part), et JZ.setValue('Notes', '') la vide après usage.

Voyez aussi les articles liés :

• TOGGLE3 — segmented controls à 3 états avec code par état
• SLIDER — contrôleur de plage natif pour les variables CSS
• Mini-IDE dans un onglet — carte complète de toutes les fenêtres et actions

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