JustZix — manual de uso

Inyección de estilos CSS propios, código JavaScript y botones de acción en cualquier página

Concepto y conceptos clave

JustZix permite inyectar automáticamente tu propio CSS y JavaScript en páginas seleccionadas, así como definir botones de acción (atajos que ejecutan fragmentos de código bajo demanda).

Jerarquía de datos

Patrones de URL a nivel de conjunto y de grupo

Cada conjunto y cada grupo puede tener su propia lista de patrones de URL adicionales (chip-input). Cuando la lista está vacía, el elemento funciona en todos los lugares donde coincida el patrón del directorio. Cuando estableces, por ejemplo, https://justzix.com/admin/*, el elemento solo funcionará en las subpáginas del admin.

Tutorial — introducción interactiva

Para los usuarios nuevos, JustZix incluye un tutorial interactivo que te guía paso a paso en la creación de una solución completa — desde una carpeta, pasando por un grupo y un conjunto de reglas, hasta el código CSS/JS y un botón de acción. Las indicaciones aparecen como globos junto a los sucesivos elementos del panel.

Cómo iniciarlo:

• Automáticamente — la primera vez que abres el panel, cuando aún no tienes ninguna carpeta.
• Manualmente — en cualquier momento desde el menú de ajustes → Tutorial.

En la ventana «Centro de tutoriales» eliges un tutorial y haces clic en Empezar. Durante el tutorial:

• Los botones Atrás y Siguiente se mueven entre pasos; la barra de la parte inferior del globo muestra el progreso.
• Algunos pasos esperan a que realices la acción indicada — p. ej. hacer clic en el botón resaltado.
• Los pasos con código de ejemplo tienen un botón Copiar.
• La tecla Esc o el botón × cierra el tutorial en cualquier momento.

Interfaz y navegación

Modo de edición

Acceso mediante clic derecho sobre el icono de la extensión → "Opciones", o clic sobre el icono → botón "Panel de edición".

• Logotipo en la parte superior del sidebar — el logotipo completo justzix (isotipo + wordmark Inter). Cambia automáticamente entre la variante light y dark según el modo de la aplicación (SVG inline + variables CSS, sin sustituir el archivo). Hacer clic en el logotipo abre el Panel.
• Sección "Directorios" — bajo el logotipo: la etiqueta "DIRECTORIOS" + el botón para añadir directorio, el buscador, el filtro "Solo activos".
• Árbol de directorios — carpeta ▶ grupo ▶ conjunto. La flecha de despliegue alterna su estado. Un clic sobre el conjunto pasa a editar solo ese conjunto.
• Menú Ajustes (drop-up en la parte inferior del sidebar) — un único botón que abre un panel con opciones: Modo oscuro, Manual de uso, Exportar ajustes, Importar ajustes, Importar desde URL, Sincronización en la nube, Mis shares, AI Helper, Página del proyecto, selección de idioma, el indicador de cuota de almacenamiento y el número de versión de la extensión. Se cierra con Escape o haciendo clic fuera del panel.
• Barra del directorio — etiqueta del botón (3 letras), color, nombre, patrón de URL, opciones del panel de acciones, exportación/importación, eliminación.
• Tarjetas de conjuntos — cada una con 3 pestañas: CSS JavaScript Acciones.
• Barra de breadcrumb — en el editor de directorio, grupo y conjunto muestra la ruta de navegación; en el extremo izquierdo está el icono de „casa" — un retorno rápido al Panel.
• Redimensionar el editor — la barra bajo cada editor (CSS y JS) se puede arrastrar hacia abajo para ampliar el área de trabajo.
• Toggle del sidebar — la barra vertical entre el sidebar y el editor oculta el panel izquierdo para disponer de más espacio.

Botón flotante (en páginas que coinciden)

Un pequeño botón circular aparece automáticamente en las páginas que coinciden con cualquier directorio. Por defecto muestra el texto ZIX, pero cada directorio puede tener su propia etiqueta.

Etiqueta del directorio: en la barra del directorio, en el extremo izquierdo (junto al selector de color) hay un campo de texto para la etiqueta del botón. Límites impuestos: máx. 3 caracteres, siempre en MAYÚSCULAS (la conversión a mayúsculas ocurre al instante mientras escribes). El campo acepta letras y cifras — ejemplos: ZIX, QA, DEV, ADM, X. Cuando varios directorios coinciden, se toma la etiqueta del primero que la tenga definida; los demás se ignoran (campo vacío = se recurre a ZIX).

Estado por color (paleta de marca):

• Inject Green (o el color del directorio si está definido) — todos los directorios que coinciden están habilitados
• Syntax Orange (o un color del directorio atenuado) — algunos habilitados, otros deshabilitados
• Muted Gray — todos deshabilitados
• Halt Red (con opacity 0.7) — la extensión está deshabilitada globalmente

Color del directorio: si en el directorio defines el selector de color, el botón flotante en las páginas que coinciden adoptará ese color. Los estados "mixed" y "off" modulan automáticamente la saturación. Cuando varios directorios coinciden, se toma el color del primero que lo tenga definido.

Panel

Al entrar en el panel de edición la extensión abre el Panel — la página principal con un resumen de la biblioteca y atajos rápidos. Antes el panel seleccionaba automáticamente el primer directorio de la lista; ahora, en su lugar, ves una vista general.

El Panel es accesible mediante el clic en el logotipo del sidebar y mediante el icono de „casa" en la barra de breadcrumb de cada editor (directorio, grupo, conjunto). La propia cabecera del Panel también tiene un icono de „casa" — al hacer clic en él se actualizan los datos (se recarga la biblioteca desde el storage y se vuelve a renderizar el Panel).

El Panel tiene un diseño con filas fijas de tarjetas:

• Biblioteca — inventario: número de directorios, grupos, conjuntos, acciones, barras de acciones, ventanas en el front-end así como conjuntos con CSS y conjuntos con JS.
• Estadísticas de uso — contadores reales: clics en acciones, aplicaciones de CSS, ejecuciones de JS y visualizaciones de ventanas. Los valores se suman de todos los dispositivos emparejados (mediante la sincronización en la nube).
• Conjuntos editados recientemente — lista de hasta 6 conjuntos más recientes (ordenados por fecha de modificación); el clic abre el conjunto en el editor.
• Consejo — un consejo aleatorio del manual; el conjunto cuenta con 30 consejos, entre los que te desplazas con los botones „anterior" / „siguiente". Al lado hay un enlace al manual completo.
• Últimos ejemplos — los ejemplos más recientes de la biblioteca de justzix.com (con categoría y fecha de adición).
• Del blog — las entradas de blog más recientes de la página del proyecto.
• Estado de la extensión — una fila de tres tarjetas: versión instalada (con la información de si hay una más reciente disponible), uso de la memoria chrome.storage.local y la fecha de la última copia de seguridad en la nube.

Las tarjetas „Últimos ejemplos" y „Del blog" obtienen su contenido de la página del proyecto; cuando el endpoint no está disponible (p. ej. sin conexión), ambas tarjetas se ocultan. La versión de la extensión se comprueba de nuevo cada vez que se entra en el panel.

Árbol de directorios (sidebar)

El panel izquierdo en modo de edición muestra los directorios en jerarquía — puedes desplegar cada directorio para ver sus conjuntos y pasar a editar uno concreto.

Navegación

Cambio de orden (drag & drop)

Pasa el cursor sobre un directorio, grupo o conjunto — a la izquierda aparecerá el asa de drag&drop. Sujétala con el ratón y arrastra:

Directorios

• Directorio → directorio — cambio de orden (una línea azul muestra el punto de inserción: encima o debajo del elemento)

Grupos

• Grupo → grupo (mismo directorio) — cambio de orden dentro del directorio
• Grupo → grupo (otro directorio) — traslado del grupo entre directorios
• Grupo → nombre del directorio — traslado del grupo al final del directorio de destino

Conjuntos

• Conjunto → conjunto (mismo grupo) — cambio de orden dentro del grupo
• Conjunto → conjunto (otro grupo) — traslado del conjunto entre grupos conservando la posición
• Conjunto → nombre del grupo — traslado del conjunto al final del grupo de destino
• Conjunto → nombre del directorio — traslado del conjunto al primer grupo del directorio (cuando el directorio tiene varios grupos)

Toggle del sidebar

La barra vertical entre el sidebar y el editor oculta el panel izquierdo — útil cuando necesitas más espacio para el editor. El estado se recuerda entre sesiones. Tras mostrar/ocultar, CodeMirror actualiza automáticamente su anchura.

Redimensionar los editores

Bajo cada editor (CSS, JS, código de acción) hay una barra horizontal con un asa para arrastrar en vertical. Sujétala con el ratón y arrastra hacia abajo para ampliar el editor. Altura mín. 80px, máx. ilimitada — la página se desplaza de forma natural con el contenido.

Buscador en los editores de código

Sobre cada editor de código CodeMirror — CSS y JavaScript en la tarjeta del conjunto, así como "Código JS" en el editor de acciones — hay una barra de búsqueda: un campo de texto y un botón con icono de lupa.

• Al ejecutar la búsqueda, todos los fragmentos encontrados se resaltan — la coincidencia actual en amarillo (texto negro), las demás en azul (texto blanco).
• Junto al campo aparece un contador de coincidencias con el formato n / total.
• Cuando hay más de una coincidencia, aparecen las flechas ▲ ▼ para moverte entre los resultados. La coincidencia actual se desplaza hasta quedar visible.
• Editar el código invalida los resultados — hay que volver a buscar.

Atajos

Patrones de URL

El patrón de URL define en qué páginas se activa el directorio.

Estados de los conjuntos (Activo / Habilitado)

Cada conjunto tiene dos flags independientes:

Cascada de interruptores

Toggle del directorio  →  cambia enabled de todas las active rules de sus grupos
Toggle del grupo       →  cambia enabled de todas las active rules de ese grupo
Toggle del conjunto    →  cambia solo enabled de ese conjunto

