El panel de edición junto a tu página — Ctrl+Alt+I, O, P
A veces quieres tener el panel de edición de JustZix al lado de la página, no en lugar de ella. Estás escribiendo una regla para Wikipedia, pero también quieres ver cómo tus selectores CSS impactan en los elementos reales mientras escribes. Tres nuevos atajos a partir de la v3.2.4 — Ctrl+Alt+I, Ctrl+Alt+O, Ctrl+Alt+P — abren el panel en una segunda ventana del navegador, seleccionan automáticamente la primera regla activa para la página actual y te dejan en la pestaña correcta.
Tres atajos, tres pestañas
Ctrl+Alt+I— panel de edición, pestaña CSS.Ctrl+Alt+O— panel de edición, pestaña JS.Ctrl+Alt+P— panel de edición, pestaña Acciones.
El atajo abre el panel en una ventana aparte del navegador (tipo normal, 1200×850 — cómoda en monitores medianos y grandes), no en una pestaña nueva. Puedes dejarla junto a la página o moverla a un segundo monitor.
Autoselección de la regla activa
Una vez abierto, el panel recorre tu árbol de reglas, encuentra la primera regla activa en la página actual (catálogo/grupo/regla con cascada activa, patrones de URL que coinciden) y la selecciona automáticamente. El árbol se despliega hasta esa regla, la pestaña elegida queda activa — puedes empezar a escribir de inmediato.
Si ninguna regla coincide, el panel se abre limpio, listo para crear una nueva. Es a propósito: estás en facebook.com, aún no tienes ninguna regla — pulsas Ctrl+Alt+I, obtienes un panel vacío con la pestaña CSS abierta, dos clics y creas la primera regla.
El mismo atajo dentro del panel = cambiador de pestaña
Cuando la ventana del panel ya está abierta y te encuentras a nivel de regla (no en el panel principal ni en el editor de un catálogo/grupo), pulsar el mismo trío cambia la pestaña activa de la regla:
Ctrl+Alt+I→ pestaña CSSCtrl+Alt+O→ pestaña JSCtrl+Alt+P→ pestaña Acciones
El atajo no crea una segunda ventana — el sistema enfoca la existente. Si por casualidad estás en el panel principal o editando un catálogo/grupo, el atajo dentro del panel no hace nada (no-op), porque no hay ninguna «pestaña activa» que cambiar.
Compatible con cualquier distribución de teclado
La primera versión del atajo identificaba la tecla por e.key. En la distribución polaca Programmers esto resultó ser un problema: AltGr+O produce ó, así que Ctrl+Alt+O con el Alt derecho (= AltGr) generaba e.key === 'ó' y el atajo no se disparaba. I y P en polaco no tienen diacríticos bajo AltGr, así que funcionaban.
En la v3.2.5 la detección pasó a e.code (KeyI / KeyO / KeyP) — la tecla física, independiente de la distribución y de AltGr. El mismo patrón que usamos para el AI Helper (e.code === 'Backslash'). El atajo funciona idénticamente en cualquier distribución: polaco, alemán, francés, ruso, chino.
Caso de uso 1 — escribir una regla para facebook.com junto a la vista previa
Abres facebook.com, pulsas Ctrl+Alt+I — en una segunda ventana aparece el panel con la pestaña CSS abierta. Escribes un selector, guardas, miras facebook.com — el elemento ha desaparecido. Miras facebook.com, falta algo evidente, cambias el foco al panel y editas. Con dos monitores haces esto sin Alt-Tab — con un solo monitor arrastras la ventana a media pantalla y trabajas en formato dividido.
Caso de uso 2 — una edición rápida de JS en una regla existente
Estás en YouTube, tu regla «YouTube: ocultar sugerencias» dejó de funcionar tras una actualización del sitio. Pulsas Ctrl+Alt+O — la segunda ventana se abre directamente en la pestaña JS de tu regla de YouTube (porque es la única regla activa en esta pestaña). Lo arreglas, guardas, recargas la primera pestaña — funciona. Sin tener que buscar en el árbol.
Caso de uso 3 — un segundo monitor como panel permanente
Si trabajas con dos monitores: el de la izquierda tiene el navegador con la página que visitas; el de la derecha está dedicado al panel de JustZix. Ctrl+Alt+I/O/P en el izquierdo abre o enfoca el panel a la derecha y salta a la pestaña correcta. Un flujo estilo IDE con el panel de desarrollo abierto, pero contra una página real.
Arquitectura
Bajo el capó: el content script detecta el atajo y envía un objetivo (tipo de atajo + URL de la pestaña actual) al background. El background comprueba si la ventana del panel ya existe:
- No existe → crea una ventana nueva (
chrome.windows.createtiponormal, 1200×850), guarda una pending-nav enchrome.storage.local.jzPendingEditNav. Al arrancar, el panel consume el objetivo desde storage y elige la regla + pestaña. - Existe → enfoca la ventana (
chrome.windows.update focused:true), envía el objetivo a través de storage. El panel reacciona astorage.onChanged.
Este enfoque es totalmente asíncrono y no requirió modificar options.js — simplemente consume _ruleEditorTab y jzPendingEditNav al arrancar y ante cambios de storage.
Véase también
- Ventanas en la página — ventanas de desarrollo dentro de la página
- Atajos de teclado de JustZix — la chuleta completa — todos los atajos integrados
- Las reglas JS ya funcionan en Facebook, X y GitHub — el mismo flujo junto a la página
Instala JustZix — y ten un editor junto a la página con un solo atajo.
Valora este artículo
Sin valoraciones — sé el primero.