← Tous les articles

Tutoriels

Construire une règle avec AI Helper — un tutoriel étape par étape

17 mai 2026 · par JustZix Team

Vous savez ce que vous voulez — « masquer cette popup de newsletter » — mais vous ne voulez pas fouiller le DOM, écrire un sélecteur et deviner pour !important. AI Helper fait le travail de fouille. Voici un tutoriel concret, clic par clic, de la construction d'une vraie règle, d'une demande en langage clair à une règle enregistrée qui survit aux rechargements.

Avant de commencer

AI Helper a besoin d'une clé API de l'un des trois fournisseurs — OpenAI, Anthropic ou Gemini. Vous l'ajoutez une fois dans Paramètres → AI Helper ; la clé réside dans chrome.storage.local et ne touche jamais la page. Si vous ne l'avez pas encore fait, le guide de configuration vous accompagne en deux minutes. Pour ce tutoriel, nous supposons qu'une clé est déjà en place.

L'objectif

Nous allons prendre une nuisance courante : un site qui vous lance une modale de newsletter en plein écran quelques secondes après le chargement de la page. Nous voulons qu'elle disparaisse — à chaque visite, automatiquement. À la fin, nous aurons une règle enregistrée limitée à ce seul domaine.

Étape 1 — ouvrez AI Helper sur la page

Naviguez vers le site fautif et attendez que la popup apparaisse (pour que les éléments soient dans le DOM). Puis ouvrez AI Helper avec Ctrl+Alt+\. Vous pouvez aussi utiliser le bouton dans le widget de la popup ou le menu contextuel du clic droit — tous les trois ouvrent la même chose : une fenêtre flottante, déplaçable et redimensionnable à l'intérieur de la page, limitée à cet onglet.

Étape 2 — décrivez l'objectif

Tapez ce que vous voulez en langage clair. Pas de sélecteurs, pas de jargon :

Masque la popup de newsletter qui apparaît sur ce site
quelques secondes après le chargement de la page.

AI Helper ne saute pas directement au code. Le prompt système impose un workflow : demander des détails → inspecter la page → tester dans une fenêtre TEMP → vous demander de vérifier → seulement alors persister. La première réponse est donc généralement une question de clarification — par exemple, si vous voulez aussi supprimer la superposition sombre derrière la modale, ou seulement la boîte modale elle-même. Répondez-y ; plus vous êtes précis, meilleur sera le sélecteur.

Étape 3 — regardez-le inspecter la page

Une fois qu'il a de quoi avancer, AI Helper inspecte la page en direct. Vous verrez des puces d'appel d'outils apparaître dans la conversation — chaque puce est une action que le modèle a effectuée :

• query_page — il exécute un sélecteur CSS sur la page et récupère les éléments correspondants ainsi que leur HTML. C'est ainsi qu'il trouve le véritable conteneur de la modale.
• list_structure — il lit vos dossiers, groupes et règles existants, pour savoir où une nouvelle règle s'insérerait et éviter de dupliquer quelque chose que vous avez déjà.

Le modèle reçoit le contexte de la page courante — URL, titre et un fragment HTML — il ne devine donc pas. Il affine d'un sélecteur large vers le conteneur spécifique qui contient la popup.

Étape 4 — voyez le code testé dans une fenêtre TEMP

Voici la partie qui rend cela digne de confiance. AI Helper n'écrit pas de code dans une règle enregistrée. Il appelle open_temp_pane pour ouvrir une fenêtre TEMP CSS — le même type de fenêtre de développeur dans l'onglet que vous ouvririez à la main — puis set_temp_pane_code pour y déposer son CSS proposé. Vous regardez le code apparaître, en direct, et la page réagit en temps réel :

/* Proposé par AI Helper — affiché dans une fenêtre TEMP CSS */
.newsletter-modal,
.newsletter-modal__overlay {
  display: none !important;
}
html, body {
  overflow: auto !important;
}

La popup disparaît sous vos yeux. Rien n'a encore été enregistré — c'est un bac à sable. Si le sélecteur est faux, vous le voyez aussi immédiatement, et vous pouvez dire à AI Helper « la superposition est toujours là » ou « ça a aussi masqué le pied de page ». Il réinspecte et ajuste.

Étape 5 — vérifiez que ça a vraiment fonctionné

Prenez un moment. Rechargez la page si vous voulez — la fenêtre TEMP persiste pour l'onglet. Vérifiez que :

• la popup a disparu ;
• le défilement de la page fonctionne (les popups verrouillent souvent le défilement du body) ;
• rien d'autre n'est cassé — pas de boutons manquants, pas de mise en page effondrée.

Si quelque chose ne va pas, poursuivez la conversation. Cet aller-retour est tout l'intérêt — vous réglez la règle ensemble avant qu'elle ne devienne permanente.

Étape 6 — confirmez, et la règle est créée

Satisfait ? Dites à AI Helper de l'enregistrer. Il appellera create_rule — et c'est là qu'une confirmation séparée et explicite apparaît. L'extension vous montre exactement ce qu'elle s'apprête à créer : le nom de la règle, le motif d'URL (elle suggérera le domaine courant, par ex. https://example.com/*), et le corps CSS. Rien n'est écrit dans votre configuration tant que vous ne cliquez pas sur confirmer.

Si la règle a besoin d'un nouveau dossier ou groupe pour y résider, ce sont aussi des confirmations séparées — create_folder et create_group demandent chacune de leur côté. AI Helper ne peut jamais restructurer silencieusement votre configuration.

Étape 7 — terminé

Cliquez sur confirmer et la règle est réelle. Elle apparaît dans votre hiérarchie dossiers/groupes/règles comme n'importe quelle règle faite à la main. Rechargez le site : la popup a disparu, automatiquement, à chaque future visite. Vous pouvez ouvrir la règle plus tard dans l'éditeur normal pour ajuster le CSS, changer le motif d'URL ou la désactiver.

Ce que vous avez réellement fait

Vous avez décrit un objectif en une phrase. AI Helper a inspecté la page, trouvé le bon sélecteur, prouvé qu'il fonctionnait dans une fenêtre que vous pouviez voir, et enregistré une règle seulement après votre accord. Toute la boucle a pris peut-être deux minutes — et vous n'avez jamais écrit de sélecteur ni ouvert les DevTools.

Voir aussi

• AI Helper teste dans les fenêtres TEMP avant d'enregistrer — pourquoi le modèle tester-puis-confirmer compte.
• Comment AI Helper inspecte la page — un regard plus rapproché sur les outils d'inspection de page.
• Le workflow agentique d'appel d'outils — la boucle jusqu'à 8 étapes derrière les puces.

Téléchargez JustZix — gratuit, sans compte, Chrome 100+ (également Edge, Brave, Opera, Vivaldi). Ajoutez une clé API et construisez votre première règle simplement en la demandant.