Las reglas con Activo: NO (badge ○) se omiten en las cascadas — las controlas solo manualmente, con independencia del estado de la carpeta y del grupo.

Ejemplos prácticos

Botón flotante y panel

En el panel desplegable (clic derecho) puedes:

• Habilitar/deshabilitar directorios individuales
• Habilitar/deshabilitar grupos individuales (cuando la carpeta tiene más de un grupo)
• Habilitar/deshabilitar conjuntos individuales del directorio
• Habilitar/deshabilitar barras de acciones — la sección "Barras de acciones" bajo la lista de conjuntos, un checkbox por barra, modifica actionBar.enabled (persistente, se propaga al panel de edición)
• Desconectar barras — la sección "Conexiones" aparece cuando el botón flotante está pegado a barras (snap & connect), con los botones "Desconectar de: X" + "Desconectar todas"

El panel muestra solo los conjuntos activos (●) — los independientes (○) se ocultan por concisión. Cuando la carpeta tiene un único grupo llamado "Predeterminado", la cabecera del grupo se omite — se ven solo los conjuntos.

Widget del popup (icono de la extensión)

Hacer clic en el icono de JustZix en la barra de extensiones de Chrome abre el widget del popup — un panel de control compacto para la pestaña actual. De arriba abajo:

• Panel de edición — un botón que abre el modo de edición (la página de opciones) en una pestaña nueva.
• Plugin enabled — el gran interruptor del interruptor global de la extensión (verde = habilitada, gris = deshabilitada).
• Modo de edición de la barra — el interruptor del modo de edición de la barra de acciones para la pestaña actual.
• AI Helper — el interruptor que abre / cierra la ventana del asistente de IA en la pestaña actual.
• Dirección URL de la pestaña actual.
• Lista de directorios que coinciden con la página — un checkbox que habilita/deshabilita cada directorio y el icono "eye-off" que oculta el botón flotante para esa página.
• Barras de acciones — una sección con un checkbox por barra (persistente actionBar.enabled).
• Restaurar botón flotante — un enlace que aparece cuando el botón ha sido ocultado para la página actual.

Barras de acciones (ActionBars)

En un mismo workspace puedes tener varias barras de acciones — cada una con su propio nombre, orientación, color de fondo, su propio conjunto de botones y una posición independiente por ventana del navegador. La barra puede asignarse a una carpeta, un grupo o un conjunto individual (lo cual decide la visibilidad y la cascada).

Creación y edición de una barra

En el editor del directorio, del grupo o del conjunto hay un botón "Barras de acciones (N)". El clic abre el modal de gestión de barras. En el modal:

• Añadir barra — eliges el nivel de asignación (carpeta / grupo / conjunto del contexto actual)
• Nombre (máx. 6 caracteres en MAYÚSCULAS) — una pestaña opcional con el nombre sobresale del borde de la barra
• Orientación — horizontal o vertical
• Color de fondo — selector de color (paleta de marca JustZix)
• Habilitada — cuando se desmarca, la barra no se renderiza en absoluto (no solo se oculta visualmente). El estado se guarda en storage, independiente de la posición por ventana

Visibilidad heredada hacia abajo

• La barra de carpeta es visible para todos los conjuntos activos de esa carpeta (agrega sus acciones mediante barId).
• La barra de grupo — solo para los conjuntos de ese grupo.
• La barra de conjunto — solo cuando el conjunto está activo.
• Una barra sin ninguna acción visible y habilitada en esa rama no se renderiza en absoluto.

Asignación de una acción a una barra

Cada acción de la pestaña "Acciones" de la tarjeta del conjunto tiene un dropdown "Barra de acciones" — eliges la barra de destino de la lista de las visibles para ese conjunto (barras propias del conjunto + barras del grupo + barras de la carpeta).

Pegado de barras (snap & connect)

Durante el arrastre de una barra, la extensión detecta los bordes de barras adyacentes y del botón flotante a una distancia ≤ 12 px. Aparece un indicador visual de adherencia y, al soltar, las barras se unen en un grupo de conexiones. A continuación:

• Las barras conectadas se mueven juntas (group drag).
• El botón flotante de JustZix también puede participar en las conexiones (__float como pseudo-barra).
• Las conexiones se recuerdan por ventana en la memoria de sesión.

Clic derecho sobre el asa de arrastre de la barra → menú contextual:

• Ocultar esta barra (hasta recargar) — ocultación en runtime por ventana del navegador. La barra vuelve tras F5 / cambio de URL / cerrar y abrir la pestaña. Para deshabilitación permanente: consulta Mostrar/ocultar barras más abajo.
• Desconectar de: X () — aparece para cada conexión adyacente.
• Desconectar todas las conexiones () — cuando la barra está conectada con más de una.

En el modo de edición de la barra este menú queda silenciado; el clic derecho sobre la etiqueta ofrece entonces la opción "Eliminar etiqueta".

Mostrar/ocultar barras — desde 3 lugares

Para habilitar/deshabilitar de forma permanente las barras de acciones (sin F5), la extensión ofrece tres puntos de entrada, todos mapeados al mismo actionBar.enabled en storage — un cambio desde un lugar se propaga al panel de edición y al resto de UIs:

1. Floating panel (clic derecho sobre el botón flotante principal de JustZix) — la sección "Barras de acciones" bajo la lista de carpetas/grupos/conjuntos. Un checkbox por barra muestra el estado persistente. Clic → toggle de actionBar.enabled.
2. Widget del popup (clic en el icono de la extensión junto a la dirección) — la sección "Barras de acciones" bajo la lista de carpetas. Además, por carpeta, un pequeño icono "eye-off" — oculta el botón flotante para la página actual (la restauración se hace con el enlace "Restaurar botón flotante").
3. chrome.contextMenus (clic derecho en la página → JustZix → Barras de acciones) — un submenú dinámico con un checkbox por barra. La lista se reconstruye por pestaña activa y con cada cambio de estado.

Modo de edición de la barra — disposición libre

El modo de edición de la barra de acciones se activa de tres maneras: con el atajo Ctrl+Alt+S (funciona desde cualquier lugar de la página), con el interruptor del widget del popup de la extensión, y desde el menú contextual de Chrome (clic derecho → "Modo de edición de la barra de acciones"). En la parte superior de la pantalla aparece una barra informativa; volver a usar cualquiera de los interruptores sale del modo.

En el modo de edición, el funcionamiento normal de los elementos queda suspendido (el clic no ejecuta código, los campos no aceptan el foco) — en su lugar, los elementos se pueden distribuir y escalar:

• Selección — clic = un solo elemento; Ctrl+clic = añadir/quitar de la selección; clic en zona vacía o Esc = deseleccionar todo. Shift+arrastre sobre zona vacía = selección por rango (rectángulo).
• Mover — arrastre de la selección con el ratón. Varios elementos seleccionados se mueven juntos.
• Redimensionar un elemento — con una sola selección aparece un marco con 8 asas (4 esquinas + 4 bordes).
• Redimensionar la barra — la barra tiene asas en el borde derecho, inferior y en la esquina (cambio del tamaño del lienzo).
• Etiquetas — el botón "+ Label" sobre la barra añade una etiqueta de texto estática en el primer hueco libre. Doble clic sobre la etiqueta abre el editor (texto, fuente, tamaño, color, "Eliminar"). Las etiquetas se mueven y escalan como los elementos de acción.
• Eliminar etiquetas — la tecla Delete elimina todas las etiquetas seleccionadas a la vez; el clic derecho sobre la etiqueta ofrece la opción "Eliminar etiqueta"; también hay un botón "Eliminar" en el editor de la etiqueta. Los elementos de acción se eliminan en el panel de edición (pertenecen a las reglas).
• Reset de la barra — el botón "Reset de la barra" sobre la barra restaura la disposición predeterminada (flow): elimina las posiciones y tamaños personalizados de los elementos y todas las etiquetas (con confirmación).
• Deshacer — Ctrl+Z deshace el último cambio (mover, redimensionar, añadir/editar/eliminar etiqueta, reset). El historial abarca la sesión de edición actual.

El modo de edición es "duro": al mover y redimensionar, los elementos se ajustan a una cuadrícula de 8 px, no se puede sacar un elemento fuera de la barra ni colocarlo sobre otro — en caso de colisión, ambos elementos (el que se mueve y el de debajo) reciben un marco rojo y, al soltar, el elemento vuelve a su posición anterior. La barra no se puede reducir de modo que un elemento quede fuera; cuando un nuevo elemento o etiqueta no cabe en la barra, el lienzo de la barra se amplía automáticamente. El clic derecho sobre la barra en modo de edición no muestra el menú "ocultar/desconectar barra".

Modos de disposición de la barra: la barra arranca en modo flow (flexbox clásico — elementos uno tras otro, en vertical u horizontal). El primer movimiento o reescalado de un elemento convierte la barra al modo custom (un lienzo con posicionamiento libre) — sin cambios visuales, ya que la disposición actual se captura como punto de partida.

Tipos de acción: BUTTON / SELECT / INPUT / SLIDER / TEXTAREA / TOGGLE3

Cada acción tiene un tipo — se elige con un dropdown al principio de cada acción en la tarjeta del conjunto. Hay disponibles 6 tipos:

Las etiquetas de texto estáticas no son un tipo de acción — se añaden directamente en la barra en modo de edición (consulta "Modo de edición de la barra" → etiquetas).

Campos comunes

