← Wszystkie wpisy

Typy akcji

BUTTON: najprostsza akcja JustZix — fire-and-forget z customizacją per-button

15 maja 2026 · autor JustZix Team

Jeden z typów akcji jest tak podstawowy, że pomija się go w post'ach. BUTTON — klik → uruchom kod → koniec. Brak state, brak memory, brak listy opcji do wybrania. To "stateless function" w pasku akcji. Ale właśnie ta prostota go najsilniej wyróżnia: BUTTON to 80% wszystkich akcji w typical JustZix setup'ie, bo większość rzeczy które chcesz zrobić to "klik = X".

Kiedy BUTTON, kiedy coś innego?

Tylko BUTTON jest stateless. Wszystkie inne typy trzymają jakąś wartość per action.id (sessionStorage + chrome.storage.local backup). BUTTON = czysta funkcja: input (klik) → output (effect na stronie).

Pierwsza akcja BUTTON

W edytorze JustZix → reguła → pasek akcji → "+ BUTTON". Konfiguracja:

label: "🚀 Fill demo"   // tekst na buttonie + ikona
code: |
  // value, $el, $action automatycznie wstrzykiwane jako extras
  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('Demo data filled.');

Klik na "🚀 Fill demo" → pola formularza wypełnione, framework strony (React/Vue/Angular) widzi event input → state aktualizowany.

Dwa kolory + customStyles

BUTTON ma 2 podstawowe kolory:

color       → background tła buttona
colorText   → text-color label'a (i ikony jeśli emoji)

Plus opcjonalny customStyles object — granularne nadpisanie CSS:

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

Render: każda właściwość z customStyles przechodzi przez el.style.setProperty(key, value, 'important') — wygrywa z domyślnymi rule'ami JustZix. To pozwala dopasować buttony do brand-style strony którą modyfikujesz (np. Bootstrap blue, Material Design ripple, customizacja per-domena).

Co jest dostępne w code field

BUTTON code runs w MAIN world (chrome.scripting.executeScript world:'MAIN') przez background.js. Dostępne automatycznie:

• window.JZ — action helpers (JZ.click, JZ.value, JZ.setValue itd.) gdy nie collision
• window.JUSTZIX — logger (od v2.13.76, brand name, zawsze dostępny)
• $el — reference do buttona (HTMLElement) — useful gdy chcesz modyfikować sam button po kliknięciu
• $action — obiekt {id, label, type, el} — meta-info o akcji
• Pełen page context — wszystkie window globals strony (jQuery, React internals, etc.)
• async/await OK — wrapper to async IIFE

Use case 1 — Quick chains

Często powtarzane sekwencje akcji można zautomatyzować jednym buttonem:

// Akcja "🔥 Test flow"
JZ.click('Login');               // klikuje akcję BUTTON o labelu "Login"
await new Promise(r => setTimeout(r, 500));
JZ.click('Add to cart');
await new Promise(r => setTimeout(r, 500));
JZ.click('Checkout');
JUSTZIX.log('Test flow complete.');

Chain z 3 buttonów w 1 → kliknięcie buttona "Test flow" odpala je w sekwencji. Każdy z 3 sub-buttonów może być reused indywidualnie.

Use case 2 — Conditional execution

BUTTON to "execute on demand", więc idealny dla skryptów destrukcyjnych z URL guard:

// Akcja "🗑️ Clear staging cart"
if (!location.hostname.includes('staging')) {
  JUSTZIX.error('Only on staging! Aborting.');
  alert('This button only works on staging.');
  return;
}
const items = document.querySelectorAll('.cart-item .remove-btn');
items.forEach(btn => btn.click());
JUSTZIX.log(`Cleared ${items.length} items.`);

Bez auto-run risk (jak JS pane), bez pole tekstu które trzeba ręcznie wypełnić — tylko klik gdy chcesz, gdzie chcesz.

Use case 3 — Visual feedback po kliknięciu

Stary klasyk: button który zmienia label po sukcesie:

// Akcja "💾 Save state"
const oldLabel = $el.textContent;
$el.textContent = '⏳ Saving...';
$el.style.opacity = '0.6';
try {
  await fetch('/api/state', {
    method: 'POST',
    body: JSON.stringify(getState()),
  });
  $el.textContent = '✓ Saved';
  setTimeout(() => {
    $el.textContent = oldLabel;
    $el.style.opacity = '';
  }, 2000);
} catch (e) {
  $el.textContent = '✗ Error';
  JUSTZIX.error('Save failed', e);
}

$el to DOM reference do buttona — modyfikujesz go bezpośrednio. Visual feedback bez external state.

Use case 4 — Multiple buttony, jeden flow

Zamiast 1 buttona "Full QA flow", 5 oddzielnych z visual cluster:

// Akcja "1️⃣"
JUSTZIX.log('Step 1: login');
JZ.click('Login as test user');

// Akcja "2️⃣"
JUSTZIX.log('Step 2: navigate');
location.href = '/admin/orders';

// Akcja "3️⃣"
JUSTZIX.log('Step 3: filter');
document.querySelector('select.status').value = 'pending';
document.querySelector('select.status').dispatchEvent(new Event('change'));

Każdy krok jako osobny button → user widzi visually gdzie jest w flow. Plus może powtórzyć dowolny krok bez restartowania.

Pułapki

• BUTTON code MUSI mieć label. Walidacja isActionRenderable wymaga obu (label + code). Akcja bez code nigdy się nie wyrenderuje.
• customStyles przez setProperty(..., 'important') wygrywa z większością CSS strony, ale niektóre site styles użyłyby specyficznych pseudo-elementów (::before z content) — wtedy customStyles nie pomoże. Workaround: dodaj CSS rule do reguły CSS w tej samej regule (cascade z !important wciąż wygrywa).
• Code runs w MAIN world. To znaczy: page scripts (React, Vue, jQuery) widzą eventy które dispatchujesz. Ale też: page scripts mogą przeszkadzać twojemu kodowi (np. nadpisać fetch, console). Output Console fix przez chrome.scripting.executeScript pomaga (CSP-immune), ale general principle: page i twoje kody dzielą scope.
• Async errors w code nie pokażą się w Output Console automatycznie. Wrap try/catch wokół await statements + JUSTZIX.error explicit. Albo: użyj window.addEventListener('error') globally w JS rule.
• Brak built-in throttle/debounce. Klik-klik-klik = 3 niezależne wywołania kodu. Jeśli code jest expensive (fetch, DOM rewrite), użyj sam: let busy = false; + guard.

Co dalej

BUTTON to backbone wszystkich JustZix toolbarów. Sprawdź też kolejne typy akcji:

• SELECT static vs js — wybór z listy opcji
• INPUT — single-line text + Enter→run
• TEXTAREA — multi-line scratch pad
• SLIDER — natywny range controller
• TOGGLE3 — 3-stanowe segmented controls
• window.JZ + JUSTZIX helpers — programmatic API

Zainstaluj JustZix — kompletnie za darmo, bez konta, bez serwera.