← Все статьи

Типы действий

BUTTON: самое простое действие JustZix — fire-and-forget с кастомизацией по кнопке

15 мая 2026 · автор JustZix Team

Один тип действия настолько базовый, что его пропускают в статьях. BUTTON — клик → выполни код → готово. Никакого состояния, никакой memory, никакого списка опций для выбора. Это «функция без состояния» на панели действий. Но именно эта простота делает его самым мощным: BUTTON — это 80% всех действий в типичном сетапе JustZix, потому что большинство вещей, которые ты хочешь сделать, это «клик = X».

Когда BUTTON, когда что-то другое?

Только BUTTON без состояния. Все остальные типы хранят значение по action.id (sessionStorage + бэкап chrome.storage.local). BUTTON = чистая функция: вход (клик) → выход (эффект на странице).

Первое действие BUTTON

В редакторе JustZix → правило → панель действий → «+ BUTTON». Конфигурация:

label: "🚀 Заполни демо"   // текст кнопки + иконка
code: |
  // value, $el, $action внедряются автоматически как 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('Демо-данные заполнены.');

Клик «🚀 Заполни демо» → поля формы заполнены, фреймворк страницы (React/Vue/Angular) видит событие input → состояние обновлено.

Два цвета + customStyles

У BUTTON 2 базовых цвета:

color       → фон кнопки
colorText   → цвет текста метки (и иконки, если emoji)

Плюс необязательный объект customStyles — гранулярное переопределение CSS:

customStyles: {
  padding: '8px 16px',         // по умолчанию 6px 12px
  fontSize: '14px',             // по умолчанию 12px
  borderRadius: '4px',          // по умолчанию 6px
  fontFamily: 'Fira Code, monospace',
  fontWeight: '600',
  letterSpacing: '0.5px',
}

Рендеринг: каждое свойство customStyles проходит через el.style.setProperty(key, value, 'important') — бьёт дефолтные правила JustZix. Это позволяет выровнять кнопки под фирменный стиль сайта, который ты модифицируешь (например, синий Bootstrap, ripple Material Design, кастомизация по доменам).

Что доступно в поле кода

Код BUTTON работает в MAIN world (chrome.scripting.executeScript world:'MAIN') через background.js. Автоматически доступно:

• window.JZ — хелперы действий (JZ.click, JZ.value, JZ.setValue и т.д.), когда нет конфликта
• window.JUSTZIX — логгер (с v2.13.76, брендовое имя, всегда доступен)
• $el — ссылка на кнопку (HTMLElement) — полезно, если хочешь изменить саму кнопку после клика
• $action — объект {id, label, type, el} — мета-инфо о действии
• Полный контекст страницы — все window-глобали страницы (jQuery, внутренности React и т.д.)
• async/await OK — обёртка это async IIFE

Сценарий 1 — быстрые цепочки

Повторяющиеся последовательности действий часто можно автоматизировать одной кнопкой:

// Действие «🔥 Тестовый поток»
JZ.click('Login');               // кликает действие BUTTON с меткой «Login»
await new Promise(r => setTimeout(r, 500));
JZ.click('Добавить в корзину');
await new Promise(r => setTimeout(r, 500));
JZ.click('Checkout');
JUSTZIX.log('Тестовый поток завершён.');

Цепочка из 3 кнопок в 1 → клик «Тестовый поток» запускает их по очереди. Каждая из 3 подкнопок остаётся переиспользуемой по отдельности.

Сценарий 2 — условное выполнение

BUTTON — это «выполни по запросу», поэтому идеален для деструктивных скриптов с проверкой URL:

// Действие «🗑️ Очистить staging-корзину»
if (!location.hostname.includes('staging')) {
  JUSTZIX.error('Только на staging! Отмена.');
  alert('Эта кнопка работает только на staging.');
  return;
}
const items = document.querySelectorAll('.cart-item .remove-btn');
items.forEach(btn => btn.click());
JUSTZIX.log(`${items.length} товаров удалено.`);

Никакого риска авто-запуска (как у JS pane), никакого текстового поля для ручного заполнения — просто клик когда хочешь, где хочешь.

Сценарий 3 — визуальная обратная связь после клика

Старая классика: кнопка, меняющая метку при успехе:

// Действие «💾 Сохранить состояние»
const oldLabel = $el.textContent;
$el.textContent = '⏳ Сохранение...';
$el.style.opacity = '0.6';
try {
  await fetch('/api/state', {
    method: 'POST',
    body: JSON.stringify(getState()),
  });
  $el.textContent = '✓ Сохранено';
  setTimeout(() => {
    $el.textContent = oldLabel;
    $el.style.opacity = '';
  }, 2000);
} catch (e) {
  $el.textContent = '✗ Ошибка';
  JUSTZIX.error('Сохранение не удалось', e);
}

$el — это DOM-ссылка на кнопку — изменяй её напрямую. Визуальная обратная связь без внешнего состояния.

Сценарий 4 — много кнопок, один поток

Вместо одной кнопки «Полный QA-поток» — 5 отдельных в визуальном кластере:

// Действие «1️⃣»
JUSTZIX.log('Шаг 1: логин');
JZ.click('Login as test user');

// Действие «2️⃣»
JUSTZIX.log('Шаг 2: навигация');
location.href = '/admin/orders';

// Действие «3️⃣»
JUSTZIX.log('Шаг 3: фильтр');
document.querySelector('select.status').value = 'pending';
document.querySelector('select.status').dispatchEvent(new Event('change'));

Каждый шаг как отдельная кнопка → пользователь визуально видит, на каком этапе потока он находится. Кроме того, может повторить любой шаг, не начиная сначала.

Ловушки

• У кода BUTTON ДОЛЖНА быть метка. Проверка isActionRenderable требует обоих (метка + код). Действие без кода никогда не отрендерится.
• customStyles через setProperty(..., 'important') бьёт большинство CSS страницы, но некоторые стили сайта используют специфические псевдоэлементы (::before с content) — customStyles там не поможет. Обходной путь: добавь CSS-правило в CSS-секцию того же правила (каскадный !important всё равно выигрывает).
• Код работает в MAIN world. Это значит: скрипты страницы (React, Vue, jQuery) видят события, которые ты диспатчишь. Но также: скрипты страницы могут вмешиваться в твой код (например, переопределить fetch, console). Фикс Output Console через chrome.scripting.executeScript помогает (невосприимчив к CSP), но общий принцип: страница и твой код разделяют scope.
• Async-ошибки в коде не появляются автоматически в Output Console. Оберни try/catch вокруг await-инструкций + явный JUSTZIX.error. Или: используй window.addEventListener('error') глобально в JS-правиле.
• Никакого встроенного throttle/debounce. клик-клик-клик = 3 независимых вызова кода. Если код дорогой (fetch, переписывание DOM), защити его сам: let busy = false; + проверка.

Что делать дальше

BUTTON — хребет всех тулбаров JustZix. Смотри также другие типы действий:

• SELECT static vs js — выбор из списка опций
• INPUT — однострочный текст + Enter→run
• TEXTAREA — многострочный блокнот
• SLIDER — нативный контроллер диапазона
• TOGGLE3 — трёхпозиционный сегментированный контрол
• window.JZ + JUSTZIX helpers — программный API

Установи JustZix — полностью бесплатно, без аккаунта, без сервера.