• Label — máx. 6 caracteres (mayúsculas, monospace). Se muestra en el botón, como placeholder de INPUT/TEXTAREA, o como pestaña sobre SELECT/SLIDER/TOGGLE3.
• Color — selector de color (fondo del elemento; para TOGGLE3 = fondo del estado activo).
• Segundo color (colorText) — un selector junto al primero, más un campo hex con ctrl+C/V nativos. Semántica según el tipo:
  • BUTTON / SELECT (face) / INPUT / TEXTAREA — color del texto
  • SLIDER — color de la barra (accent-color del deslizador); el texto del label y del valor son campos aparte (consulta "Colores granulares" más abajo)
  • TOGGLE3 — color del texto del estado activo
  Cada selector tiene un botón × que restaura el valor por defecto (vacío = el renderer recurre al default de CSS — normalmente blanco).
• Barra de acciones — un dropdown que asigna la acción a un ActionBar concreto.
• Visibilidad — el checkbox "visible" permite ocultarla rápidamente sin eliminarla.
• Atajo de teclado — haz clic y pulsa la combinación (los atajos reservados de Chrome se advierten).
• Código JS — se ejecuta al activarse. Variables disponibles: value, $el (elemento DOM), $action ({ id, label, type, el }); para TOGGLE3 además stateIdx (0-2) y stateLabel.

SELECT — modal de opciones

El clic en "Opciones (N)" en la tarjeta de una acción de tipo SELECT abre un modal:

• Variant: static (las opciones se configuran aquí) o js (el código rellena un <select> nativo).
• Lista de opciones para static: cada fila es un { name, value }. name = lo que ve el usuario, value = lo que llega a JS como variable value.
• Colores granulares del dropdown — comunes a ambas variantes:
  • colorDropdownBg — fondo del panel popup (static) + fondo de <option> (variante js)
  • colorOption — color del texto del nombre de la opción en el dropdown
  • colorSelected — fondo de la opción seleccionada (static; en js es nativo, específico del navegador)
  • colorHover — fondo de la opción bajo el cursor (static)
• ID estable de la acción — el action.id completo con un botón copy + un selector JS de ejemplo.

INPUT — modal de configuración

• Placeholder — texto visible antes de escribir.
• Default value — valor inicial (cuando no hay entrada en la memoria).
• colorPlaceholder — color del texto del placeholder (mediante variable CSS, ya que el pseudo-elemento ::placeholder no es estilizable inline).
• ID estable de la acción + un selector JS de ejemplo.

SLIDER — modal de configuración

• Min / Max — rango numérico (p. ej. 0–100). Requerido: min < max.
• Step — paso (p. ej. 1, 5, 0.1). Default 1.
• Default value — valor inicial (cuando no hay memoria). Default (min+max)/2.
• Unit — unidad mostrada tras el valor (p. ej. "px", "%"). Opcional.
• colorLabel — color de la etiqueta a la izquierda de la barra.
• colorValue — color del número+unidad a la derecha.
• Código JS — se ejecuta en change (soltar el ratón / Tab / Enter). value = valor numérico.

TEXTAREA — modal de configuración

• Placeholder / Default value — análogo a INPUT (el valor inicial puede contener \n para los saltos de línea).
• Rows — número de filas visibles (1-20, default 3). Controla la altura del campo.
• colorPlaceholder — análogo a INPUT.
• Código JS — se ejecuta en change (blur, NO Enter — Enter en un textarea es un salto de línea legítimo). El usuario sale del campo → el valor se guarda y el código se ejecuta. value = string con saltos de línea.

TOGGLE3 — modal de configuración

• 3 estados — exactamente 3, cada uno con los campos label (máx. 5 caracteres, mayúsculas) y value (string pasado al código como value). Labels por defecto: OFF / MID / ON.
• Default state — un radio button junto a cada estado indica cuál es el inicial (cuando no hay memoria). Default 0.
• colorBg — fondo del contenedor wrap (todo el control segmentado).
• colorHover — fondo del hover sobre un botón inactivo.
• colorInactiveText — color del texto de los estados inactivos (el estado activo usa colorText).
• Código JS — se ejecuta en cada cambio de estado (clic sobre un inactivo). Variables: value (state.value, fallback a state.label), stateIdx (0-2), stateLabel, $el (el div contenedor).

Memoria persistente (SELECT, INPUT, SLIDER, TEXTAREA, TOGGLE3)

La selección / valor / posición del deslizador / contenido del textarea / estado activo del toggle3 se recuerdan automáticamente por acción. Tras F5 el valor vuelve; tras cerrar la pestaña y volver a abrirla (en una página que coincida con la regla) también. Singleton por action.id — un valor independiente de la URL concreta.

Formato del valor en la memoria según el tipo:

• SELECT (ambas variantes), INPUT, TEXTAREA → string
• SLIDER → number (o string-numeric tras el roundtrip con storage)
• TOGGLE3 → integer 0-2 (el ÍNDICE del estado activo, no el value)

Storage:

• Primario: sessionStorage — síncrono, F5-safe, por pestaña.
• Backup: chrome.storage.local.actionMemory[id] — cross-tab, duradero.

Sin sincronización cross-device: la memoria permanece en local. Dos ordenadores pueden tener valores distintos (p. ej. un filtro distinto por usuario).

ID estable de la acción

Cada acción tiene un action.id inmutable (formato a_<base36>_<random>). En la tarjeta del conjunto, junto a cada acción hay un badge con el número de fila — el clic copia el ID completo al portapapeles, el tooltip muestra el ID completo.

En el user-JS, refiérete a ella mediante data-jz-action-id:

const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');
el.value = 'nuevo valor';
el.dispatchEvent(new Event('change'));

O mediante los helpers window.JZ — consulta Invocación programática de acciones desde JS.

Menú contextual de Chrome

Clic derecho en cualquier página → JustZix:

• Habilitar/deshabilitar el botón flotante para esta página — toggle de la visibilidad del botón flotante principal (análogo al "eye-off" del popup).
• Modo de edición de la barra de acciones (habilitar/deshabilitar) — alterna el modo de edición de la barra en la pestaña activa; el tercer punto de entrada junto al atajo Ctrl+Alt+S y al interruptor del popup.
• AI Helper (habilitar/deshabilitar) — abre o cierra la ventana del asistente de IA en la pestaña activa.
• Barras de acciones ▸ — un submenú con un checkbox por barra. La lista contiene exclusivamente las barras relevantes para la pestaña activa. El checkbox = estado persistente actionBar.enabled.
• Ventanas CSS ▸ / Ventanas JS ▸ / Consolas JS ▸ / Consolas Output ▸ — un submenú análogo para cada uno de los 4 tipos de ventana del frontend (consulta la sección de más abajo). El checkbox = estado enabled por ventana.
• Ventana temporal (TEMP) ▸ — un submenú con 4 elementos: TEMP CSS pane / TEMP JS pane / TEMP JS Console / TEMP Output Console. Clic = toggle (crear o cerrar). Funciona en cualquier página, con independencia de la coincidencia de carpeta.

Los submenús de ventanas se reconstruyen en: tabs.onActivated, tabs.onUpdated (cambio de URL), y storage.onChanged para folders/groups/rules/actionBars/cssPanes/jsPanes/jsConsoles/outputConsoles/floatingHidden. El submenú TEMP es estático (siempre 4 elementos).

Ventanas en el frontend (CSS / JS / Consolas)

La extensión ofrece cuatro tipos de ventanas flotantes inyectadas en las páginas, junto a las barras de acciones. Cada ventana está asignada a una carpeta, grupo o conjunto (hereda la visibilidad en cascada, igual que las barras de acciones) y aparece en las páginas que coinciden por URL.

Gestión: en el editor de la carpeta / grupo / conjunto encontrarás un botón "Ventanas ▾ (N)". El clic despliega un menú con los 4 tipos — eliges el tipo y se abre un modal con la lista de ventanas de ese nivel (más las ventanas heredadas de niveles superiores). Las añades, nombras, coloreas, eliminas.

CSS pane

Una ventana flotante con un campo de texto para CSS. Cada cambio (tras una breve pausa) actualiza el <style> inyectado — ves el efecto en vivo. El contenido se recuerda por pestaña del navegador (sobrevive a F5, desaparece al cerrar la pestaña). Ideal para probar CSS rápidamente sin guardarlo en una regla.

JS pane

Un campo de texto para JavaScript ejecutado en el contexto de la página. El código se ejecuta tras un cambio (con retardo) o manualmente con el botón ▶ Run / el atajo Ctrl+Enter. Los errores de ejecución aparecen en una barra roja bajo el código. Cuando el código se ha modificado desde la última ejecución, el botón Run se ilumina en amarillo (estado "dirty").

JS Console (REPL)

Una consola completa dentro de la página. Escribes código en el campo inferior, Ctrl+Enter (o ▶) lo ejecuta, el resultado se añade al área de logs superior. Funciones:

• Historial de comandos — las flechas ↑/↓ en la primera/última línea del input recorren los comandos anteriores (como en una terminal).
• Ctrl+L — limpia el output.
• Captura de console.* — las llamadas console.log/warn/error/info durante la ejecución se muestran en el log (coloreadas según el tipo).
• Líneas coloreadas: comando (azul), resultado (claro), error (rojo), console.log (gris), console.warn (amarillo).

El input, el output y el historial se recuerdan por pestaña. La consola ejecuta el código en el MAIN world de la página — tienes acceso a todas las variables y funciones de la página.

Output Console

Una vista de solo lectura de los logs — captura automáticamente todo lo que ocurre en la página: console.log/warn/error/info/debug, excepciones no capturadas, Promise rejections no manejadas, el tráfico de red y los push a dataLayer, así como tu propio logger window.JUSTZIX.*. A diferencia de la JS Console (donde tú mismo escribes el código), aquí los logs fluyen solos.

Seis pestañas con contadores

La ventana se divide en 6 pestañas, cada una con un contador de entradas (badge):

Barra de filtros contextuales

Entre las pestañas y el campo de búsqueda hay una barra de filtros que cambia según la pestaña seleccionada:

