← Все статьи

Окна во фронтенде

JS pane: скрипты Run-on-demand, без авто-запуска при каждом визите

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

JS-правило JustZix работает автоматически, когда URL совпадает. Отлично для вещей, которые должны работать всегда — авто-пропуск cookie-баннеров, кастомные горячие клавиши. Но некоторые скрипты деструктивны: «очисти корзину», «удали черновик письма», «сбрось форму». Их ты не хочешь в авто-запуске. Ты хочешь нажать ▶ только когда захочешь. Это JS pane (v2.13.56+).

Три JS-окна — какое для чего

JS pane выглядит почти как CSS pane (textarea, перетаскиваемый, цветная точка), но у него есть дополнительная кнопка ▶ Run в заголовке. Код живёт в textarea, никогда не выполняется автоматически — единственное исключение — возобновление после перезагрузки (если что-то было в sessionStorage до F5, JustZix перезапускает это, чтобы восстановить состояние до обновления).

Первое использование

1. Опции JustZix → папка/группа/правило → «Окна» → «+ JS pane».
2. Имя: «Очистить корзину», цвет: янтарный (по умолчанию #D65D0E).
3. Посети shop.com/cart. Pane появляется сверху справа с заголовком («• Очистить корзину [▶]») и пустой textarea.
4. Напечатай:

   document.querySelectorAll('.cart-item .remove-btn')
     .forEach(btn => btn.click());

5. Ctrl+Enter (или клик ▶). Все кнопки «Удалить» нажаты.

Dirty-состояние — ты визуально знаешь, что есть изменение

После того, как ты напечатал / изменил код, пока ты его не выполнишь (или не вернёшься к последней выполненной версии), кнопка Run показывает «dirty»-состояние (с кастомным runColor — с v2.13.64 можно выбрать свой). Это визуальный сигнал: «у тебя есть невыполненные изменения».

Клик ▶ → код выполняется, dirty-состояние исчезает. Верни textarea к предыдущему значению → dirty снова появляется. JustZix сравнивает текущее содержимое с el.dataset.jzLastRun.

Оверлей ошибок — DevTools открывать не нужно

Когда eval бросает исключение, внизу pane появляется красная полоса (.jz-pane-error):

Ошибка JS: Cannot read properties of null (reading 'click')

Нажми ▶ снова с исправленным кодом → ошибка исчезает. Никакого открыть-и-закрыть F12. Для async-ошибок (setTimeout(...), который бросает) оверлей их не ловит — известное ограничение, async-ошибки нужно отслеживать через DevTools или JS Console JustZix.

Постоянный vs эфемерный — какой сценарий

Содержимое JS pane сохраняется в sessionStorage['jz_pane_{id}_content'] по вкладке. Последствия:

• F5 / навигация во вкладке — pane перемонтируется, textarea перечитывает код, авто-возобновление его перезапускает. Состояние страницы после перезагрузки = состояние после первого выполнения.
• Новая вкладка на том же домене — pane появляется пустым. У каждой вкладки свой sessionStorage.
• Закрытие вкладки — содержимое pane потеряно. Само определение pane (имя, цвет, scope) остаётся, потому что это chrome.storage, но textarea возвращается пустой.

Если ты хочешь код навсегда (даже после закрытия вкладки) — это не pane, это JS-правило. Pane = блокнот с кнопкой Run.

Сценарий 1 — деструктивные действия, специфичные для состояния

Уборка в админ-панели магазина. Действие «Удалить все демо-товары из корзины»:

// Работает только при клике ▶. Авто-запуск = катастрофа.
if (!location.href.includes('/admin/demo')) {
  throw new Error('Только для /admin/demo');
}
const rows = document.querySelectorAll('tr.product');
console.log(`Удаление ${rows.length} товаров...`);
for (const row of rows) {
  await fetch('/api/products/' + row.dataset.id, { method: 'DELETE' });
  row.remove();
}
console.log('Готово.');

Защита: проверка URL + имя pane «CLEANUP DEMO» + янтарная точка. Сложно сделать по ошибке.

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

50 пользователей нужно отметить как «проверенные». UI позволяет кликать по одному пользователю. JS pane:

const rows = document.querySelectorAll('.user-row:not(.verified)');
let count = 0;
for (const row of rows) {
  row.querySelector('.btn-verify')?.click();
  await new Promise(r => setTimeout(r, 200));  // троттлинг, чтобы API не возмущался
  count++;
}
console.log(`${count} пользователей проверено.`);

Один клик ▶, 50 пользователей. 200 мс sleep, чтобы не затопить API. В три раза быстрее, чем настоящий bulk-эндпоинт, которого не существует.

Сценарий 3 — скриптовое демо

Ты показываешь клиенту поток «добавь 3 товара + перейди к checkout + заполни тестовые данные». 30 секунд каждый раз. Скрипт pane делает всё за 2 секунды:

// Демо-поток
[1, 2, 3].forEach(i => document.querySelector(`[data-product-id="${i}"] .add-btn`)?.click());
await new Promise(r => setTimeout(r, 500));
document.querySelector('.checkout-btn').click();
await new Promise(r => setTimeout(r, 1000));
Object.entries({
  email: 'demo@example.com', name: 'Demo', address: 'Test 1'
}).forEach(([k, v]) => {
  const el = document.querySelector(`[name="${k}"]`);
  if (el) { el.value = v; el.dispatchEvent(new Event('input', { bubbles: true })); }
});

Клиент видит поток «на автопилоте». Профессионально. Без печатания в реальном времени.

Ловушки

• Async-ошибки не появляются в оверлее — setTimeout(() => { throw new Error('x') }, 100) попадает в глобальную консоль, не в окно ошибок pane. Обходной путь: оберни try/catch внутри async-функций.
• Возобновление после перезагрузки может удивить — если вчера ты напечатал что-то деструктивное, перезагрузка сегодня перезапустит это. Лучшая практика: panes, которые ты не хочешь авто-возобновлять → очисти содержимое перед закрытием вкладки (Ctrl+A, Del, ▶ на пустом = обнуляет jzLastRun).
• Top-level await НЕ работает. Оберни в IIFE: (async () => { await ... })().
• Доступ к MAIN world — JS pane работает в контексте страницы (через chrome.scripting.executeScript world=MAIN), поэтому видит глобали страницы (React, Redux store, jQuery и т.д.). Как JS-правила.

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

JS pane — 2-й тип «окна на странице» JustZix. Ранее мы написали о CSS pane (живой редактор CSS) и о JS Console (REPL). Все три вместе — мини-IDE прямо во вкладке браузера, со scope по доменам.

Установи JustZix и получи скрипты Run-on-demand на каждой странице, без риска авто-запуска.