← Todos los artículos

Tipos de acciones

BUTTON: la acción JustZix más simple — fire-and-forget con personalización por botón

15 mayo 2026 · por JustZix Team

Un tipo de acción es tan básico que se omite en los artículos. BUTTON — clic → ejecuta código → hecho. Sin estado, sin memory, sin lista de opciones que elegir. Es una «función sin estado» en la barra de acciones. Pero precisamente esa simplicidad es lo que lo hace el más potente: BUTTON es el 80% de todas las acciones en un setup JustZix típico, porque la mayoría de las cosas que quieres hacer son «clic = X».

¿Cuándo BUTTON, cuándo otra cosa?

Solo BUTTON es sin estado. Todos los demás tipos conservan un valor por action.id (sessionStorage + backup chrome.storage.local). BUTTON = función pura: input (clic) → output (efecto en la página).

Primera acción BUTTON

En el editor de JustZix → regla → barra de acciones → «+ BUTTON». Configuración:

label: "🚀 Rellenar demo"   // texto del botón + icono
code: |
  // value, $el, $action inyectados automáticamente como extra
  document.querySelector('[name=email]').value = 'demo@test.com';
  document.querySelector('[name=name]').value = 'Demo User';
  document.querySelectorAll('input, textarea').forEach(el =>
    el.dispatchEvent(new Event('input', { bubbles: true }))
  );
  JUSTZIX.log('Datos demo rellenados.');

Clic «🚀 Rellenar demo» → campos del formulario rellenados, el framework de la página (React/Vue/Angular) ve el evento input → estado actualizado.

Dos colores + customStyles

BUTTON tiene 2 colores de base:

color       → fondo del botón
colorText   → color del texto de la label (y del icono si es emoji)

Además un objeto customStyles opcional — override CSS granular:

customStyles: {
  padding: '8px 16px',         // default 6px 12px
  fontSize: '14px',             // default 12px
  borderRadius: '4px',          // default 6px
  fontFamily: 'Fira Code, monospace',
  fontWeight: '600',
  letterSpacing: '0.5px',
}

Renderizado: cada propiedad de customStyles pasa por el.style.setProperty(key, value, 'important') — vence las reglas por defecto de JustZix. Esto te permite alinear los botones al estilo de marca del sitio que estás modificando (p. ej. azul Bootstrap, ripple Material Design, personalización por dominio).

Qué está disponible en el campo del código

El código BUTTON corre en el MAIN world (chrome.scripting.executeScript world:'MAIN') mediante background.js. Automáticamente disponible:

• window.JZ — helpers para las acciones (JZ.click, JZ.value, JZ.setValue, etc.) cuando no hay colisión
• window.JUSTZIX — logger (desde v2.13.76, nombre de marca, siempre disponible)
• $el — referencia al botón (HTMLElement) — útil si quieres modificar el botón en sí tras el clic
• $action — objeto {id, label, type, el} — meta-info sobre la acción
• Contexto completo de la página — todas las globales window de la página (jQuery, internals de React, etc.)
• async/await OK — el wrapper es una IIFE async

Caso de uso 1 — Cadenas rápidas

Las secuencias de acciones repetidas a menudo pueden automatizarse con un solo botón:

// Acción «🔥 Flujo de prueba»
JZ.click('Login');               // pulsa la acción BUTTON con label «Login»
await new Promise(r => setTimeout(r, 500));
JZ.click('Añadir al carrito');
await new Promise(r => setTimeout(r, 500));
JZ.click('Checkout');
JUSTZIX.log('Flujo de prueba completado.');

Cadena de 3 botones en 1 → pulsar «Flujo de prueba» los arranca en secuencia. Cada uno de los 3 sub-botones sigue siendo reutilizable individualmente.

Caso de uso 2 — Ejecución condicional

BUTTON es «ejecuta a demanda», así que es perfecto para scripts destructivos con un guarda de URL:

// Acción «🗑️ Vaciar carrito staging»
if (!location.hostname.includes('staging')) {
  JUSTZIX.error('¡Solo en staging! Cancelando.');
  alert('Este botón funciona solo en staging.');
  return;
}
const items = document.querySelectorAll('.cart-item .remove-btn');
items.forEach(btn => btn.click());
JUSTZIX.log(`${items.length} artículos vaciados.`);

Sin riesgo de auto-run (como el JS pane), sin campo de texto que rellenar a mano — solo un clic cuando quieres, donde quieres.

Caso de uso 3 — Feedback visual tras el clic

Viejo clásico: un botón que cambia de label al éxito:

// Acción «💾 Guardar estado»
const oldLabel = $el.textContent;
$el.textContent = '⏳ Guardando...';
$el.style.opacity = '0.6';
try {
  await fetch('/api/state', {
    method: 'POST',
    body: JSON.stringify(getState()),
  });
  $el.textContent = '✓ Guardado';
  setTimeout(() => {
    $el.textContent = oldLabel;
    $el.style.opacity = '';
  }, 2000);
} catch (e) {
  $el.textContent = '✗ Error';
  JUSTZIX.error('Guardado fallido', e);
}

$el es la referencia DOM del botón — modifícala directamente. Feedback visual sin estado externo.

Caso de uso 4 — Varios botones, un flujo

En lugar de un botón «Flujo QA completo», 5 separados en un clúster visual:

// Acción «1️⃣»
JUSTZIX.log('Paso 1: login');
JZ.click('Login as test user');

// Acción «2️⃣»
JUSTZIX.log('Paso 2: navegar');
location.href = '/admin/orders';

// Acción «3️⃣»
JUSTZIX.log('Paso 3: filtrar');
document.querySelector('select.status').value = 'pending';
document.querySelector('select.status').dispatchEvent(new Event('change'));

Cada paso como botón separado → el usuario ve visualmente en qué punto está del flujo. Además puede repetir cualquier paso sin volver a empezar.

Trampas

• El código BUTTON DEBE tener una label. La comprobación isActionRenderable requiere ambos (label + código). Una acción sin código nunca se renderizará.
• customStyles vía setProperty(..., 'important') vence a la mayoría del CSS de la página, pero algunos estilos del sitio usan pseudo-elementos específicos (::before con content) — customStyles no puede ayudar ahí. Workaround: añade una regla CSS en la sección CSS de la misma regla (el !important en cascada gana igualmente).
• El código corre en el MAIN world. Significa: los scripts de la página (React, Vue, jQuery) ven los eventos que haces dispatch. Pero también: los scripts de la página pueden interferir con tu código (p. ej. sobrescribir fetch, console). El fix de la Output Console vía chrome.scripting.executeScript ayuda (inmune a la CSP), pero el principio general: página y tu código comparten el scope.
• Los errores async en el código no aparecen automáticamente en la Output Console. Envuelve try/catch alrededor de las instrucciones await + JUSTZIX.error explícito. O: usa window.addEventListener('error') globalmente en una regla JS.
• Sin throttle/debounce integrado. clic-clic-clic = 3 invocaciones de código independientes. Si el código es costoso (fetch, reescritura del DOM), protégelo tú mismo: let busy = false; + guarda.

Qué hacer después

BUTTON es la columna vertebral de todas las toolbars JustZix. Mira también los demás tipos de acción:

• SELECT static vs js — elegir de una lista de opciones
• INPUT — texto de una línea + Enter→run
• TEXTAREA — bloc de notas multilínea
• SLIDER — controlador de rango nativo
• TOGGLE3 — segmented control de 3 estados
• window.JZ + JUSTZIX helpers — API programática

Instala JustZix — completamente gratuito, sin cuenta, sin servidor.