• All — sin filtros adicionales.
• JZconsole / Console — casillas de selección de niveles: log, info, warn, error, debug. Desmarca un nivel → las líneas desaparecen de la vista.
• Network — tres filas: tipo de recurso (document, script, stylesheet, image, xhr/fetch, font, …), clase de estado HTTP (2xx/3xx/4xx/5xx) y deslizadores de rango de tamaño y tiempo (0–100000 ms) más un campo de filtrado por dominio. Las filas de checkboxes tienen los atajos marcar todo / desmarcar todo.
• Errors — sin checkboxes; cada error se despliega para ver los detalles.
• DataLayer — la ventana se divide por la mitad (consulta más abajo).

Buscador

Bajo la barra de filtros hay un campo de búsqueda siempre visible. Filtra en vivo las entradas de la pestaña activa (coincidencia de fragmento, sin distinguir mayúsculas). Esc limpia el campo.

Logs de consola — desplegables como en DevTools

Las entradas console.* aparecen por defecto contraídas — muestran una vista previa abreviada (p. ej. [PickupMap][2026-05-16T15:25Z] AUTO_SELECTION_SKIPPED: {reason: 'Lower priority source', …}). El clic despliega los argumentos completos (objetos/arrays como un árbol JSON desplegable), análogamente a la consola de DevTools.

Pestaña Network

Network captura las peticiones mediante chrome.webRequest (permiso webRequest en el manifest). Cada entrada muestra, entre otras cosas, el método, la URL, el estado, el tipo de recurso, el tamaño, la duración, la dirección remota (Remote address) y el iniciador (Initiator). El búfer de peticiones se mantiene en segundo plano, por lo que las entradas anteriores a la apertura de la ventana también aparecen.

Pestaña DataLayer

La ventana DataLayer se divide en dos columnas:

• Izquierda — Nuevos push: el flujo de las sucesivas llamadas dataLayer.push(...) en orden de eventos.
• Derecha — Estado actual: el contenido en vivo del objeto window.dataLayer como un árbol JSON desplegable e indexado (0:, 1:, …) — profundizas en los datos anidados, análogamente al inspector de objetos de DevTools. La instantánea se actualiza tras cada push. En la cabecera de la columna derecha hay botones desplegar todo / contraer todo — funcionan recursivamente sobre todo el árbol.

Los clics en la propia interfaz de JustZix (desplegar nodos del árbol, botones de la ventana) no llegan a esta pestaña. Si la página recopilara eventos click (p. ej. GTM auto-event), un clic en la ventana generaría un push a dataLayer y restablecería el despliegue del árbol — la extensión reconoce esos push y no los reporta (el window.dataLayer real de la página permanece intacto).

Logger propio — window.JUSTZIX

La Output Console expone una API global para registrar desde tu código (JS pane, acciones, código de la página):

JUSTZIX.log('log normal');
JUSTZIX.warn('advertencia');
JUSTZIX.error(new Error('error'));   // mostrará el stack trace
JUSTZIX.info({ obj: 1, arr: [2,3] });
JUSTZIX.debug('detalles');           // oculto por defecto (filtro)

Alias disponibles:

• window.JUSTZIX — el principal, siempre funciona
• window.__JUSTZIX__ — un alias siempre disponible
• window.JZ — un alias solo si la página no tiene su propio window.JZ (algunas páginas, p. ej. Google Ads, ocupan ese nombre)

Tras aparecer la Output Console verás en el log una línea de bienvenida que indica qué alias está disponible en esa página.

Qué se captura

• console.log/warn/error/info/debug(...) de la página — también pasan a la consola normal de DevTools (no la bloqueamos)
• window.JUSTZIX.*(...) — tu canal dedicado (no va a DevTools)
• Excepciones no capturadas (throw new Error(...)) — mostradas en rojo con el lugar del error
• Promise rejections no manejadas — Promise.reject(...) sin .catch

Los errores de las peticiones fetch/XHR no llegan a la pestaña Errors (no son excepciones JS) — los encontrarás en la pestaña Network por el estado 4xx/5xx. No capturamos las violaciones de CSP ni las advertencias internas de Chrome.

Ayuda rápida — Ctrl+Shift+H

Ctrl+Shift+H abre una ventana desplazable de ayuda rápida — una guía para usar JustZix en la página: atajos globales, atajos dentro de las ventanas, la Consola Output, manejo de las ventanas con el ratón, el modo edición de barra y el registro en la Consola Output. Funciona en cualquier página. Arrastras la ventana por la cabecera; Esc / clic fuera / × / volver a pulsar Ctrl+Shift+H la cierra.

Personalización del aspecto de la ventana

Colores: en el modal de gestión (panel de edición) cada ventana tiene un selector de color — el punto de la cabecera, el fondo y el texto de la cabecera, el fondo y el texto del body, el color de los botones de acción.

Fuente y tamaño: clic derecho sobre la barra de cabecera de la ventana → un menú con selección de fuente (Consolas, Menlo, Monaco, Courier New y otras monospace) y de tamaño (10–24 px).

Arrastrar, adherir y conectar

Cada ventana se arrastra por la barra de cabecera. Al acercar un borde a otra ventana / barra de acciones / botón flotante (≤ 12 px) aparece una atracción magnética — las ventanas se pegan formando un grupo. Arrastrar un grupo pegado mueve todos los elementos juntos. Las posiciones se recuerdan por ventana del navegador.

Redimensionar la ventana

Cada ventana tiene 8 asas de redimensionado: 4 en las esquinas (cambio de anchura y altura a la vez) y 4 en los bordes (cambio de un solo eje). El asa arrastrada mantiene el borde opuesto en su sitio. Rango: anchura 180–1200 px, altura 120–900 px. El nuevo tamaño (pane.size) se guarda — para las ventanas permanentes se sincroniza entre dispositivos, para las ventanas TEMP por pestaña.

Desplazamiento dentro de la ventana

El desplazamiento con la rueda del ratón dentro de una ventana desplaza únicamente el contenido de esa ventana — la página de debajo no se desplaza. Esto también se aplica cuando el área de la ventana llega al final del desplazamiento o cuando el cursor está sobre una parte no desplazable (la cabecera, la barra de filtro).

Clic derecho sobre la cabecera de la ventana

• Traer al frente / Enviar al fondo — cambiar el orden de las ventanas cuando se solapan (salto único por encima / por debajo de todos los vecinos que se solapan).
• Desconectar de: X / Desconectar todas las conexiones — cuando la ventana está pegada.
• Cerrar ventana [tipo] — oculta la ventana (se puede volver a habilitar desde el panel / popup).
• Fuente / Tamaño — selección de la fuente y el tamaño del texto.

Botón de cerrar y doble clic en la cabecera

Cada ventana (tanto temporal TEMP como persistente) tiene un botón × de cerrar en la esquina derecha de la cabecera. Las TEMP se ocultan (reábrelas desde el menú contextual de la página o con un atajo), las persistentes — se desactivan (reactívalas con la casilla en el popup). Doble clic en la barra de la cabecera:

• Persistentes (CSS pane / JS pane / JS Console / Output Console) — pliegan / despliegan la ventana hasta la cabecera. Estado recordado.
• TEMP — alterna entre el tamaño recordado ↔ predeterminado.
• AI Helper — alterna entre el tamaño recordado ↔ predeterminado.

Pegado y resaltado del borde

Cuando el borde de una ventana se acerca a otra ventana de JustZix (umbral de 12 px), aparece un borde rojo en el lado del pegado (en ambas ventanas). Soltar el cursor en esta posición ejecuta el snap — las ventanas se mueven después como grupo. Todas las ventanas de la extensión participan en este mecanismo: barras de acciones, FAB, paneles persistentes (CSS/JS/Console/Output), TEMP y el AI Helper.

Paneles TEMP — ventanas temporales

Puedes crear una ventana temporal en cualquier página — incluso una para la que no tengas ninguna carpeta. Los paneles TEMP son una herramienta rápida ad-hoc: pruebas CSS/JS en una página ajena sin configurar reglas.

Características de los paneles TEMP:

• Funcionan en cualquier página (omiten la coincidencia de carpeta)
• Se recuerdan por pestaña — sobreviven a F5, desaparecen al cerrar la pestaña. No se sincronizan entre dispositivos.
• Un color distinto al de las ventanas estándar — naranja (CSS), rojo (JS), rosa (JS Console), cian (Output) — todo el marco de la ventana en ese color.
• "TEMP" en el nombre.
• Una cruz roja × en la esquina superior derecha de la cabecera — cierra la ventana. Los datos (código, log, geometría) permanecen en la sesión — reabrir una ventana del mismo tipo los restaura. Solo desaparecen al cerrar la pestaña.
• Icono de papelera en la cabecera de TEMP CSS / TEMP JS — borra el contenido del editor con un clic. El borrado va al historial de deshacer del navegador (Ctrl+Z lo revierte). Para CSS, el <style> en vivo se actualiza al instante.
• Como máximo una unidad de cada tipo — la segunda pulsación del atajo cierra la ventana existente; la tercera la vuelve a abrir con el contenido conservado.
• Memoria de tamaño (por dispositivo) — después de redimensionar una ventana TEMP, su último tamaño se recuerda por separado para cada tipo (CSS / JS / JS Console / Output) en el almacenamiento del dispositivo. Sobrevive a un reinicio del navegador y no se sincroniza entre dispositivos. Una ventana TEMP recién abierta arranca con el tamaño predeterminado (380×240).
• Doble clic en la cabecera = alternar tamaño — un doble clic en la barra de cabecera de una ventana TEMP la alterna entre el tamaño predeterminado y el tamaño recordado.

Creación / cierre (toggle):

• Ctrl+Alt+G — TEMP CSS pane
• Ctrl+Alt+H — TEMP JS pane
• Ctrl+Alt+J — TEMP JS Console
• Ctrl+Alt+K — TEMP Output Console
• o: clic derecho en la página → JustZix → Ventana temporal (TEMP) ▸

AI Helper — asistente de IA

