Funciones de JustZix

El panel de acciones — 6 tipos de controles

El panel de acciones es la segunda barra flotante de JustZix — la de controles interactivos con los que manejas una página sobre la marcha. Cada acción es uno de seis tipos y está anclada a una carpeta o un conjunto de reglas, así que aparece justo donde la necesitas.

Qué es una barra de acciones

Mientras que la primera barra de JustZix sirve para activar y desactivar reglas, el panel de acciones es más que interruptores. Es un conjunto de controles interactivos con los que manejas una página mientras trabajas — ejecutar código bajo demanda, pasarle valores y cambiar de modo.

La barra está anclada a una carpeta, un grupo o un conjunto de reglas. Cuando esa carpeta está activa en la página actual, sus acciones aparecen en el panel flotante; cuando no coincide, el panel queda vacío. Así, una página de tienda muestra controles distintos a un panel de administración. La barra recuerda su posición, y un clic derecho la oculta durante el resto de la sesión.

Seis tipos de controles

Cada acción tiene una etiqueta, un color y un atajo de teclado opcional. Eliges uno de los seis tipos según lo que necesites:

  • BUTTON — un botón fire-and-forget; un clic simplemente ejecuta código JS.
  • SELECT — una lista desplegable; opciones estáticas o generadas por JS, y elegir una dispara la acción.
  • INPUT — un único campo de texto al estilo barra de comandos; escribes un valor y confirmas.
  • SLIDER — un deslizador que controla una variable CSS en vivo, como el brillo o el zoom de la página.
  • TEXTAREA — un bloc de notas multilínea cuyo contenido se recuerda por separado para cada dominio.
  • TOGGLE3 — un control segmentado de tres estados, ideal para modos como dev / staging / prod.

Del simple clic al valor introducido

El tipo más simple es BUTTON — un objetivo, un clic. SELECT y TOGGLE3 añaden elección: en lugar de un botón por variante, mantienes un único control con varios estados. INPUT y TEXTAREA van más allá y aceptan el texto que aportas en el momento — el código de la acción lee ese valor y hace con él lo que hayas diseñado.

SLIDER es la excepción porque funciona de forma continua: arrastras el tirador y la variable CSS vinculada cambia al instante, sin nada que confirmar. Es la elección natural para ajustes que quieres ver en tiempo real.

Las acciones ejecutan código bajo demanda

Detrás de cada control hay un pequeño fragmento de CSS o JavaScript. La diferencia con una regla normal es que una regla se ejecuta automáticamente al cargar la página, mientras que una acción espera — se ejecuta solo cuando la usas. Es perfecto para operaciones que no quieres cada vez: vaciar un formulario, generar datos de prueba, cambiar de tema, enviar la página a otra herramienta.

Como el código de la acción se ejecuta en el mismo mundo que las reglas, tiene acceso al DOM de la página y a los globales de JustZix, así que un solo botón puede disparar un flujo de trabajo de varios pasos. El panel de acciones convierte un conjunto de reglas estático en un pequeño pupitre de mando adaptado a la página.

Entradas de blog relacionadas

Entradas que tratan este tema con más detalle.

Tipos de acciones Tres acciones que merecen un sitio en la barra: URL limpia, CSV, PIP Tres acciones JustZix universales útiles casi en todas partes: copiar una URL limpia, exportar una tabla a CSV y el Picture-in-Picture. Tipos de acciones BUTTON: la acción JustZix más simple — fire-and-forget con personalización por botón BUTTON es el tipo de acción JustZix más antiguo y más usado. Clic = ejecuta código en el MAIN world. Sin estado, sin memory — una función pura. Personalización completa (fondo, color del texto, padding) + customStyles para una integración al píxel en la barra de acciones. Tipos de acciones SLIDER: un controlador de variables CSS dentro de la pestaña — brillo, zoom, font-size al alcance del dedo La acción SLIDER es un <input type="range"> nativo en la barra de acciones. El drag en vivo actualiza la memory sin ejecutar el código (evento input), al soltar se ejecuta el código (evento change). El value es un Number, no un String. Casos de uso: brillo, zoom, font-size, velocidad de animación — pilotados como un fader físico. Tipos de acciones SELECT static vs js: dos variantes de dropdown en la barra de acciones — cuál cuándo SELECT es un dropdown en la barra de acciones de JustZix. Dos variantes: static (opciones hardcodeadas en el esquema) y js (el código genera las opciones dinámicamente). La primera es genial para presets fijos (Light/Dark, elección del idioma), la segunda para listas dinámicas (categorías del DOM, marcadores hotkey). Tipos de acciones INPUT: acción de una línea como mini barra de comandos en la barra de acciones de JustZix INPUT es un <input type="text"> nativo en la barra de acciones. Enter → blur → ejecuta código. Memory persistente por pestaña (sessionStorage + chrome.storage.local). Diferencia clave vs TEXTAREA: Enter activa la acción. Casos de uso: barra de comandos, búsqueda rápida, override de filtros, navegación URL personalizada. Tipos de acciones TEXTAREA: un bloc de notas multilínea en la barra de acciones — borradores, notas, snippets por dominio La acción TEXTAREA (v2.13.21) es un <textarea> nativo en la barra de acciones de JustZix. Memory persistente por pestaña (sessionStorage + backup chrome.storage.local). Enter = salto de línea nativo (NO blur). El código arranca al blur. Casos de uso: bloc de notas QA, borradores de comentarios, snippets SQL/curl/JSON por dominio.