Le panneau d'édition à côté de votre page — Ctrl+Alt+I, O, P
Il arrive que l'on souhaite afficher le panneau d'édition JustZix à côté de la page, et non à sa place. Vous rédigez une règle pour Wikipedia, mais vous voulez aussi voir vos sélecteurs CSS toucher de vrais éléments au fur et à mesure de votre saisie. Trois nouveaux raccourcis disponibles depuis la v3.2.4 — Ctrl+Alt+I, Ctrl+Alt+O, Ctrl+Alt+P — ouvrent le panneau dans une seconde fenêtre du navigateur, sélectionnent automatiquement la première règle active pour la page courante et activent directement le bon onglet.
Trois raccourcis, trois onglets
Ctrl+Alt+I— panneau d'édition, onglet CSS.Ctrl+Alt+O— panneau d'édition, onglet JS.Ctrl+Alt+P— panneau d'édition, onglet Actions.
Le raccourci ouvre le panneau dans une fenêtre de navigateur séparée (type normal, 1200×850 — confortable sur un moniteur de taille moyenne ou supérieure), et non dans un nouvel onglet. Vous pouvez la conserver à côté de la page ou la déplacer sur un second écran.
Sélection automatique de la règle active
Une fois ouvert, le panneau parcourt votre arborescence de règles, repère la première règle active sur la page courante (dossier, groupe et règle ont tous la cascade activée, les motifs d'URL correspondent) et la sélectionne automatiquement. L'arborescence se déploie jusqu'à cette règle, l'onglet choisi devient actif — vous pouvez commencer à saisir immédiatement.
Si aucune règle ne correspond, le panneau s'ouvre vierge, prêt pour une nouvelle règle. C'est volontaire : vous êtes sur facebook.com, vous n'avez aucune règle — vous appuyez sur Ctrl+Alt+I, vous obtenez un panneau vide avec l'onglet CSS ouvert, deux clics et vous créez votre première règle.
Le même raccourci dans le panneau = changement d'onglet
Lorsque la fenêtre du panneau est déjà ouverte et que vous vous trouvez au niveau d'une règle (et non sur le tableau de bord ou dans l'éditeur d'un dossier ou d'un groupe), appuyer sur le même trio change l'onglet actif de la règle :
Ctrl+Alt+I→ onglet CSSCtrl+Alt+O→ onglet JSCtrl+Alt+P→ onglet Actions
Le raccourci ne crée pas une seconde fenêtre — le système place le focus sur celle qui existe déjà. Si vous vous trouvez sur le tableau de bord ou en train d'éditer un dossier ou un groupe, le raccourci utilisé dans le panneau ne fait rien (no-op), puisqu'il n'y a aucun « onglet actif » à basculer.
Compatible avec toutes les dispositions de clavier
La première version du raccourci détectait la touche via e.key. Sur la disposition polonaise Programmers, cela posait problème : AltGr+O produit ó, de sorte que Ctrl+Alt+O avec l'Alt de droite (= AltGr) donnait e.key === 'ó' et le raccourci ne se déclenchait pas. I et P n'ont pas de diacritiques sous AltGr en polonais, ils fonctionnaient donc.
En v3.2.5, la détection est passée à e.code (KeyI / KeyO / KeyP) — la touche physique, indépendante de la disposition et d'AltGr. C'est le même schéma que nous utilisons pour l'Assistant IA (e.code === 'Backslash'). Le raccourci fonctionne à l'identique sur toutes les dispositions : polonaise, allemande, française, russe, chinoise.
Cas d'usage 1 — rédiger une règle pour facebook.com avec l'aperçu à côté
Vous ouvrez facebook.com, vous appuyez sur Ctrl+Alt+I — dans une seconde fenêtre, le panneau apparaît avec l'onglet CSS ouvert. Vous saisissez un sélecteur, vous enregistrez, vous regardez facebook.com — l'élément a disparu. Vous regardez facebook.com, il manque manifestement quelque chose, vous redonnez le focus au panneau et vous éditez. Avec deux moniteurs, vous procédez ainsi sans Alt-Tab — avec un seul moniteur, vous faites glisser la fenêtre sur la moitié de l'écran et vous travaillez en mode partagé.
Cas d'usage 2 — une édition JS rapide sur une règle existante
Vous êtes sur YouTube, votre règle « YouTube : masquer les suggestions » a cessé de fonctionner après une mise à jour du site. Vous appuyez sur Ctrl+Alt+O — la seconde fenêtre s'ouvre directement sur l'onglet JS de votre règle YouTube (parce que c'est la seule règle active sur cet onglet). Vous corrigez, vous enregistrez, vous rechargez le premier onglet — cela fonctionne. Aucune recherche dans l'arborescence.
Cas d'usage 3 — un second écran comme panneau permanent
Si vous travaillez sur deux moniteurs : celui de gauche affiche le navigateur avec la page que vous consultez ; celui de droite est dédié au panneau JustZix. Ctrl+Alt+I/O/P sur l'écran de gauche ouvre ou place le focus sur le panneau de droite et bascule sur le bon onglet. Un flux de travail à la manière d'un IDE avec un volet de développement ouvert, mais face à une page réelle.
Architecture
Sous le capot : le content script détecte le raccourci et envoie une cible (type de raccourci + URL de l'onglet courant) au background. Le background vérifie si la fenêtre du panneau existe déjà :
- Elle n'existe pas → il crée une nouvelle fenêtre (
chrome.windows.createtypenormal, 1200×850) et enregistre un pending-nav danschrome.storage.local.jzPendingEditNav. Au démarrage, le panneau consomme la cible depuis le storage et choisit la règle et l'onglet. - Elle existe → il place le focus sur la fenêtre (
chrome.windows.update focused:true) et transmet la cible via le storage. Le panneau réagit àstorage.onChanged.
Cette approche est entièrement asynchrone et n'a nécessité aucune modification de options.js — celui-ci se contente de consommer _ruleEditorTab et jzPendingEditNav au démarrage et lors des changements de storage.
Voir aussi
- Fenêtres sur la page — les fenêtres de développeur à l'intérieur de la page
- Raccourcis clavier JustZix — l'antisèche complète — tous les raccourcis intégrés
- Les règles JS fonctionnent désormais sur Facebook, X et GitHub — le même flux de travail à côté de la page
Installez JustZix — et gardez un éditeur à côté de la page à portée d'un seul raccourci.
Notez cet article
Aucune note — soyez le premier.