AI Helper es un asistente de IA integrado en la extensión que ayuda a preparar e implementar una solución CSS/JS para una tarea concreta en la página actual. El modelo puede examinar la página, probar código en vivo en ventanas TEMP y — tras tu aceptación — crear un directorio, grupo y conjunto listos para usar.

Configuración de las claves API

En el menú Ajustes del sidebar, el elemento "AI Helper" abre un modal de configuración:

• Claves API de tres proveedores: OpenAI, Anthropic y Gemini (Google). Basta con la clave de un proveedor para usar el asistente.
• Proveedor por defecto y modelo por defecto — usados al abrir la ventana del chat (el modelo también se puede obtener automáticamente — entonces se elige el más alto disponible).
• Junto a cada clave hay un checkbox "sincronizar" (deshabilitado por defecto).

Ventana del chat

La ventana de AI Helper es una ventana flotante (por pestaña, como las ventanas TEMP — arrastrable, escalable con 8 asas, con cruz de cierre, una sola instancia). La abres / cierras:

• con el atajo Ctrl+Alt+\,
• con el interruptor "AI Helper" en el widget del popup,
• desde el menú contextual de Chrome → JustZix → AI Helper.

En la ventana: selección del proveedor (cuando tienes más de una clave) y del modelo (lista obtenida en vivo), el historial de la conversación, un botón para limpiar la conversación y un campo de texto (se envía con el botón o con Ctrl+Enter). El modelo recibe automáticamente el contexto de la página actual — URL, título y un fragmento del HTML.

Workflow agéntico

AI Helper conduce la conversación según un workflow establecido:

1. Pregunta por los detalles — alcance de la URL, nombres de carpeta/grupo/conjunto, colores, el objetivo exacto.
2. Examina la página con la herramienta query_page (selectores, estructura del DOM) antes de escribir el código.
3. Inserta el código CSS/JS preparado en una ventana temporal TEMP, que ves en vivo en la página.
4. Verifica los errores por sí mismo — con las herramientas read_temp_pane y read_console comprueba que el código probado no reporte errores antes de mostrarte el resultado.
5. Pide que compruebes el efecto y pregunta explícitamente si la prueba ha salido bien.
6. Cuando la prueba no ha salido — corrige el código y vuelve a probarlo.
7. Solo tras tu confirmación consolida la solución: crea el directorio → el grupo → el conjunto y, si es necesario, también una barra de acciones y acciones. Cada creación de una entidad requiere una confirmación aparte en la extensión.

El modelo usa las herramientas mediante un protocolo de texto simple (un bloque @@JZ_TOOL@@ … @@END@@) que funciona de forma idéntica para OpenAI, Anthropic y Gemini. Las llamadas a las herramientas y sus resultados aparecen en la ventana como "chips" aparte. Herramientas disponibles:

Apariencia de la ventana de AI Helper

Un clic derecho sobre la barra del encabezado de la ventana de AI Helper abre un menú con las opciones «Traer al frente» / «Enviar al fondo» (cambiar el orden de las ventanas JustZix cuando se superponen), «Desconectar de: X» (cuando AI Helper está pegado a otra ventana) y «Apariencia…». El panel «Apariencia…» permite estilizar por separado cuatro roles en la conversación: tus mensajes, respuestas de la IA, resultados de herramientas, formularios en línea — cada uno con su propia fuente, tamaño, color de texto y de fondo. Los valores se guardan por dispositivo.

Pegado con otras ventanas y orden (Z-order)

La ventana de AI Helper participa del mismo mecanismo de pegado que las barras de acciones, las ventanas persistentes (CSS / JS / Console / Output) y las ventanas TEMP. Arrastrar un borde cerca de otra ventana de JustZix (umbral de 12 px) → atracción magnética, un borde rojo indica el lado del pegado en ambas ventanas. Las ventanas pegadas se mueven como grupo.

Cuando las ventanas se solapan, las opciones «Traer al frente» / «Enviar al fondo» en el menú contextual de cada ventana (clic derecho en el encabezado) hacen un salto único — la ventana pasa por encima / por debajo de todos los vecinos que se solapan, sin necesidad de hacer clic varias veces.

Captura de la página (para modelos con visión)

La herramienta screenshot_page captura la vista actual de la página y la envía al modelo como imagen. Toda la interfaz de JustZix se oculta automáticamente antes de la captura (FAB, barras de acciones, AI Helper, paneles persistentes, TEMP). Un búfer de las 3 capturas más recientes, adjuntadas una sola vez a la siguiente solicitud (tras enviar — eliminadas del búfer, para ahorrar tokens). Requiere un modelo compatible con visión (p. ej. gpt-4o, claude-3+/4, gemini-1.5+/2). Debajo del chip de resultado en el chat aparece una miniatura — un clic abre la vista a pantalla completa.

Atajos de teclado

Globales (funcionan desde cualquier lugar de la página)

Dentro de una ventana (cuando tiene el foco)

Editores de código (panel de edición)

Exportación e importación

La extensión ofrece cinco formatos de exportación (completo, parcial, directorio, grupo, conjunto) con detección automática del tipo de archivo al importar, para evitar sobrescrituras accidentales.

Exportación — completa o de elementos seleccionados

En el menú Ajustes del sidebar: Exportar ajustes. El modal abre dos modos:

• Todo — exporta todos los directorios, grupos, conjuntos y los ajustes globales (botón flotante, paneles ocultos, etc.)
• Seleccionados — muestra un árbol carpeta → grupos → conjuntos con checkboxes:
  • El checkbox de directorio / grupo marca todos los elementos por debajo
  • El estado indeterminate (guion) muestra una selección parcial en cada nivel
  • Los botones Marcar todos / Desmarcar todos para una manipulación rápida
  • Un resumen en vivo en la parte inferior muestra qué se va a exportar

Los archivos de exportación parcial tienen el nombre justzix-partial-FECHA.json (frente a justzix-backup-FECHA.json para el completo), y dentro un flag partial: true y un campo groups[].

Exportación de un directorio individual (con selección)

En la barra del directorio: Exportar — abre un modal con un árbol de grupos y conjuntos (análogo al de la exportación parcial, pero limitado a ese directorio). Se exportan solo los conjuntos marcados y los grupos a los que pertenecen — los grupos vacíos no llegan al archivo.

Formato justzix-folder — el archivo contiene un campo groups[] con la jerarquía de grupos y conjuntos del directorio.

Exportación de un grupo

En la barra del grupo: Exportar — un modal con la lista de conjuntos del grupo (checkboxes). Archivo: justzix-grupo-<nombre>-<fecha>.json, formato justzix-group.

Exportación de un conjunto individual

En la vista del conjunto: Exportar conjunto — descarga el archivo inmediatamente (sin modal). Formato justzix-rule, nombre: justzix-conjunto-<nombre>-<fecha>.json.

Importación — detección automática del tipo (modal de importación completa)

Tras cargar un archivo / pegar el JSON, la extensión reconoce automáticamente el tipo y muestra un panel de detección coloreado:

Modos de importación parcial (panel morado)

• Fusionar con los actuales (predeterminado) — empareja los directorios por ID, añade los nuevos; los demás directorios de los ajustes actuales quedan intactos.
  En caso de conflicto de ID aparece un prompt con 3 opciones:
  • 1 / sobrescribir — sobrescribe los directorios existentes (eliminará sus grupos y conjuntos)
  • 2 / copia (predeterminado) — importa como copias con nuevos ID, "(import)" en el nombre de la carpeta, sin pérdida de datos existentes
  • Cancelar — interrumpe la importación
• Reemplazar los actuales — limpia todo e inserta solo los elementos marcados del archivo.

Importación de un directorio individual

En la barra del directorio: Importar. Comprueba conflictos por ID y por nombre:

• Importar como nuevo — con el añadido "(import)" en el nombre
• Sobrescribir — elimina los grupos y conjuntos antiguos del directorio e inserta los nuevos
• Fusionar — añade los nuevos grupos / conjuntos al directorio existente (conservando ambos)

Importación de un grupo

En la barra del grupo: Importar — acepta 3 formatos:

• justzix-group — inserta todos los conjuntos del grupo del archivo
• justzix-folder — inserta todos los conjuntos de todos los grupos de la carpeta
• justzix-rule — inserta un conjunto

Todos los conjuntos del archivo llegan al grupo actual con nuevos ID (la operación es siempre del tipo "añadir copia" — sin conflictos).

Importación de un conjunto individual

En la vista del conjunto: Importar conjunto — acepta solo justzix-rule. Un prompt con 3 opciones:

• 1 / reemplazar — reemplaza el contenido del conjunto actual (id y groupId conservados)
• 2 / copia (predeterminado) — añade como un conjunto nuevo junto al actual, en el mismo grupo, con el añadido "(import)"
• Cancelar — interrumpir

Usos prácticos de la exportación parcial

• Compartir con el equipo — exporta 2-3 directorios con la configuración del proyecto, los compañeros los importarán en modo "Fusionar" sin perder sus ajustes
• Backup solo de las configuraciones importantes — p. ej. producción se queda, los experimentos se omiten
• Migración parcial — traslada solo un conjunto entre dispositivos
• Versionado — exporta un directorio concreto a git junto con la documentación del proyecto

Sincronización en la nube

Ajustes → Sincronización en la nube abre el modal de la cuenta de sincronización. La extensión mantiene tu biblioteca (directorios, grupos, conjuntos, acciones, barras de acciones, ventanas en el frontend) en la nube de justzix.com y la conserva coherente entre dispositivos. La sincronización funciona solo cuando has iniciado sesión — sin una cuenta la extensión funciona únicamente en local.

Cuenta y clave de sincronización

• Registro — la extensión genera una clave de sincronización (el secreto único de la cuenta). Guárdala en un lugar seguro — es la única forma de iniciar sesión en otro dispositivo.
• Inicio de sesión — pegas la clave de sincronización más una etiqueta opcional del dispositivo (p. ej. "Portátil del trabajo"). Puedes decidir si la clave se recuerda en el almacenamiento de la extensión o se mantiene solo durante la sesión.
• Se puede vincular un correo electrónico a la cuenta (verificado mediante un enlace) — se usa para recuperar el acceso.

Primera sincronización — resolución de conflictos

Al iniciar sesión, la extensión compara los datos locales con los datos de la nube:

• Solo la nube tiene datos → se descargan a este dispositivo.
• Solo el dispositivo tiene datos → se envían a la nube.
• Ambos tienen datos → aparece un modal de conflicto con tres estrategias:

También puedes Cancelar — la extensión cierra entonces la sesión y no cambia nada.

Sincronización continua

Tras la primera conciliación, la sincronización se ejecuta en segundo plano: la extensión envía los cambios y descarga las nuevas entidades aproximadamente una vez por minuto. Un cambio realizado en un dispositivo aparece en los demás al cabo de poco tiempo. El punto de estado junto al elemento "Sincronización en la nube" indica si la cuenta está conectada.

Pestaña Estado — biblioteca en la nube, historial, acciones

La pestaña Estado del modal de sincronización muestra el estado de la cuenta y ofrece botones de acción:

• Sincronizar ahora — push inmediato de los cambios y pull de las nuevas entidades.
• Instantánea completa — obtiene una instantánea de la biblioteca desde la cuenta.
• Actualizar los datos de la cuenta — actualiza la información de la cuenta y la lista de sesiones activas.
• Resincronización completa con la cuenta — bidireccional: primero obtiene toda la biblioteca desde la cuenta y después envía las entidades locales que faltan en la cuenta. Repara las entidades «atascadas» localmente — aquellas que nunca llegaron al servidor (push rechazado, ausentes en el primer volcado) y que la sincronización normal no detecta porque no cambian. No destructiva: las entidades ya presentes en la cuenta se omiten (sin sobrescribir versiones más nuevas), y las entidades eliminadas en otro dispositivo no se resucitan.

Biblioteca en la nube

Contadores de las entidades que se encuentran en la cuenta: directorios, grupos, conjuntos, acciones, barras de acciones, ventanas en el frontend. Solo se cuentan las entidades alcanzables en el árbol (un grupo debe tener un directorio existente, un conjunto — un grupo, una barra/ventana — un padre existente) — de forma coherente con los contadores del Panel. Se actualizan al abrir el panel y tras una sincronización manual.

Historial de sincronización

Un registro local del dispositivo de las últimas sincronizaciones. En la página se ven las últimas 10 entradas; el botón «Ver historial completo» abre una ventana con la lista completa (hasta 100 entradas). Cada entrada contiene:

• la hora y el dispositivo que la inició — nombre e ID numérico de la sesión (el mismo que en «Sesiones activas»);
• un resumen numérico — ↑ enviadas, ↓ recibidas, ✕ eliminadas;
• los cambios concretos — agrupados por tipo con un contador (p. ej. «Acciones ×10») y con los nombres de los elementos cuando se conocen;
• el estado cuantitativo de la biblioteca tras la sincronización (seis contadores).

El registro es local — no se sincroniza entre dispositivos. Se crea una entrada tras cada tick de sincronización que cambió algo realmente; el «Sincronizar ahora» manual siempre deja una entrada, incluso sin ningún cambio.

Qué se sincroniza y qué no

• Se sincroniza: directorios, grupos, conjuntos, acciones, barras de acciones, ventanas en el frontend (paneles CSS/JS, consolas), tema (claro/oscuro) e idioma de la interfaz, y también las claves API de AI Helper — pero solo aquellas con la casilla "sync" marcada junto a la clave (consulta AI Helper).
• No se sincroniza (estado por dispositivo): las posiciones de las ventanas y barras flotantes, los tamaños de las ventanas, la memoria de valores de SELECT/INPUT, las ventanas TEMP, las claves API sin la casilla marcada.

Las estadísticas de uso (aplicaciones de CSS, ejecuciones de JS, visualizaciones de ventanas) se sincronizan como entidades separadas por dispositivo — la tarjeta del Panel las suma de todos los dispositivos emparejados. El tema y el idioma se sincronizan como un ajuste común de la cuenta y se aplican en la siguiente apertura del panel en el otro dispositivo.

Compartir por enlace (Shares)

Una alternativa a enviar un archivo JSON por mensajería. Generas un enlace público con un tiempo de vida (1h / 6h / 12h / 24h / 48h) y se lo pasas al destinatario. El backend de justzix.com guarda el payload en la nube hasta su caducidad, después se elimina.

Requiere una cuenta de sincronización (Sync) con la sesión iniciada. El token en sí es un secreto público — cualquiera con el enlace lo descargará, así que no lo envíes por canales públicos si el contenido es sensible.

Formato del token

JZS-XXXX-XXXX-XXXX-XXXX (16 caracteres Crockford base32, ~80 bits de entropía). También se acepta la URL completa https://www.justzix.com/s/JZS-... — la extensión la parsea y normaliza (las letras confusas I/L→1, O→0, U→V).

Límites de la cuenta

• máx. 20 enlaces activos por cuenta
• máx. 50 MB en total
• máx. 5 MB por share individual
• máx. 30 enlaces nuevos por hora

Superar el límite = un error con un mensaje. Revoca los enlaces que no uses en el panel Mis shares.

Creación del enlace (emisor)

El botón "Compartir URL" en cuatro puntos de entrada, junto a "Descargar archivo":

• Exportación completa — Ajustes → Exportar ajustes → botón "Compartir URL" (tipo justzix-full)
• Directorio — barra del directorio → Exportar → "Compartir URL" (tipo justzix-folder)
• Grupo — barra del grupo → Exportar → "Compartir URL" (tipo justzix-group)
• Conjunto — toolbar en la vista del conjunto → "Compartir URL" junto a Exportar / Importar (tipo justzix-rule)

El clic abre el modal de generación del enlace: subject + summary de lo que compartes, un radio con el TTL (24h por defecto), "Generar enlace". Tras el éxito, el modal cambia a la vista del resultado con dos valores copiables:

• URL completa https://www.justzix.com/s/JZS-... — para enviar a alguien sin la extensión (mostrará una página de landing)
• Solo el token JZS-XXXX-XXXX-XXXX-XXXX — para pegar en la extensión del destinatario, en "Importar desde URL"

Cada uno tiene su botón "Copiar". También se muestra la hora de caducidad en la zona horaria local.

Panel "Mis shares"

Ajustes → Mis shares (un modal aparte, no forma parte de la sincronización — son dos funcionalidades distintas). Muestra la lista de enlaces activos: un contador en la cabecera X/20 activos · Y MB / 50 MB, y para cada share una tarjeta con:

• El tipo (Exportación completa / Directorio / Grupo / Conjunto) y el ID
• La hora de caducidad ("caduca en Xh Ymin") y un contador de descargas
• El token en monospace (al hacer clic = selecciona todo)
• Un summary X directorios · Y grupos · Z conjuntos · N líneas de JS · A KB
• Los botones Copiar enlace / Copiar token / Revocar

Revocar no retira el contenido ya descargado. Si alguien llegó a descargar el payload, lo tiene en local. El share es un "best-effort time-limit", no un DRM.

Importar desde un enlace (destinatario)

Ajustes → Importar desde URL (entre "Importar ajustes" y "Sincronización en la nube", el icono de cadena). El modal tiene dos pasos:

Paso 1 — input. Pegas el enlace o solo el token. Validación del lado del cliente: se extrae el token de la URL, se normaliza en Crockford-base32, se comprueban los 16 caracteres + el formato. Formato incorrecto → un mensaje con una pista sobre el formato correcto.

Paso 2 — preview. La extensión muestra el resumen del share:

• El emisor (display name o "anónimo" si no lo estableció)
• Caduca en (tiempo relativo)
• El tipo (Exportación completa / Directorio / Grupo / Conjunto)
• El tamaño del payload
• El contenido (número de directorios / grupos / conjuntos / acciones)
• CSS chars / JS lines
• Descargas

Si el share contiene JavaScript (jsLines > 0) — aparece un banner rojo de advertencia con un enlace "Mostrar el código JavaScript". Abre un overlay con el código JS completo de cada regla y acción — revísalo antes de importar, porque el código se ejecutará en las páginas que coincidan.

Paso 3 — importación. Clic en "Importar" → el backend devuelve el payload completo → la extensión crea las nuevas entidades con ID siempre nuevos (nunca sobrescribe los existentes por ID):

Nombre del nuevo contenedor: <nombre-del-emisor o "Import"> <fecha> — luego puedes renombrarlo / trasladarlo libremente.

Errores del destinatario

El backend no distingue un 404 "nunca existió" de un 404 "caducado / revocado" — a propósito, para no revelar si el token existió alguna vez.

Invocación programática de acciones desde JS

Puedes invocar cualquier acción (de la pestaña "Acciones" de la tarjeta del conjunto) de forma programática desde el JS del conjunto o desde el código de otra acción. El namespace global window.JZ se instala automáticamente en el MAIN world antes de cada ejecución de user-JS.

API — acciones

Ejemplo — lectura y establecimiento de valores

// === Lectura ===
const filter = JZ.value('FILT');           // INPUT/TEXTAREA — string
const opacity = JZ.value('OPAC');          // SLIDER — string numérico ("75")
const mode = JZ.value('MODE');             // SELECT static — string (option.value)
const theme = JZ.value('THM');             // TOGGLE3 — state.value del estado activo

// === Establecimiento ===
JZ.setValue('FILT', 'nuevo valor');        // INPUT/TEXTAREA — string + dispatch input+change
JZ.setValue('OPAC', 75);                   // SLIDER — clamp a min/max, dispatch input+change
JZ.setValue('SRT', 'prod');                // SELECT(js) — select nativo + dispatch change
JZ.setValue('MODE', 'staging');            // SELECT static — content.js hace el flujo (memoria + UI + código)
JZ.setValue('THM', 'dark');                // TOGGLE3 — búsqueda por state.value (fallback a label, luego idx)
JZ.setValue('THM', 2);                     // TOGGLE3 — equivalente; el idx numérico también funciona

API — barras y floating button

Variables de contexto en el código de la acción

En el campo "Código JS" de la acción tienes disponibles automáticamente unas variables — inyectadas como const por el background service worker antes de la ejecución:

Snippet en la UI

En el modal de configuración de una acción de tipo SELECT e INPUT, el panel "ID estable de la acción" muestra el action.id completo con un botón copy y un selector JS de ejemplo (document.querySelector('[data-jz-action-id="..."]')). Bajo la lista de BUTTON se ven chips JZ.click('LBL') — el clic en el chip copia el snippet al portapapeles.

Requisitos

• El elemento de la acción debe estar visible en la barra de acciones de la página actual (la acción tiene visible: true, la barra es visible en el árbol + la URL de la página coincide con las reglas).
• Acción no visible o página donde la barra está oculta → JZ.click() devolverá false, JZ.action() devolverá null.
• El atajo de teclado definido en una acción tiene su propio mecanismo (un listener keydown de fase de captura en content.js) — no requiere JZ.click().

Ejemplo — una acción AUTO que invoca una secuencia

// Código de la acción "AUTO"
JZ.click('LOAD');                          // clic en la acción LOAD (p. ej. carga datos)
setTimeout(() => JZ.click('PROC'), 500);   // 500ms después PROC (procesa)
setTimeout(() => JZ.click('SAVE'), 1500);  // 1500ms después SAVE (guarda)

Ejemplo — JS del conjunto que reacciona al DOM

Tras aparecer un elemento dinámico, haz clic en la acción que lo elimina:

// Código JS del conjunto — un observer sobre un modal que aparece dinámicamente
const observer = new MutationObserver(() => {
  if (document.querySelector('.cookie-banner')) {
    JZ.click('CCK');  // haz clic en la acción que elimina el banner
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Ejemplo — establecimiento programático del valor de un INPUT

// JZ.click sobre un INPUT no cambia el valor — usa el patrón con dispatch de 'change':
const el = JZ.action('SRCH');           // o JZ.actionById('a_mp1deeq3_uimd8l')
if (el) {
  el.value = 'nuevo filtro';
  el.dispatchEvent(new Event('change'));
}

Acceso directo mediante el DOM

Si prefieres trabajar con el DOM directamente (p. ej. cambias un estilo, no invocas):

// Búsqueda por el ID estable (recomendado — resistente al cambio del label):
const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');

// Búsqueda por el label (case-insensitive — MAYÚSCULAS en data-jz-key):
const btn = document.querySelector('[data-jz-key="MYBT"]');
btn.style.opacity = '0.5';      // atenúalo
btn.dataset.busy = 'true';      // atributo propio

Dónde viven los elementos de acción en el DOM:

Todos los elementos tienen el atributo data-jz-action-id (un identificador estable único). El selector .jz-actions-bar es seguro — no colisiona con el DOM de la página.

Funciones destacadas

Buscador en el sidebar

El campo "Buscar" filtra el árbol de directorios. Lógica de coincidencia:

• Coincidencia por nombre del directorio o por URL → todo el directorio con todos sus conjuntos queda visible y auto-desplegado
• Coincidencia por nombre del conjunto, etiqueta o contenido de CSS/JS → se muestran solo los conjuntos coincidentes del directorio, el directorio auto-desplegado
• Sin resultados → el mensaje "Sin resultados para [consulta]"

La coincidencia es case-insensitive, el resaltado en amarillo muestra el punto de coincidencia.

Interruptor global

Tras hacer clic en el icono de la extensión en la toolbar de Chrome aparece el widget del popup con un gran interruptor verde/gris "Plugin enabled". En el modo deshabilitado no se inyecta ningún CSS/JS en ninguna página, con independencia de los ajustes de los directorios. El botón flotante queda entonces deshabilitado (Halt Red, opacity 0.7). El estado sobrevive al reinicio de Chrome.

Insertar la URL de la pestaña

Un botón junto al campo del patrón de URL — inserta protocol://host/* de la pestaña activa. Creación de un directorio en 2 segundos. La dirección de la página de opciones de la extensión se omite — toma la pestaña externa más reciente.

Validación de la URL en vivo

Inline, a la derecha del campo de URL, aparece la información "Coincide con X pestañas abiertas" o una advertencia. Detecta erratas al instante.

Historial de cambios del conjunto

Se crea una instantánea del CSS y el JS 3 segundos después de la última edición (debounce). Límite de 5 versiones — la más antigua se descarta. Al restaurar una versión, el contenido actual se añade al historial como la instantánea más reciente, de modo que siempre puedes deshacer el deshacer.

Etiquetas y búsqueda por etiquetas

En la cabecera de la tarjeta del conjunto hay un campo para etiquetas — escríbelas separadas por comas. Aparecen como pequeñas etiquetas en el sidebar junto al nombre del conjunto. El buscador también encuentra por etiquetas.

Etiqueta y color del directorio

Cada directorio puede tener su propia etiqueta en el botón flotante (máx. 3 letras, MAYÚSCULAS) y un color (selector de color). La etiqueta y el color ayudan a reconocer visualmente qué proyecto está activo en cada página.

Estadísticas de clics en las acciones

Cada botón de acción cuenta cuántas veces se ha pulsado. Ayuda a ver cuáles se usan realmente.

Validación de CSS

Bajo el editor de CSS se muestra una barra con la lista de problemas de sintaxis:

• Comentario sin cerrar /* ... */
• Llaves sin cerrar (falta })
• Llave de cierre sobrante } (con el número de línea)

Es una validación sintáctica simple — no comprueba la corrección de properties/values. El CSS con error se sigue inyectando (el navegador simplemente omitirá las reglas erróneas).

Preview de JS al importar

En el modal de importación de un directorio individual, tras cargar el archivo, aparece una lista de conjuntos con métricas:

Contenido del archivo (3 conjuntos):
  Auto-login              CSS: 0L • JS: 4L                    JS
  Ocultar banner cookie   CSS: 8L • JS: 0L
  Debug GTM               CSS: 0L • JS: 12L • 2 acciones (8L)  JS

Una advertencia con el número de líneas de JS si hay alguna presente. El clic en el botón JS muestra el código completo para revisarlo antes de importar.

Aislamiento de JS con try/catch

Cada conjunto de JS se ejecuta por separado, con su propio try/catch. Un error en un conjunto no bloquea la ejecución de los demás. Los errores se registran en la consola con el nombre del conjunto/acción y el stack trace completo.

Cuota de almacenamiento

Un indicador del consumo de memoria en el menú Ajustes del sidebar (p. ej. 1.2 MB / 10 MB). Rojo por encima del 80%.

Filtro "Solo activos"

Un checkbox sobre la lista — oculta los conjuntos marcados como independientes (○) y muestra solo los activos en el directorio (●). Ayuda a filtrar los conjuntos "manuales" cuando el directorio tiene muchos. Reacciona al instante a los cambios de los interruptores.

Actualización de la extensión

La extensión tiene una clave fija en el manifest (en la versión para Firefox — un gecko.id fijo), lo que significa que el ID de la extensión es invariable entre actualizaciones — los datos (directorios, conjuntos, ajustes) se conservan. JustZix se distribuye para cuatro navegadores: Chrome, Edge, Opera y Firefox.

Notificación de nueva versión

En el menú Ajustes (junto al número de versión) aparece un banner verde "Hay una nueva versión disponible" cuando el servidor publica un paquete más reciente que el instalado. El banner contiene un enlace de descarga. La comprobación es silenciosa — sin red el banner simplemente no se muestra.

Procedimiento de actualización (Chrome / Edge / Opera)

1. Descarga el nuevo ZIP con la actualización
2. Descomprímelo sobrescribiendo la misma carpeta donde estaba la versión anterior
3. En chrome://extensions/ (Edge: edge://extensions/) localiza la extensión y haz clic en el icono de recarga en la tarjeta
4. La extensión se recargará con los nuevos archivos, los datos se quedan

Firefox

La versión para Firefox se carga mediante about:debugging → "Este Firefox" → "Cargar complemento temporal" (apuntando a manifest.json en la carpeta justzix_firefox/). Una actualización = recargar tras sobrescribir los archivos.

Ejemplos de CSS

/* Ocultar anuncios típicos */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"] {
  display: none !important;
}

/* Ocultar el cookie banner */
.cookie-banner, #cookie-notice {
  display: none !important;
}

html {
  filter: invert(0.92) hue-rotate(180deg);
}
img, video, picture, iframe, [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Colorea todos los elementos con data-testid */
[data-testid] {
  outline: 2px dashed #f59e0b !important;
  outline-offset: -2px;
}
[data-testid]::before {
  content: attr(data-testid);
  position: absolute;
  background: #f59e0b;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 9999;
}

/* Aumenta la legibilidad de las tablas del admin */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Sticky header de la tabla */
table.admin-list thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* Filas alternas */
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

/* A menudo las páginas tienen un max-width rígido de 1200px - fuerza la anchura */
.container, .main-content, main {
  max-width: 95% !important;
  width: 95% !important;
}

body::before {
  content: "ENTORNO DEV";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc2626;
  color: white;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  z-index: 999999;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body { padding-top: 28px !important; }

Ejemplos de JavaScript

// ¡Solo para dev! Nunca guardes contraseñas reales
window.addEventListener('load', () => {
  const login = document.querySelector('input[name="login"]');
  const pass = document.querySelector('input[name="password"]');
  if (login) login.value = 'admin@dev.local';
  if (pass) pass.value = 'devpass123';
});

// Intercepta dataLayer.push (GTM)
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]', 'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

// Intercepta gtag
const origGtag = window.gtag;
if (origGtag) {
  window.gtag = function(...args) {
    console.log('%c[GA4]', 'color:#2563eb;font-weight:bold', args);
    return origGtag.apply(window, args);
  };
}

// Cada 500ms durante 10s comprueba y haz clic en los botones "Aceptar"
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const buttons = [...document.querySelectorAll('button, a')];
  const target = buttons.find(b =>
    /aceptar|acepto|accept all/i.test(b.textContent || '')
  );
  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S - guardar el formulario
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }
  // Ctrl+Shift+E - ir a la edición (ejemplo no probado)
  if (e.ctrlKey && e.shiftKey && e.key === 'E') {
    e.preventDefault();
    document.querySelector('a.edit-link')?.click();
  }
});

// Omite los molestos confirm y beforeunload durante las pruebas
window.confirm = () => true;
window.alert = (msg) => console.log('[alert silenciado]', msg);
window.onbeforeunload = null;
window.addEventListener('beforeunload', e => {
  e.stopImmediatePropagation();
}, true);

// Recuerda - el CSS puro no lo hará cuando el padre tiene display:none
window.addEventListener('load', () => {
  const target = document.querySelector('.important-info');
  const newParent = document.querySelector('.sidebar');
  if (target && newParent) {
    newParent.prepend(target);
  }
});

// Muestra todos los input type="hidden" ocultos
document.querySelectorAll('input[type="hidden"]').forEach(input => {
  const wrapper = document.createElement('div');
  wrapper.style.cssText = 'background:#fef3c7;padding:4px;font-size:11px;font-family:monospace;border:1px dashed #f59e0b;';
  wrapper.innerHTML = `${input.name}: ${input.value}`;
  input.parentNode.insertBefore(wrapper, input);
});

Ejemplos de botones de acción

document.querySelectorAll('input, textarea, select').forEach(el => {
  if (el.type === 'hidden') return;
  if (el.type === 'checkbox' || el.type === 'radio') {
    el.checked = false;
  } else {
    el.value = '';
  }
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'Juan',
  lastName: 'Prueba',
  street: 'Calle de Prueba 1',
  city: 'Madrid',
  zip: '28001'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

// Para una tienda típica — haz clic en el primer "añadir al carrito"
const btn = document.querySelector('.add-to-cart, [data-action="add-to-cart"]');
if (btn) btn.click();
else alert('No se encontró el botón de añadir al carrito');

navigator.clipboard.writeText(location.href).then(() => {
  console.log('Copiado:', location.href);
});

// Extrae el token JWT de localStorage / cookies para depurar
const token = localStorage.getItem('authToken')
  || document.cookie.match(/token=([^;]+)/)?.[1];
if (token) {
  navigator.clipboard.writeText(token);
  alert('Token copiado. Primeros caracteres: ' + token.slice(0, 20) + '...');
} else {
  alert('No hay token');
}

// Intercepta todos los fetch y muéstralos en la consola
const origFetch = window.fetch;
window.fetch = async function(...args) {
  console.log('%c[FETCH]', 'color:#2563eb', args[0]);
  const res = await origFetch.apply(this, args);
  return res;
};
console.log('Registro de fetch habilitado. Cada llamada aparecerá en la consola.');

const info = {
  url: location.href,
  userAgent: navigator.userAgent.split(' ').pop(),
  cookies: document.cookie.split(';').length,
  localStorage: Object.keys(localStorage).length,
  framework: window.React ? 'React' : window.Vue ? 'Vue' : window.jQuery ? 'jQuery' : 'unknown'
};
alert(JSON.stringify(info, null, 2));

Escenarios de uso

1. Trabajo con varios clientes / proyectos

Cada proyecto tiene su propio directorio con su propio patrón de URL. Puedes tener directorios:

• justzix.com — modificaciones de producción
• justzix dev — para https://dev.justzix.com/* con un banner rojo "DEV"
• cliente X — modificaciones en otro dominio

En el panel derecho los directorios privados se pueden habilitar/deshabilitar rápidamente. La exportación de un directorio individual permite compartir la configuración con el equipo.

2. Entorno de desarrollo con marcado visual

En cada dev/staging añade un banner y auto-login. Un conjunto de CSS (el banner) y uno de JS (auto-fill). Creas un directorio aparte para cada entorno, se activan con un simple checkbox.

3. Herramientas para product manager / QA

Un panel de acciones con botones: FILL (datos de prueba), CART (compra de prueba), CLR (vaciar el formulario), STATE (mostrar el estado de la aplicación en un alert). Sin programador, sin consola, un solo clic.

4. Modificaciones de páginas públicas

Tus blogs/documentaciones favoritos con mejor legibilidad — contenedor más ancho, fuente, modo oscuro. Cada página en un directorio aparte, "Activo" dejado siempre habilitado.

5. Depuración de la analítica / GTM

Un conjunto por cada dominio con JS que intercepta dataLayer.push y gtag. Lo habilitas cuando el cliente reporta un problema con la analítica, sin tocar el código de la página.

6. Trabajo en paneles administrativos

El patrón *://*.justzix.com/admin/* y CSS que mejora las tablas, listas y formularios. Más una acción "Filtro de prueba" que establece automáticamente los filtros para un workflow típico.

7. Pruebas seguras en producción

La acción RO (read-only) inyecta CSS que oculta todos los botones "Eliminar", "Guardar", "Enviar" — un "modo de solo lectura" temporal para no equivocarse.

// Oculta los botones peligrosos
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('MODO READ-ONLY habilitado');

Problemas frecuentes y soluciones

El JavaScript no se ejecutó

• Comprueba si la página coincide con el patrón — el botón flotante debería estar visible
• El JS se ejecuta una vez por vida de la página — ¿has cambiado el código? Recarga la página (F5)
• Comprueba la consola de DevTools — los errores de JS se registran allí como [JustZix] JS error
• El conjunto debe estar Habilitado — solo "Activo" no basta

El CSS no funciona

• Especificidad — la página tiene sus propios estilos; usa !important o selectores más específicos
• Clases dinámicas — algunos frameworks generan clases tipo .css-1abcd que cambian. Usa atributos ([data-testid]) o selectores estables
• Shadow DOM — algunos elementos están en Shadow DOM y el CSS de fuera no tiene acceso a ellos. Hay que usar JS

El botón flotante no aparece

• La URL no coincide con ningún patrón
• El botón fue ocultado anteriormente — en el widget del popup haz clic en Restaurar botón flotante
• La página bloqueó los scripts inyectados (raro)

Perdí datos tras actualizar la extensión

La extensión tiene una clave fija en el manifest — las sucesivas actualizaciones conservan los datos. Si aun así los datos desaparecieron:

• Exporta los ajustes regularmente (Exportar)
• Actualiza sobrescribiendo la misma carpeta — no cambies la ruta
• En chrome://extensions/ usa el botón de recarga, no elimines ni reinstales
• Si pierdes los datos, importa la exportación anterior — basta con 1-2 clics

Las posiciones de los botones/paneles se resetean

Es normal — las posiciones son por ventana del navegador y se almacenan en la memoria de sesión (chrome.storage.session). Tras cerrar la ventana las posiciones desaparecen, en una ventana nueva empiezas desde las predeterminadas. La posición sobrevive a la navegación entre pestañas de la misma ventana.

La exportación parcial omitió algunos ajustes globales

Sí — la exportación parcial contiene solo los directorios y conjuntos marcados, más los ajustes de visibilidad relacionados con ellos. No contiene las posiciones de los paneles flotantes (son por ventana) ni otras preferencias globales. Para un backup completo usa el modo "Todo".

La importación parcial me sobrescribió un directorio que antes no existía

El modo "Fusionar" empareja los directorios por ID. Si el archivo importado tenía un ID en conflicto con un directorio existente (p. ej. el mismo archivo ya se importó una vez), aparece un prompt: 1 sobrescribir / 2 copia (predeterminado, seguro) / Cancelar. Eligiendo 2 obtienes copias con nuevos ID y el añadido "(import)" en el nombre de la carpeta — no pierdes nada.

El árbol de directorios no se despliega

La flecha de despliegue aparece solo si el directorio tiene conjuntos. Un directorio vacío tiene un punto atenuado en lugar de flecha. El estado de despliegue de cada directorio se recuerda en chrome.storage.local.

No veo el botón Exportar/Importar del directorio

Esos botones están en la barra del directorio (en la parte superior del área de edición), junto al botón "Eliminar directorio". No confundir con los botones del menú Ajustes, que afectan a la totalidad de los ajustes.

AI Helper no responde

• Falta la clave API — en Ajustes → AI Helper introduce la clave de al menos un proveedor (OpenAI / Anthropic / Gemini).
• Clave no válida — la ventana mostrará el error devuelto por el proveedor; comprueba la clave y los límites de la cuenta en el proveedor.
• La clave no se sincronizó en el otro dispositivo — la sincronización funciona solo para las claves con el checkbox "sincronizar" marcado y requiere una cuenta de sincronización de JustZix con la sesión iniciada.

Conflicto con la Content Security Policy

El JS de reglas y acciones se ejecuta en el contexto de la página mediante una estrategia por capas resistente a las reglas estrictas de Content Security Policy. La mayoría de las páginas — incluidos grandes servicios como Facebook — funcionan de inmediato, sin configuración.

Las páginas con una CSP muy estricta (algunos bancos, sitios corporativos) pueden bloquear la ejecución. Para que el JS funcione en todas las páginas, activa para JustZix la opción «Permitir scripts de usuario»: abre chrome://extensions, ve a los detalles de JustZix y activa el interruptor (los navegadores más antiguos también requieren el modo de desarrollador). Cuando una página bloquea la ejecución, la ventana JavaScript / la Consola JS muestra un mensaje adecuado.

JustZix — manual