JustZix — инструкция по использованию

Внедрение собственных стилей CSS, кода JavaScript и кнопок действий на любые страницы

Концепция и основные понятия

JustZix позволяет автоматически внедрять собственный CSS и JavaScript на выбранные страницы, а также определять кнопки действий (ярлыки, выполняющие фрагменты кода по запросу).

Иерархия данных

Шаблоны URL на уровне набора и группы

Каждый набор и каждая группа может получить собственный список дополнительных шаблонов URL (chip-input). Когда список пуст — элемент работает везде, где совпадает шаблон каталога. Если задать, например, https://justzix.com/admin/* — элемент сработает только на подстраницах админки.

Обучение — интерактивное введение

Для новых пользователей в JustZix есть встроенное интерактивное обучение, которое шаг за шагом проводит вас через создание полного решения — от каталога, через группу и набор правил, до кода CSS/JS и кнопки действия. Подсказки появляются в виде всплывающих окошек рядом с очередными элементами панели.

Как его запустить:

• Автоматически — при первом открытии панели, когда у вас ещё нет ни одного каталога.
• Вручную — в любой момент из меню настроек → Обучение.

В окне «Центр обучения» вы выбираете урок и нажимаете Начать. Во время обучения:

• Кнопки Назад и Далее переключают шаги; полоса внизу окошка показывает прогресс.
• Некоторые шаги ждут, пока вы выполните указанное действие — например, нажмёте подсвеченную кнопку.
• Шаги с примером кода имеют кнопку Копировать.
• Клавиша Esc или кнопка × закрывает обучение в любой момент.

Интерфейс и навигация

Режим редактирования

Доступ через правый клик на иконку расширения → "Параметры", либо клик на иконку → кнопка "Панель редактирования".

• Логотип вверху сайдбара — полный логотип justzix (значок + словесный знак Inter). Автоматически меняется между светлым и тёмным вариантом в соответствии с режимом приложения (inline SVG + CSS variables, без подмены файла). Клик на логотип открывает Панель.
• Раздел "Каталоги" — под логотипом: метка "КАТАЛОГИ" + кнопка добавления каталога, поиск, фильтр "Только активные".
• Дерево каталогов — каталог ▶ группа ▶ набор. Стрелка раскрытия переключает. Клик на набор переходит к редактированию только этого набора.
• Меню Настройки (drop-up внизу сайдбара) — одна кнопка, открывающая панель с опциями: Тёмный режим, Инструкция, Экспорт настроек, Импорт настроек, Импорт из URL, Облачная синхронизация, Мои ссылки, AI Helper, Сайт проекта, выбор языка, индикатор Storage quota и номер версии расширения. Закрывается по Escape или клику вне панели.
• Панель каталога — метка кнопки (3 буквы), цвет, название, шаблон URL, опции панели действий, экспорт/импорт, удаление.
• Карточки наборов — каждая с 3 вкладками: CSS JavaScript Действия.
• Панель breadcrumb — в редакторе каталога, группы и набора показывает путь навигации; в крайнем левом углу находится иконка «дом» — быстрый возврат на Панель.
• Изменение размера редактора — полосу под каждым редактором (CSS и JS) можно перетащить вниз, чтобы увеличить рабочую область.
• Сворачивание сайдбара — вертикальная полоса между сайдбаром и редактором прячет левую панель для большего пространства.

Плавающая кнопка (на подходящих страницах)

Маленькая круглая кнопка появляется автоматически на страницах, соответствующих любому каталогу. По умолчанию отображает надпись ZIX, но у каждого каталога может быть своя метка.

Метка каталога: в панели каталога, в крайнем левом углу (рядом с color picker) есть текстовое поле для метки кнопки. Жёсткие ограничения: макс. 3 символа, всегда UPPERCASE (преобразование в заглавные происходит сразу при вводе). Поле принимает буквы и цифры — примеры: ZIX, QA, DEV, ADM, X. При нескольких подходящих каталогах берётся метка первого, у которого она задана; остальные пропускаются (пустое поле = откат к ZIX).

Состояние цветом (брендовая палитра):

• Inject Green (или цвет каталога, если задан) — все подходящие каталоги включены
• Syntax Orange (или приглушённый цвет каталога) — некоторые включены, некоторые выключены
• Muted Gray — все выключены
• Halt Red (с opacity 0.7) — расширение глобально отключено

Цвет каталога: если у каталога задать color picker, плавающая кнопка на подходящих страницах примет этот цвет. Состояния "mixed" и "off" автоматически модулируют насыщенность. При нескольких подходящих каталогах берётся цвет первого, у которого он задан.

Панель

При входе в панель редактирования расширение открывает Панель — главную страницу со сводкой библиотеки и быстрыми ссылками. Раньше панель автоматически выделяла первый каталог из списка; теперь вместо этого вы видите обзор.

Панель доступна через клик на логотип в сайдбаре и через иконку «дом» на полосе breadcrumb каждого редактора (каталога, группы, набора). Сам заголовок Панели тоже имеет иконку «дом» — её клик обновляет данные (перезагружает библиотеку из storage и рендерит Панель заново).

Панель имеет компоновку из фиксированных рядов карточек:

• Библиотека — инвентарь: количество каталогов, групп, наборов, действий, панелей действий, окон на фронте, а также наборов с CSS и наборов с JS.
• Статистика использования — фактические счётчики: кликов по действиям, применений CSS, запусков JS и показов окон. Значения суммируются со всех сопряжённых устройств (через облачную синхронизацию).
• Недавно отредактированные наборы — список до 6 последних наборов (отсортирован по дате изменения); клик открывает набор в редакторе.
• Подсказка — случайный совет из инструкции; пул насчитывает 30 подсказок, между которыми вы переходите кнопками «предыдущая» / «следующая». Рядом есть ссылка на полную инструкцию.
• Последние примеры — новейшие примеры из библиотеки justzix.com (с категорией и датой добавления).
• Из блога — новейшие записи блога с сайта проекта.
• Состояние расширения — ряд из трёх карточек: установленная версия (с информацией, доступна ли более новая), использование памяти chrome.storage.local и дата последнего облачного бэкапа.

Карточки «Последние примеры» и «Из блога» загружают содержимое с сайта проекта; когда endpoint недоступен (например, offline), обе карточки скрываются. Версия расширения проверяется заново при каждом входе на панель.

Дерево каталогов (sidebar)

Левая панель в режиме редактирования отображает каталоги в иерархии — каждый каталог можно раскрыть, чтобы увидеть его наборы и перейти к редактированию конкретного.

Навигация

Изменение порядка (drag & drop)

Наведите на каталог, группу или набор — слева появится маркер drag&drop. Захватите мышью и перетащите:

Каталоги

• Каталог → каталог — изменение порядка (синяя линия показывает место вставки: над или под элементом)

Группы

• Группа → группа (тот же каталог) — изменение порядка в каталоге
• Группа → группа (другой каталог) — перенос группы между каталогами
• Группа → название каталога — перенос группы в конец целевого каталога

Наборы

• Набор → набор (та же группа) — изменение порядка внутри группы
• Набор → набор (другая группа) — перенос набора между группами с сохранением позиции
• Набор → название группы — перенос набора в конец целевой группы
• Набор → название каталога — перенос набора в первую группу каталога (когда у каталога несколько групп)

Сворачивание сайдбара

Вертикальная полоса между сайдбаром и редактором прячет левую панель — удобно, когда нужно больше места для редактора. Состояние запоминается между сессиями. После показа/скрытия CodeMirror автоматически обновляет свою ширину.

Изменение размера редакторов

Под каждым редактором (CSS, JS, код действия) есть горизонтальная полоса с маркером для перетаскивания по вертикали. Захватите мышью и потяните вниз, чтобы увеличить редактор. Мин. высота 80px, макс. не ограничена — страница прокручивается естественно вместе с содержимым.

Поиск в редакторах кода

Над каждым редактором кода CodeMirror — CSS и JavaScript в карточке набора, а также «Код JS» в редакторе действия — расположена панель поиска: текстовое поле и кнопка с иконкой лупы.

• После запуска поиска все найденные фрагменты подсвечиваются — текущее совпадение жёлтым (чёрный текст), остальные синим (белый текст).
• Рядом с полем появляется счётчик совпадений в формате n / всего.
• Когда совпадений больше одного, появляются стрелки ▲ ▼ для перехода между результатами. Текущее совпадение прокручивается в зону видимости.
• Редактирование кода аннулирует результаты — нужно искать заново.

Горячие клавиши

Шаблоны URL

Шаблон URL определяет, на каких страницах активируется каталог.

Состояния наборов (Активный / Включён)

У каждого набора два независимых флага:

Каскад переключателей

Переключатель каталога  →  меняет enabled всех active rules в его группах
Переключатель группы    →  меняет enabled всех active rules этой группы
Переключатель набора    →  меняет только enabled этого набора

Правила с Активный: НЕТ (значок ○) пропускаются при каскадах — вы управляете ими только вручную, независимо от состояния каталога и группы.

Практические примеры

Плавающая кнопка и панель

В раскрывающейся панели (правый клик) можно:

• Включать/выключать отдельные каталоги
• Включать/выключать отдельные группы (когда у каталога больше одной группы)
• Включать/выключать отдельные наборы в каталоге
• Включать/выключать панели действий — раздел «Панели действий» под списком наборов, чекбокс на каждую панель, меняет actionBar.enabled (persistent, распространяется в панель редактирования)
• Разъединять панели — раздел «Соединения» появляется, когда плавающая кнопка склеена с панелями (snap & connect), кнопки «Отсоединить от: X» + «Отсоединить все»

Панель показывает только активные наборы (●) — независимые (○) скрыты для краткости. Когда у каталога только одна группа с названием "Domyślna", заголовок группы пропускается — видны только наборы.

Виджет попапа (иконка расширения)

Клик по иконке JustZix в панели расширений Chrome открывает виджет попапа — компактную панель управления для текущей вкладки. Сверху вниз:

• Панель редактирования — кнопка, открывающая режим редактирования (страницу параметров) в новой вкладке.
• Plugin enabled — большой переключатель глобального включателя расширения (зелёный = включено, серый = выключено).
• Режим редактирования панели — переключатель режима редактирования панели действий для текущей вкладки.
• AI Helper — переключатель, открывающий / закрывающий окно ИИ-ассистента на текущей вкладке.
• URL-адрес текущей вкладки.
• Список каталогов, подходящих к странице — чекбокс, включающий/выключающий каждый каталог, и иконка «eye-off», скрывающая плавающую кнопку для этой страницы.
• Панели действий — раздел с чекбоксом на каждую панель (persistent actionBar.enabled).
• Вернуть плавающую кнопку — ссылка, появляющаяся, когда кнопка скрыта для текущей страницы.

Панели действий (ActionBars)

В одном рабочем пространстве можно иметь несколько панелей действий — каждая со своим названием, ориентацией, цветом фона, собственным набором кнопок и независимой позицией на каждое окно браузера. Панель может быть привязана к каталогу, группе или отдельному набору (это определяет видимость и каскад).

Создание и редактирование панели

В редакторе каталога, группы или набора есть кнопка «Панели действий (N)». Клик открывает модал управления панелями. В модале:

• Добавить панель — выбираете уровень привязки (каталог / группа / набор текущего контекста)
• Название (макс. 6 символов UPPERCASE) — опциональная вкладка с названием выступает над краем панели
• Ориентация — горизонтальная или вертикальная
• Цвет фона — color picker (брендовая палитра JustZix)
• Включена — когда снято, панель вообще не рендерится (не просто скрыта визуально). Состояние сохранено в storage, независимо от позиции на окно

Видимость, наследуемая вниз

• Панель каталога видна для всех активных наборов этого каталога (агрегирует их действия через barId).
• Панель группы — только для наборов этой группы.
• Панель набора — только когда набор активен.
• Панель без единого видимого и включённого действия в данной ветке вообще не рендерится.

Привязка действия к панели

У каждого действия на вкладке «Действия» карточки набора есть выпадающий список «Панель действий» — выбираете целевую панель из списка видимых для этого набора (собственные панели набора + панели группы + панели каталога).

Склеивание панелей (snap & connect)

Во время перетаскивания панели расширение обнаруживает края соседних панелей и плавающей кнопки на расстоянии ≤ 12 px. Появляется sticky-индикатор, и после отпускания панели объединяются в группу соединений. Затем:

• Соединённые панели перемещаются вместе (group drag).
• Плавающая кнопка JustZix тоже может участвовать в соединениях (__float как псевдо-панель).
• Соединения запоминаются на окно в памяти сессии.

Правый клик на маркер перетаскивания панели → контекстное меню:

• Скрыть эту панель (до перезагрузки) — runtime-скрытие на окно браузера. Панель возвращается после F5 / смены URL / закрытия и открытия вкладки. Постоянное отключение: см. Показать/скрыть панели ниже.
• Отсоединить от: X () — появляется для каждого соседнего соединения.
• Отсоединить все соединения () — когда панель соединена с более чем одной.

В режиме редактирования панели это меню приглушено; правый клик на метке даёт тогда опцию «Удалить метку».

Показать/скрыть панели — из 3 мест

Для постоянного включения/выключения панелей действий (без F5) расширение предлагает три точки входа, все привязанные к одному и тому же actionBar.enabled в storage — изменение из одного места распространяется в панель редактирования и остальные UI:

1. Floating panel (правый клик на главной плавающей кнопке JustZix) — раздел «Панели действий» под списком каталогов/групп/наборов. Чекбокс на каждую панель показывает persistent state. Клик → переключение actionBar.enabled.
2. Виджет попапа (клик по иконке расширения рядом с адресом) — раздел «Панели действий» под списком каталогов. Плюс на каждый каталог маленькая иконка «eye-off» — прячет плавающую кнопку для текущей страницы (восстановление ссылкой «Вернуть плавающую кнопку»).
3. chrome.contextMenus (правый клик на странице → JustZix → Панели действий) — динамическое подменю с чекбоксом на каждую панель. Список перестраивается на каждую активную вкладку и каждое изменение state.

Режим редактирования панели — свободная компоновка

Режим редактирования панели действий включается тремя способами: горячей клавишей Ctrl+Alt+S (работает из любого места страницы), переключателем в виджете попапа расширения, и из контекстного меню Chrome (правый клик → «Режим редактирования панели действий»). Вверху экрана появляется информационная полоса; повторное использование любого из переключателей выходит из режима.

В режиме редактирования обычная работа элементов приостановлена (клик не запускает код, поля не принимают фокус) — вместо этого элементы можно располагать и масштабировать:

• Выделение — клик = один элемент; Ctrl+клик = добавить/убрать из выделения; клик в пустое место или Esc = снять всё выделение. Shift+перетаскивание по пустому месту = выделение диапазона (прямоугольник).
• Перемещение — перетаскивание выделения мышью. Несколько выделенных элементов перемещаются вместе.
• Изменение размера элемента — при выделении одного элемента появляется рамка с 8 маркерами (4 угла + 4 края).
• Изменение размера панели — у панели есть маркеры на правом, нижнем краю и в углу (изменение размера холста).
• Метки — кнопка «+ Label» над панелью добавляет статическую текстовую метку в первое свободное место. Двойной клик на метке открывает редактор (текст, шрифт, размер, цвет, «Удалить»). Метки перемещаются и масштабируются как элементы действий.
• Удаление меток — клавиша Delete удаляет все выделенные метки сразу; правый клик на метке даёт опцию «Удалить метку»; есть также кнопка «Удалить» в редакторе метки. Элементы действий удаляются в панели редактирования (они принадлежат правилам).
• Сброс панели — кнопка «Сброс панели» над панелью возвращает компоновку по умолчанию (flow): удаляет custom-позиции и размеры элементов, а также все метки (с подтверждением).
• Отмена — Ctrl+Z отменяет последнее изменение (перемещение, resize, добавление/правку/удаление метки, сброс). История охватывает текущую сессию редактирования.

Режим редактирования «жёсткий»: перемещение и resize притягиваются к сетке 8 px, элемент нельзя вынести за пределы панели или положить на другой — при коллизии оба элемента (перемещаемый и тот, что под ним) получают красную рамку, а после отпускания элемент возвращается на прежнее место. Панель нельзя уменьшить так, чтобы элемент оказался снаружи; когда новый элемент или метка не помещается в панель, холст панели автоматически увеличивается. Правый клик мыши на панели в режиме редактирования не показывает меню «скрыть/отсоединить панель».

Режимы компоновки панели: панель стартует в режиме flow (классический flexbox — элементы один за другим, вертикально или горизонтально). Первое перемещение или масштабирование элемента конвертирует панель в режим custom (холст со свободным позиционированием) — визуально без изменений, потому что текущая компоновка снимается как стартовая точка.

Типы действий: BUTTON / SELECT / INPUT / SLIDER / TEXTAREA / TOGGLE3

У каждого действия есть тип — выбирается выпадающим списком в начале каждого действия в карточке набора. Доступно 6 типов:

Статические текстовые метки не являются типом действия — их добавляют прямо на панель в режиме редактирования (см. «Режим редактирования панели» → метки).

Общие поля

• Label — макс. 6 символов (uppercase, monospace). Показывается на кнопке, как placeholder INPUT/TEXTAREA, или как вкладка над SELECT/SLIDER/TOGGLE3.
• Цвет — color picker (фон элемента; для TOGGLE3 = фон активного состояния).
• Второй цвет (colorText) — picker рядом с первым, плюс hex-поле с нативным ctrl+C/V. Семантика по типам:
  • BUTTON / SELECT (face) / INPUT / TEXTAREA — цвет текста
  • SLIDER — цвет полосы (accent-color ползунка); текст метки и значения — отдельные поля (см. «Гранулярные цвета» ниже)
  • TOGGLE3 — цвет текста активного состояния
  У каждого picker есть кнопка ×, возвращающая default (пусто = renderer откатывается к CSS default — обычно белому).
• Панель действий — выпадающий список, привязывающий действие к конкретному ActionBar.
• Видимость — чекбокс «видимое» позволяет быстро скрыть без удаления.
• Горячая клавиша — кликните и нажмите комбинацию (зарезервированные сочетания Chrome сопровождаются предупреждением).
• Код JS — выполняется при активации. Доступные переменные: value, $el (DOM-элемент), $action ({ id, label, type, el }); для TOGGLE3 дополнительно stateIdx (0-2) и stateLabel.

SELECT — модал опций

Клик «Опции (N)» в карточке действия типа SELECT открывает модал:

• Variant: static (опции настраиваются здесь) или js (код заполняет нативный <select>).
• Список опций для static: каждая строка — { name, value }. name = что видит пользователь, value = что попадает в JS как переменная value.
• Гранулярные цвета dropdown — общие для обоих вариантов:
  • colorDropdownBg — фон popup-панели (static) + фон <option> (js variant)
  • colorOption — цвет текста названия опции в dropdown
  • colorSelected — фон выбранной опции (static; в js — нативный, browser-specific)
  • colorHover — фон опции под курсором (static)
• Стабильный ID действия — полный action.id с кнопкой copy + пример JS-селектора.

INPUT — модал настройки

• Placeholder — текст, видимый до ввода.
• Default value — начальное значение (когда нет записи в memory).
• colorPlaceholder — цвет текста placeholder (через CSS variable, потому что псевдоэлемент ::placeholder не стилизуется inline).
• Стабильный ID действия + пример JS-селектора.

SLIDER — модал настройки

• Min / Max — числовой диапазон (например, 0–100). Обязательно: min < max.
• Step — шаг (например, 1, 5, 0.1). Default 1.
• Default value — начальное значение (когда нет memory). Default (min+max)/2.
• Unit — единица, показываемая после значения (например, «px», «%»). Опционально.
• colorLabel — цвет метки слева от полосы.
• colorValue — цвет числа+единицы справа.
• Код JS — выполняется на change (отпускание мыши / Tab / Enter). value = числовое значение.

TEXTAREA — модал настройки

• Placeholder / Default value — аналогично INPUT (начальное значение может содержать \n для переносов строк).
• Rows — число видимых строк (1-20, default 3). Управляет высотой поля.
• colorPlaceholder — аналогично INPUT.
• Код JS — выполняется на change (blur, НЕ Enter — Enter в textarea это легитимный перенос строки). Пользователь выходит из поля → значение сохранено и код запущен. value = строка с переносами строк.

TOGGLE3 — модал настройки

• 3 состояния — ровно 3, каждое с полями label (макс. 5 символов, uppercase) и value (строка, передаваемая в код как value). Метки по умолчанию: OFF / MID / ON.
• Default state — radio button у каждого состояния указывает, какое начальное (когда нет memory). Default 0.
• colorBg — фон wrap-контейнера (весь segmented control).
• colorHover — фон hover на неактивной кнопке.
• colorInactiveText — цвет текста неактивных состояний (активное состояние использует colorText).
• Код JS — выполняется при каждой смене состояния (клик на неактивное). Переменные: value (state.value, откат к state.label), stateIdx (0-2), stateLabel, $el (контейнер div).

Persistent memory (SELECT, INPUT, SLIDER, TEXTAREA, TOGGLE3)

Выбор / значение / позиция ползунка / содержимое textarea / активное состояние toggle3 автоматически запоминаются на действие. После F5 значение возвращается; после закрытия вкладки и повторного её открытия (на странице, соответствующей правилу) — тоже. Singleton на action.id — одно значение, независимое от конкретного URL.

Формат значения в memory по типам:

• SELECT (оба варианта), INPUT, TEXTAREA → string
• SLIDER → number (или string-numeric после roundtrip из storage)
• TOGGLE3 → integer 0-2 (ИНДЕКС активного состояния, не value)

Storage:

• Primary: sessionStorage — синхронный, F5-safe, на вкладку.
• Backup: chrome.storage.local.actionMemory[id] — cross-tab, durable.

Нет синхронизации cross-device: memory остаётся локально. Два компьютера могут иметь разные значения (например, разный фильтр на каждого пользователя).

Стабильный ID действия

У каждого действия есть неизменный action.id (формат a_<base36>_<random>). В карточке набора рядом с каждым действием есть значок с номером строки — клик копирует полный ID в буфер обмена, tooltip показывает полный ID.

В user-JS обращайтесь через data-jz-action-id:

const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');
el.value = 'новое значение';
el.dispatchEvent(new Event('change'));

Или через window.JZ helpers — см. Программный вызов действий из JS.

Контекстное меню Chrome

Правый клик на любой странице → JustZix:

• Включить/выключить плавающую кнопку для этой страницы — переключение видимости главной плавающей кнопки (аналогично «eye-off» в попапе).
• Режим редактирования панели действий (вкл/выкл) — переключает режим редактирования панели на активной вкладке; третья точка входа наряду с горячей клавишей Ctrl+Alt+S и переключателем в попапе.
• AI Helper (вкл/выкл) — открывает или закрывает окно ИИ-ассистента на активной вкладке.
• Панели действий ▸ — подменю с чекбоксом на каждую панель. Список только панелей, релевантных для активной вкладки. Чекбокс = persistent actionBar.enabled state.
• Окна CSS ▸ / Окна JS ▸ / Консоли JS ▸ / Консоли Output ▸ — аналогичные подменю для каждого из 4 типов окон на странице (см. раздел ниже). Чекбокс = enabled state на окно.
• Временное окно (TEMP) ▸ — подменю с 4 пунктами: TEMP CSS pane / TEMP JS pane / TEMP JS Console / TEMP Output Console. Клик = переключение (создать или закрыть). Работает на любой странице, независимо от совпадения каталога.

Подменю окон перестраиваются по: tabs.onActivated, tabs.onUpdated (URL change), и storage.onChanged для folders/groups/rules/actionBars/cssPanes/jsPanes/jsConsoles/outputConsoles/floatingHidden. TEMP-подменю статично (всегда 4 пункта).

Окна на странице (CSS / JS / Консоли)

Расширение предлагает четыре типа плавающих окон, внедряемых на страницы, наряду с панелями действий. Каждое окно привязано к каталогу, группе или набору (наследует видимость каскадно, как панели действий) и появляется на страницах, совпадающих по URL.

Управление: в редакторе каталога / группы / набора найдёте кнопку «Окна ▾ (N)». Клик раскрывает меню с 4 типами — выбираете тип, открывается модал со списком окон этого уровня (плюс окна, унаследованные с уровней выше). Добавляете, называете, окрашиваете, удаляете.

CSS pane

Плавающее окно с текстовым полем для CSS. Каждое изменение (после короткой паузы) обновляет внедрённый <style> — вы видите эффект на лету. Содержимое запоминается на вкладку браузера (переживает F5, исчезает с закрытием вкладки). Идеально для быстрого тестирования CSS без сохранения в правило.

JS pane

Текстовое поле для JavaScript, выполняемого в контексте страницы. Код запускается при изменении (с задержкой) либо вручную кнопкой ▶ Run / горячей клавишей Ctrl+Enter. Ошибки выполнения показываются в красной полосе под кодом. Когда код изменён с момента последнего запуска, кнопка Run светится жёлтым (состояние «dirty»).

JS Console (REPL)

Полноценная консоль на странице. Вводите код в нижнее поле, Ctrl+Enter (или ▶) выполняет, результат дописывается в область логов выше. Функции:

• История команд — стрелки ↑/↓ на первой/последней строке ввода прокручивают предыдущие команды (как в терминале).
• Ctrl+L — очищает output.
• Перехват console.* — вызовы console.log/warn/error/info во время выполнения показываются в логе (раскрашены по типу).
• Строки раскрашены: команда (синий), результат (светлый), ошибка (красный), console.log (серый), console.warn (жёлтый).

Ввод, output и история запоминаются на вкладку. Консоль выполняет код в MAIN world страницы — у вас есть доступ ко всем переменным и функциям страницы.

Output Console

Только для чтения просмотр логов — автоматически перехватывает всё, что происходит на странице: console.log/warn/error/info/debug, непойманные исключения, необработанные Promise rejections, сетевой трафик и push в dataLayer, а также ваш собственный логгер window.JUSTZIX.*. В отличие от JS Console (где вы сами вводите код) — здесь логи текут сами.

Шесть вкладок со счётчиками

Окно разделено на 6 вкладок, каждая со счётчиком записей (badge):

Панель контекстных фильтров

Между вкладками и полем поиска есть панель фильтров, которая меняется в зависимости от выбранной вкладки:

• All — без дополнительных фильтров.
• JZconsole / Console — флажки уровней: log, info, warn, error, debug. Снимите уровень → строки исчезают из просмотра.
• Network — три ряда: тип ресурса (document, script, stylesheet, image, xhr/fetch, font, …), класс HTTP-статуса (2xx/3xx/4xx/5xx), а также ползунки диапазона размера и времени (0–100000 ms) плюс поле фильтрации по домену. У рядов чекбоксов есть ярлыки выбрать всё / снять всё.
• Errors — без чекбоксов; каждую ошибку раскрываете, чтобы увидеть детали.
• DataLayer — окно делится пополам (см. ниже).

Поиск

Под панелью фильтров есть постоянно видимое поле поиска. Фильтрует записи активной вкладки на лету (совпадение фрагмента, без учёта регистра). Esc очищает поле.

Логи консоли — сворачиваются как в DevTools

Записи console.* по умолчанию свёрнуты — показывают сокращённый просмотр (например, [PickupMap][2026-05-16T15:25Z] AUTO_SELECTION_SKIPPED: {reason: 'Lower priority source', …}). Клик раскрывает полные аргументы (объекты/массивы как раскрываемое дерево JSON), аналогично консоли DevTools.

Вкладка Network

Network перехватывает запросы через chrome.webRequest (разрешение webRequest в манифесте). Каждая запись показывает в том числе метод, URL, статус, тип ресурса, размер, длительность, удалённый адрес (Remote address) и инициатора (Initiator). Буфер запросов поддерживается в фоне, поэтому записи до открытия окна тоже появятся.

Вкладка DataLayer

Окно DataLayer разделено на две колонки:

• Левая — Новые push: поток последовательных вызовов dataLayer.push(...) в порядке событий.
• Правая — Текущее состояние: живое содержимое объекта window.dataLayer как индексированное (0:, 1:, …) раскрываемое дерево JSON — заходите вглубь во вложенные данные, аналогично инспектору объекта в DevTools. Снимок обновляется после каждого push. В заголовке правой колонки есть кнопки раскрыть всё / свернуть всё — работают рекурсивно по всему дереву.

Клики по собственному UI JustZix (раскрытие узлов дерева, кнопки окна) не попадают в эту вкладку. Если бы страница собирала события click (например, GTM auto-event), клик по окну генерировал бы push в dataLayer и сбрасывал бы раскрытие дерева — расширение распознаёт такие push и не сообщает о них (реальный window.dataLayer страницы остаётся нетронутым).

Собственный логгер — window.JUSTZIX

Output Console предоставляет глобальный API для логирования из вашего кода (JS pane, действия, код страницы):

JUSTZIX.log('обычный лог');
JUSTZIX.warn('предупреждение');
JUSTZIX.error(new Error('ошибка'));   // покажет stack trace
JUSTZIX.info({ obj: 1, arr: [2,3] });
JUSTZIX.debug('детали');               // по умолчанию скрыто (фильтр)

Доступные алиасы:

• window.JUSTZIX — основной, всегда работает
• window.__JUSTZIX__ — алиас, всегда доступен
• window.JZ — алиас только если у страницы нет собственного window.JZ (некоторые страницы, например Google Ads, занимают это имя)

После появления Output Console в логе вы увидите приветственную строку, сообщающую, какой алиас доступен на этой странице.

Что перехватывается

• console.log/warn/error/info/debug(...) со страницы — проходят также в обычную консоль DevTools (мы не блокируем)
• window.JUSTZIX.*(...) — ваш выделенный канал (не идёт в DevTools)
• Непойманные исключения (throw new Error(...)) — показаны красным с местом ошибки
• Необработанные Promise rejections — Promise.reject(...) без .catch

Ошибки запросов fetch/XHR не попадают на вкладку Errors (это не исключения JS) — вы найдёте их на вкладке Network по статусу 4xx/5xx. Мы не ловим нарушения CSP и внутренние предупреждения Chrome.

Быстрая справка — Ctrl+Shift+H

Ctrl+Shift+H открывает перемещаемое окно быстрой справки — руководство по работе с JustZix на странице: глобальные сочетания клавиш, сочетания внутри окон, Output Console, управление окнами мышью, режим редактирования панели и логирование в Output Console. Работает на любой странице. Окно перетаскивается за заголовок; Esc / клик вне / × / повторный Ctrl+Shift+H закрывает.

Настройка внешнего вида окна

Цвета: в модале управления (панель редактирования) у каждого окна есть color picker — точка заголовка, фон и текст заголовка, фон и текст body, цвет кнопок действий.

Шрифт и размер: правый клик на полосу заголовка окна → меню с выбором шрифта (Consolas, Menlo, Monaco, Courier New и другие monospace) и размера (10–24 px).

Перетаскивание, прилипание и соединение

Каждое окно перетаскиваете за полосу заголовка. При приближении края к другому окну / панели действий / плавающей кнопке (≤ 12 px) появляется магнитное притяжение — окна склеиваются в группу. Перетаскивание склеенной группы перемещает все элементы вместе. Позиции запоминаются на окно браузера.

Изменение размера окна

У каждого окна 8 маркеров resize: 4 в углах (изменение ширины и высоты сразу) и 4 на краях (изменение только одной оси). Перетаскиваемый маркер удерживает противоположный край на месте. Диапазон: ширина 180–1200 px, высота 120–900 px. Новый размер (pane.size) сохраняется — для постоянных окон синхронизируется между устройствами, для окон TEMP — на вкладку.

Прокрутка внутри окна

Прокрутка колёсиком мыши внутри окна прокручивает только содержимое этого окна — страница под ним не прокручивается. Это касается и случая, когда область окна достигает конца прокрутки или когда курсор находится над непрокручиваемым фрагментом (заголовок, панель фильтра).

Правый клик на заголовок окна

• На передний план / На задний план — изменение порядка окон при их наложении (одноразовый скачок над / под всеми перекрывающимися соседями).
• Отсоединить от: X / Отсоединить все соединения — когда окно склеено.
• Закрыть окно [тип] — прячет окно (его можно снова включить из панели / попапа).
• Шрифт / Размер — выбор шрифта и размера текста.

Кнопка закрытия и двойной клик по заголовку

У каждого окна (как временного TEMP, так и постоянного) в правом углу заголовка есть кнопка × для закрытия. TEMP скрываются (открой снова из контекстного меню страницы или горячей клавишей), постоянные — отключаются (включить чекбоксом в попапе). Двойной клик по полосе заголовка:

• Постоянные (CSS pane / JS pane / JS Console / Output Console) — сворачивают / разворачивают окно до заголовка. Состояние запомнено.
• TEMP — переключает запомненный размер ↔ по умолчанию.
• AI Helper — переключает запомненный размер ↔ по умолчанию.

Склейка и подсветка края

Когда край окна приближается к другому окну JustZix (порог 12 px), появляется красная кромка на стороне склейки (на обоих окнах). Отпускание курсора в этой позиции выполняет snap — окна затем перемещаются группой. Все окна расширения участвуют в этом механизме: панели действий, FAB, постоянные панели (CSS/JS/Console/Output), TEMP и AI Helper.

TEMP panes — временные окна

Вы можете создать временное окно на любой странице — даже на такой, для которой у вас нет ни одного каталога. TEMP panes — это быстрый ad-hoc инструмент: тестируете CSS/JS на чужой странице без настройки правил.

Особенности TEMP panes:

• Работают на любой странице (пропускают совпадение каталога)
• Запоминаются на вкладку — переживают F5, исчезают с закрытием вкладки. Не синхронизируются между устройствами.
• Другой цвет, чем у стандартных окон — оранжевый (CSS), красный (JS), розовый (JS Console), циан (Output) — вся рамка окна в этом цвете.
• «TEMP» в названии.
• Красный крестик × в правом верхнем углу заголовка — закрывает окно. Данные (код, лог, геометрия) остаются в сессии — повторное открытие окна того же типа их восстанавливает. Исчезают только при закрытии вкладки.
• Значок корзины в заголовке TEMP CSS / TEMP JS — очищает содержимое редактора одним кликом. Очистка попадает в историю отмены браузера (Ctrl+Z её отменяет). Для CSS живой <style> обновляется мгновенно.
• Максимум одна штука данного типа — повторное нажатие горячей клавиши закрывает существующее окно; третье открывает его снова с сохранённым содержимым.
• Память размера (на устройство) — после изменения размера окна TEMP его последний размер запоминается отдельно для каждого типа (CSS / JS / JS Console / Output) в памяти устройства. Переживает перезапуск браузера и не синхронизируется между устройствами. Вновь открытое окно TEMP запускается с размером по умолчанию (380×240).
• Двойной клик по заголовку = переключатель размера — двойной клик по полосе заголовка окна TEMP переключает его между размером по умолчанию и запомненным размером.

Создание / закрытие (переключение):

• Ctrl+Alt+G — TEMP CSS pane
• Ctrl+Alt+H — TEMP JS pane
• Ctrl+Alt+J — TEMP JS Console
• Ctrl+Alt+K — TEMP Output Console
• либо: правый клик на странице → JustZix → Временное окно (TEMP) ▸

AI Helper — ИИ-ассистент

AI Helper — это встроенный в расширение ИИ-ассистент, который помогает подготовить и внедрить решение CSS/JS под конкретную задачу на текущей странице. Модель может исследовать страницу, тестировать код на лету в окнах TEMP и — после вашего согласия — создать готовый каталог, группу и набор.

Настройка ключей API

В меню Настройки сайдбара пункт «AI Helper» открывает модал настройки:

• Ключи API для трёх провайдеров: OpenAI, Anthropic и Gemini (Google). Достаточно ключа одного провайдера, чтобы пользоваться ассистентом.
• Провайдер по умолчанию и модель по умолчанию — используются при открытии окна чата (модели можно также загрузить автоматически — тогда выбирается наивысшая доступная).
• У каждого ключа есть чекбокс «синхронизировать» (по умолчанию отключён).

Окно чата

Окно AI Helper — это плавающее окно (на вкладку, как окна TEMP — перетаскиваемое, масштабируемое 8 маркерами, крестик закрытия, один экземпляр). Открываете / закрываете его:

• горячей клавишей Ctrl+Alt+\,
• переключателем «AI Helper» в виджете попапа,
• из контекстного меню Chrome → JustZix → AI Helper.

В окне: выбор провайдера (когда у вас больше одного ключа) и модели (список загружается на лету), история разговора, кнопка очистки разговора и текстовое поле (отправить кнопкой или Ctrl+Enter). Модель автоматически получает контекст текущей страницы — URL, заголовок и фрагмент HTML.

Агентный workflow

AI Helper ведёт разговор по установленному workflow:

1. Уточняет детали — диапазон URL, названия каталога/группы/набора, цвета, точную цель.
2. Исследует страницу инструментом query_page (селекторы, структура DOM) перед написанием кода.
3. Вставляет подготовленный код CSS/JS во временное окно TEMP, которое вы видите на лету на странице.
4. Самостоятельно проверяет ошибки — инструментами read_temp_pane и read_console проверяет, не выдаёт ли тестируемый код ошибок, прежде чем показать вам результат.
5. Просит проверить эффект и прямо спрашивает, удался ли тест.
6. Когда тест не вышел — исправляет код и тестирует заново.
7. Только после вашего подтверждения закрепляет решение: создаёт каталог → группу → набор, а при необходимости также панель действий и действия. Каждое создание сущности требует отдельного подтверждения в расширении.

Модель использует инструменты через простой текстовый протокол (блок @@JZ_TOOL@@ … @@END@@), работающий одинаково для OpenAI, Anthropic и Gemini. Вызовы инструментов и их результаты показываются в окне как отдельные «чипы». Доступные инструменты:

Внешний вид окна AI Helper

Правый клик на полосе заголовка окна AI Helper открывает меню с опциями «На передний план» / «На задний план» (изменение порядка окон JustZix при их наложении), «Отсоединить от: X» (когда AI Helper склеен с другим окном) и «Внешний вид…». Панель «Внешний вид…» позволяет отдельно стилизовать четыре роли в беседе: ваши сообщения, ответы ИИ, результаты инструментов, встроенные формы — каждая со своим шрифтом, размером, цветом текста и фона. Значения сохраняются для каждого устройства.

Склейка с другими окнами и порядок (Z-order)

Окно AI Helper участвует в том же механизме склейки, что и панели действий, постоянные окна (CSS / JS / Console / Output) и окна TEMP. Перетаскивание края рядом с другим окном JustZix (порог 12 px) → магнитное притяжение, красная кромка указывает сторону склейки на обоих окнах. Склеенные окна перемещаются группой.

Когда окна накладываются, опции «На передний план» / «На задний план» в контекстном меню каждого окна (правый клик на заголовке) делают одноразовый скачок — окно проходит над / под всеми перекрывающимися соседями, не нужно кликать многократно.

Скриншот страницы (для vision-моделей)

Инструмент screenshot_page делает снимок текущего вида страницы и отправляет его модели как изображение. Весь интерфейс JustZix автоматически скрывается перед снимком (FAB, панели действий, AI Helper, постоянные панели, TEMP). Буфер из 3 последних снимков, прикрепляемых однократно к следующему запросу (после отправки — удаляются из буфера, чтобы экономить токены). Требуется vision-модель (например, gpt-4o, claude-3+/4, gemini-1.5+/2). Под чипом результата в чате отображается миниатюра — клик открывает полноэкранный просмотр.

Горячие клавиши

Глобальные (работают из любого места страницы)

Внутри окна (когда в фокусе)

Редакторы кода (панель редактирования)

Экспорт и импорт

Расширение предлагает пять форматов экспорта (полный, частичный, каталог, группа, набор) с автоматическим определением типа файла при импорте, чтобы избежать случайной перезаписи.

Экспорт — полный или выбранных элементов

В меню Настройки сайдбара: Экспорт настроек. Модал открывает два режима:

• Всё — экспортирует все каталоги, группы, наборы и глобальные настройки (плавающая кнопка, скрытые панели и т. д.)
• Выбранное — показывает дерево каталог → группы → наборы с чекбоксами:
  • Чекбокс каталога / группы отмечает все элементы ниже
  • Состояние indeterminate (чёрточка) показывает частичный выбор на каждом уровне
  • Кнопки Выбрать все / Снять все для быстрой манипуляции
  • Живая сводка внизу показывает, что будет экспортировано

Файлы частичного экспорта называются justzix-partial-DATA.json (против justzix-backup-DATA.json для полного), а внутри содержат флаг partial: true и поле groups[].

Экспорт одного каталога (с выбором)

В панели каталога: Экспорт — открывает модал с деревом групп и наборов (аналогично частичному экспорту, но ограниченному этим каталогом). Экспортируются только отмеченные наборы и группы, которым они принадлежат — пустые группы не попадают в файл.

Формат justzix-folder — файл содержит поле groups[] с иерархией групп и наборов каталога.

Экспорт группы

В панели группы: Экспорт — модал со списком наборов группы (чекбоксы). Файл: justzix-grupa-<название>-<дата>.json, формат justzix-group.

Экспорт одного набора

В виде набора: Экспорт набора — сразу скачивает файл (без модала). Формат justzix-rule, имя: justzix-zestaw-<название>-<дата>.json.

Импорт — автоматическое определение типа (модал полного импорта)

После загрузки файла/вставки JSON расширение автоматически распознаёт тип и показывает цветную панель определения:

Режимы частичного импорта (фиолетовая панель)

• Слить с текущими (по умолчанию) — сопоставляет каталоги по ID, добавляет новые; остальные каталоги в текущих настройках остаются нетронутыми.
  При конфликте ID появляется prompt с 3 опциями:
  • 1 / nadpisz — перезаписать существующие каталоги (удалит их группы и наборы)
  • 2 / kopia (по умолчанию) — импортировать как копии с новыми ID, "(import)" в названии каталога, без потери существующих данных
  • Отмена — прервать импорт
• Заменить текущие — очищает всё и вставляет только отмеченные элементы из файла.

Импорт одного каталога

В панели каталога: Импорт. Проверяет конфликты по ID и названию:

• Импортировать как новый — с припиской "(import)" в названии
• Перезаписать — удаляет старые группы и наборы каталога и вставляет новые
• Слить — добавляет новые группы / наборы в существующий каталог (сохраняя оба)

Импорт группы

В панели группы: Импорт — принимает 3 формата:

• justzix-group — вставляет все наборы группы из файла
• justzix-folder — вставляет все наборы из всех групп каталога
• justzix-rule — вставляет один набор

Все наборы из файла попадают в текущую группу с новыми ID (операция всегда типа "добавить копию" — без конфликтов).

Импорт одного набора

В виде набора: Импорт набора — принимает только justzix-rule. Prompt с 3 опциями:

• 1 / zastap — заменить содержимое текущего набора (id и groupId сохранены)
• 2 / kopia (по умолчанию) — добавить как новый набор рядом с текущим, в той же группе, с припиской "(import)"
• Отмена — прервать

Практическое применение частичного экспорта

• Совместная работа с командой — экспортируйте 2-3 каталога с конфигурацией проекта, коллеги импортируют их в режиме "Слить" без потери своих настроек
• Backup только важных конфигураций — например, продакшен остаётся, эксперименты пропускаете
• Частичная миграция — перенесите только один набор между устройствами
• Версионирование — экспортируйте конкретный каталог в git вместе с документацией проекта

Облачная синхронизация

Настройки → Облачная синхронизация открывает модал учётной записи синхронизации. Расширение хранит вашу библиотеку (каталоги, группы, наборы, действия, панели действий, окна на странице) в облаке justzix.com и поддерживает её согласованность на всех устройствах. Синхронизация работает только при выполненном входе — без учётной записи расширение работает только локально.

Учётная запись и ключ синхронизации

• Регистрация — расширение генерирует ключ синхронизации (уникальный секрет учётной записи). Храните его в безопасном месте — это единственный способ войти на другом устройстве.
• Вход — вы вставляете ключ синхронизации и необязательную метку устройства (например, «Рабочий ноутбук»). Вы можете решить, запоминается ли ключ в памяти расширения или сохраняется только на время сессии.
• К учётной записи можно прикрепить e-mail (подтверждается по ссылке) — он используется для восстановления доступа.

Первая синхронизация — разрешение конфликтов

При входе расширение сравнивает локальные данные с данными в облаке:

• Данные есть только в облаке → они загружаются на это устройство.
• Данные есть только на устройстве → они отправляются в облако.
• Данные есть в обоих местах → появляется модал конфликта с тремя стратегиями:

Можно также Отменить — тогда расширение выходит из учётной записи и ничего не меняет.

Постоянная синхронизация

После первой сверки синхронизация работает в фоне: расширение отправляет изменения и подтягивает новые сущности примерно раз в минуту. Изменение, сделанное на одном устройстве, появляется на других через короткое время. Точка статуса рядом с пунктом «Облачная синхронизация» показывает, подключена ли учётная запись.

Вкладка Статус — библиотека в облаке, история, действия

Вкладка Статус модала синхронизации показывает состояние аккаунта и даёт кнопки действий:

• Синхронизировать сейчас — немедленный push изменений и pull новых сущностей.
• Полный снимок — получает снимок библиотеки из аккаунта.
• Обновить данные аккаунта — обновляет информацию об аккаунте и список активных сессий.
• Полная пересинхронизация с аккаунтом — двунаправленная: сначала получает всю библиотеку из аккаунта, затем отправляет локальные сущности, которых в аккаунте нет. Чинит сущности, «застрявшие» локально — те, что так и не попали на сервер (push отклонён, отсутствуют в первом дампе) и которые обычная синхронизация не отлавливает, потому что они не меняются. Недеструктивна: сущности, уже присутствующие в аккаунте, пропускаются (без перезаписи более новых версий), а сущности, удалённые на другом устройстве, не воскрешаются.

Библиотека в облаке

Счётчики сущностей, находящихся в аккаунте: каталоги, группы, наборы, действия, панели действий, окна на странице. Считаются только достижимые сущности в дереве (у группы должен быть существующий каталог, у набора — группа, у панели/окна — существующий родитель) — согласованно со счётчиками Панели. Обновляются при открытии панели и после ручной синхронизации.

История синхронизаций

Локальный для устройства лог последних синхронизаций. На странице видны последние 10 записей; кнопка «Показать всю историю» открывает окно с полным списком (до 100 записей). Каждая запись содержит:

• время и инициировавшее устройство — имя и числовой ID сессии (тот же, что в «Активных сессиях»);
• числовую сводку — ↑ отправлено, ↓ получено, ✕ удалено;
• конкретные изменения — сгруппированные по типу со счётчиком (например, «Действия ×10») и с именами элементов, когда они известны;
• количественное состояние библиотеки после синхронизации (шесть счётчиков).

Лог локальный — не синхронизируется между устройствами. Запись создаётся после каждого тика синхронизации, который что-то реально изменил; ручное «Синхронизировать сейчас» всегда оставляет запись, даже при нулевых изменениях.

Что синхронизируется, а что нет

• Синхронизируется: каталоги, группы, наборы, действия, панели действий, окна на странице (панели CSS/JS, консоли), тема (светлая/тёмная) и язык интерфейса, а также ключи API AI Helper — но только те, у которых отмечен чекбокс «синхронизировать» рядом с ключом (см. AI Helper).
• Не синхронизируется (состояние конкретного устройства): позиции плавающих окон и панелей, размеры окон, память значений SELECT/INPUT, окна TEMP, ключи API без отмеченного чекбокса.

Статистика использования (применения CSS, запуски JS, показы окон) синхронизируется как отдельные сущности для каждого устройства — карточка Панели суммирует их со всех сопряжённых устройств. Тема и язык синхронизируются как общая настройка учётной записи и применяются при следующем открытии панели на другом устройстве.

Поделиться по ссылке (Shares)

Альтернатива отправке файла JSON в мессенджер. Вы выставляете публичную ссылку со временем жизни (1h / 6h / 12h / 24h / 48h) и передаёте получателю. Backend justzix.com хранит payload в облаке до истечения срока, потом он удаляется.

Требует залогиненной учётной записи синхронизации (Sync). Сам токен — это публичный секрет — каждый со ссылкой скачает, поэтому не отправляйте по публичным каналам, если содержимое чувствительное.

Формат токена

JZS-XXXX-XXXX-XXXX-XXXX (16 символов Crockford base32, ~80-bit энтропии). Принимается также весь URL https://www.justzix.com/s/JZS-... — расширение парсит и нормализует (путающиеся буквы I/L→1, O→0, U→V).

Лимиты учётной записи

• макс. 20 активных ссылок на учётную запись
• макс. 50 MB суммарно
• макс. 5 MB на одну ссылку
• макс. 30 новых ссылок в час

Превышение лимита = ошибка с сообщением. Отзовите неиспользуемые ссылки в панели Мои ссылки.

Создание ссылки (отправитель)

Кнопка «Поделиться URL» в четырёх точках входа, рядом с «Скачать файл»:

• Весь экспорт — Настройки → Экспорт настроек → кнопка «Поделиться URL» (тип justzix-full)
• Каталог — панель каталога → Экспорт → «Поделиться URL» (тип justzix-folder)
• Группа — панель группы → Экспорт → «Поделиться URL» (тип justzix-group)
• Набор — toolbar в виде набора → «Поделиться URL» рядом с Экспорт / Импорт (тип justzix-rule)

Клик открывает модал генерации ссылки: subject + summary что вы предоставляете, radio с TTL (по умолчанию 24h), «Сгенерировать ссылку». После успеха модал переключается на вид результата с двумя копируемыми значениями:

• Полный URL https://www.justzix.com/s/JZS-... — для отправки кому-то без расширения (покажет landing-страницу)
• Только токен JZS-XXXX-XXXX-XXXX-XXXX — для вставки в расширении получателя в «Импорт из URL»

У каждого своя кнопка «Скопировать». Показано также время истечения в локальном часовом поясе.

Панель «Мои ссылки»

Настройки → Мои ссылки (отдельный модал, не часть синхронизации — это две разные функции). Показывает список активных ссылок: счётчик в заголовке X/20 активных · Y MB / 50 MB, а для каждой ссылки карточку с:

• Типом (Весь экспорт / Каталог / Группа / Набор) и ID
• Временем истечения («истекает через Xh Ymin») и счётчиком скачиваний
• Токеном в monospace (кликните = выделяет целиком)
• Сводкой X каталогов · Y групп · Z наборов · N строк JS · A KB
• Кнопками Копировать ссылку / Копировать токен / Отозвать

Отзыв не отменяет уже скачанное содержимое. Если кто-то успел скачать payload, он у него локально. Share — это "best-effort time-limit", не DRM.

Импорт по ссылке (получатель)

Настройки → Импорт из URL (между «Импорт настроек» и «Облачная синхронизация», иконка цепочки). Модал из двух шагов:

Шаг 1 — ввод. Вставляете ссылку или просто токен. Валидация на стороне клиента: токен извлекается из URL, нормализуется Crockford-base32, проверяются 16 символов + формат. Неверный формат → сообщение с подсказкой о правильном формате.

Шаг 2 — preview. Расширение показывает сводку ссылки:

• Отправитель (display name или «анонимный», если не задал)
• Истекает через (относительное время)
• Тип (Весь экспорт / Каталог / Группа / Набор)
• Размер payload
• Содержимое (числа каталогов / групп / наборов / действий)
• CSS chars / JS lines
• Скачиваний

Если ссылка содержит JavaScript (jsLines > 0) — появляется красный баннер предупреждения со ссылкой «Показать код JavaScript». Открывает overlay с полным кодом JS каждого правила и действия — просмотрите перед импортом, потому что код будет выполняться на подходящих страницах.

Шаг 3 — импорт. Клик «Импортировать» → backend возвращает полный payload → расширение создаёт новые сущности с всегда свежими ID (никогда не перезаписывает существующие по ID):

Название нового контейнера: <имя-отправителя или "Import"> <дата> — потом вы можете переименовать / переместить как угодно.

Ошибки получателя

Backend не различает 404 «никогда не существовал» и 404 «истёк / отозван» — намеренно, чтобы не раскрывать, существовал ли токен когда-либо.

Программный вызов действий из JS

Любое действие (со вкладки «Действия» в карточке набора) можно вызвать программно из JS набора или кода другого действия. Глобальное пространство имён window.JZ устанавливается в MAIN world автоматически перед каждым выполнением user-JS.

API — действия

Пример — чтение и установка значений

// === Чтение ===
const filter = JZ.value('FILT');           // INPUT/TEXTAREA — string
const opacity = JZ.value('OPAC');          // SLIDER — string numeric ("75")
const mode = JZ.value('MODE');             // SELECT static — string (option.value)
const theme = JZ.value('THM');             // TOGGLE3 — state.value активного состояния

// === Установка ===
JZ.setValue('FILT', 'новое значение');     // INPUT/TEXTAREA — string + dispatch input+change
JZ.setValue('OPAC', 75);                   // SLIDER — clamp к min/max, dispatch input+change
JZ.setValue('SRT', 'prod');                // SELECT(js) — нативный select + dispatch change
JZ.setValue('MODE', 'staging');            // SELECT static — content.js выполняет flow (memory + UI + код)
JZ.setValue('THM', 'dark');                // TOGGLE3 — lookup по state.value (откат к label, затем idx)
JZ.setValue('THM', 2);                     // TOGGLE3 — эквивалентно; числовой idx тоже работает

API — панели и floating button

Context vars в коде действия

В поле «Код JS» действия вам автоматически доступны переменные — внедряемые как const background service worker'ом перед выполнением:

Сниппет в UI

В модале настройки действия типа SELECT и INPUT панель «Стабильный ID действия» показывает полный action.id с кнопкой copy и пример JS-селектора (document.querySelector('[data-jz-action-id="..."]')). Под списком BUTTON-ов видны чипы JZ.click('LBL') — клик чипа копирует сниппет в буфер обмена.

Требования

• Элемент действия должен быть видим в панели действий на текущей странице (у действия visible: true, панель видна в дереве + URL страницы совпадает с правилами).
• Невидимое действие или страница, на которой панель скрыта → JZ.click() вернёт false, JZ.action() вернёт null.
• Горячая клавиша, заданная на действии, имеет собственный механизм (capture-phase keydown listener в content.js) — не требует JZ.click().

Пример — действие AUTO, запускающее последовательность

// Код действия "AUTO"
JZ.click('LOAD');                          // клик по действию LOAD (например, загружает данные)
setTimeout(() => JZ.click('PROC'), 500);   // 500ms позже PROC (обрабатывает)
setTimeout(() => JZ.click('SAVE'), 1500);  // 1500ms позже SAVE (сохранение)

Пример — JS набора, реагирующий на DOM

После появления динамического элемента кликните действие, удаляющее его:

// Код JS набора — observer на модал, который появляется динамически
const observer = new MutationObserver(() => {
  if (document.querySelector('.cookie-banner')) {
    JZ.click('CCK');  // кликни действие, удаляющее баннер
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Пример — программная установка значения INPUT

// JZ.click на INPUT не меняет значение — используйте паттерн с dispatch 'change':
const el = JZ.action('SRCH');           // или JZ.actionById('a_mp1deeq3_uimd8l')
if (el) {
  el.value = 'новый фильтр';
  el.dispatchEvent(new Event('change'));
}

Прямой доступ через DOM

Если вы предпочитаете работать с DOM напрямую (например, меняете стиль, не вызываете):

// Lookup по стабильному ID (рекомендуется — устойчиво к смене label):
const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');

// Lookup по label (case-insensitive — UPPERCASE в data-jz-key):
const btn = document.querySelector('[data-jz-key="MYBT"]');
btn.style.opacity = '0.5';      // приглушить
btn.dataset.busy = 'true';      // собственный атрибут

Где живут элементы действий в DOM:

У всех элементов есть атрибут data-jz-action-id (уникальный стабильный идентификатор). Селектор .jz-actions-bar безопасен — не конфликтует с DOM страницы.

Избранные функции

Поиск в сайдбаре

Поле "Поиск" фильтрует дерево каталогов. Логика совпадения:

• Совпадение по названию каталога или URL → весь каталог со всеми наборами остаётся видимым и авто-раскрывается
• Совпадение по названию набора, тегу или содержимому CSS/JS → показаны только подходящие наборы в каталоге, каталог авто-раскрыт
• Нет результатов → сообщение "Нет результатов для [запрос]"

Совпадение case-insensitive, подсветка жёлтым показывает место совпадения.

Глобальный включатель

После клика по иконке расширения в панели инструментов Chrome появляется виджет попапа с большим зелёно/серым переключателем «Plugin enabled». В выключенном режиме никакой CSS/JS не внедряется ни на одной странице, независимо от настроек каталогов. Плавающая кнопка тогда выключена (Halt Red, opacity 0.7). Состояние переживает перезапуск Chrome.

Вставить URL из вкладки

Кнопка рядом с полем шаблона URL — вставляет protocol://host/* из активной вкладки. Создание каталога за 2 секунды. Адрес страницы параметров расширения пропускается — берётся самая свежая внешняя вкладка.

Валидация URL на лету

Inline справа от поля URL появляется информация "Совпадает с X открытыми вкладками" или предупреждение. Ловит опечатки немедленно.

История изменений набора

Снимок CSS и JS создаётся через 3 секунды после последнего редактирования (debounce). Лимит 5 версий — самая старая выталкивается. При восстановлении версии текущее содержимое добавляется в историю как самый новый снимок, поэтому вы всегда можете отменить отмену.

Теги и поиск по тегам

В заголовке карточки набора есть поле для тегов — вводите через запятую. Появляются как маленькие метки в сайдбаре рядом с названием набора. Поиск находит и по тегам.

Метка и цвет каталога

У каждого каталога может быть собственная метка на плавающей кнопке (макс. 3 буквы, UPPERCASE) и цвет (color picker). Метка и цвет помогают визуально распознать, какой проект активен на данной странице.

Статистика кликов действий

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

Валидация CSS

Под редактором CSS отображается полоса со списком синтаксических проблем:

• Незакрытый комментарий /* ... */
• Незакрытые скобки (не хватает })
• Лишняя закрывающая скобка } (с номером строки)

Это простая синтаксическая валидация — она не проверяет корректность properties/values. CSS с ошибкой всё равно внедряется (браузер просто пропустит ошибочные правила).

Просмотр JS при импорте

В модале Импорт одного каталога, после загрузки файла, появляется список наборов с метрикой:

Содержимое файла (3 наборов):
  Auto-login              CSS: 0L • JS: 4L                    JS
  Ukryj banner cookie     CSS: 8L • JS: 0L
  Debug GTM               CSS: 0L • JS: 12L • 2 akcji (8L)    JS

Предупреждение с числом строк JS, если хоть какие-то присутствуют. Клик на кнопку JS показывает полный код для просмотра перед импортом.

Try/catch изоляция JS

Каждый набор JS выполняется отдельно, с собственным try/catch. Ошибка в одном наборе не блокирует выполнение других. Ошибки логируются в консоль с названием набора/действия и полным stack trace.

Storage quota

Индикатор использования памяти в меню Настройки сайдбара (например, 1.2 MB / 10 MB). Красный выше 80%.

Фильтр "Только активные"

Чекбокс над списком — скрывает наборы, отмеченные как независимые (○), и показывает только активные в каталоге (●). Помогает отсеять "ручные" наборы, когда у каталога их много. Реагирует мгновенно на изменения переключателей.

Обновление расширения

У расширения постоянный ключ в манифесте (в сборке для Firefox — постоянный gecko.id), что означает, что ID расширения неизменен между обновлениями — данные (каталоги, наборы, настройки) сохраняются. JustZix поставляется для четырёх браузеров: Chrome, Edge, Opera и Firefox.

Уведомление о новой версии

В меню Настройки (рядом с номером версии) появляется зелёный баннер «Доступна новая версия», когда сервер публикует пакет новее установленного. Баннер содержит ссылку для скачивания. Проверка тихая — при отсутствии сети баннер просто не показывается.

Процедура обновления (Chrome / Edge / Opera)

1. Скачайте новый ZIP с обновлением
2. Распакуйте с перезаписью той же папки, в которой была предыдущая версия
3. В chrome://extensions/ (Edge: edge://extensions/) найдите расширение и кликните иконку обновления на плитке
4. Расширение перезагрузится с новыми файлами, данные остаются

Firefox

Сборка для Firefox загружается через about:debugging → «Этот Firefox» → «Загрузить временное дополнение» (указывая на manifest.json в папке justzix_firefox/). Обновление = перезагрузка после перезаписи файлов.

Примеры CSS

/* Ukryj typowe reklamy */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"] {
  display: none !important;
}

/* Ukryj cookie banner */
.cookie-banner, #cookie-notice {
  display: none !important;
}

html {
  filter: invert(0.92) hue-rotate(180deg);
}
img, video, picture, iframe, [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Pokoloruj wszystkie elementy z data-testid */
[data-testid] {
  outline: 2px dashed #f59e0b !important;
  outline-offset: -2px;
}
[data-testid]::before {
  content: attr(data-testid);
  position: absolute;
  background: #f59e0b;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 9999;
}

/* Zwiększ czytelność tabel admina */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Sticky header tabeli */
table.admin-list thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* Naprzemienne wiersze */
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

/* Często strony mają sztywne max-width 1200px - wymuś szerokość */
.container, .main-content, main {
  max-width: 95% !important;
  width: 95% !important;
}

body::before {
  content: "ŚRODOWISKO DEV";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc2626;
  color: white;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  z-index: 999999;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body { padding-top: 28px !important; }

Примеры JavaScript

// Tylko dla dev! Nigdy nie zapisuj prawdziwych haseł
window.addEventListener('load', () => {
  const login = document.querySelector('input[name="login"]');
  const pass = document.querySelector('input[name="password"]');
  if (login) login.value = 'admin@dev.local';
  if (pass) pass.value = 'devpass123';
});

// Przechwyć dataLayer.push (GTM)
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]', 'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

// Przechwyć gtag
const origGtag = window.gtag;
if (origGtag) {
  window.gtag = function(...args) {
    console.log('%c[GA4]', 'color:#2563eb;font-weight:bold', args);
    return origGtag.apply(window, args);
  };
}

// Co 500ms przez 10s sprawdzaj i klikaj przyciski "Akceptuj"
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const buttons = [...document.querySelectorAll('button, a')];
  const target = buttons.find(b =>
    /akceptuj|zgoda|accept all/i.test(b.textContent || '')
  );
  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S - zapisz formularz
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }
  // Ctrl+Shift+E - przejdź do edycji (nieprzetestowany przykład)
  if (e.ctrlKey && e.shiftKey && e.key === 'E') {
    e.preventDefault();
    document.querySelector('a.edit-link')?.click();
  }
});

// Pomijaj denerwujące confirm i beforeunload na czas testów
window.confirm = () => true;
window.alert = (msg) => console.log('[stłumiony alert]', msg);
window.onbeforeunload = null;
window.addEventListener('beforeunload', e => {
  e.stopImmediatePropagation();
}, true);

// Pamiętaj - czysty CSS tego nie zrobi gdy rodzic ma display:none
window.addEventListener('load', () => {
  const target = document.querySelector('.important-info');
  const newParent = document.querySelector('.sidebar');
  if (target && newParent) {
    newParent.prepend(target);
  }
});

// Pokaż wszystkie ukryte input type="hidden"
document.querySelectorAll('input[type="hidden"]').forEach(input => {
  const wrapper = document.createElement('div');
  wrapper.style.cssText = 'background:#fef3c7;padding:4px;font-size:11px;font-family:monospace;border:1px dashed #f59e0b;';
  wrapper.innerHTML = `${input.name}: ${input.value}`;
  input.parentNode.insertBefore(wrapper, input);
});

Примеры кнопок действий

document.querySelectorAll('input, textarea, select').forEach(el => {
  if (el.type === 'hidden') return;
  if (el.type === 'checkbox' || el.type === 'radio') {
    el.checked = false;
  } else {
    el.value = '';
  }
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'Jan',
  lastName: 'Testowy',
  street: 'Testowa 1',
  city: 'Warszawa',
  zip: '00-001'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

// Dla typowego sklepu — kliknij pierwszy "dodaj do koszyka"
const btn = document.querySelector('.add-to-cart, [data-action="add-to-cart"]');
if (btn) btn.click();
else alert('Nie znaleziono przycisku dodaj do koszyka');

navigator.clipboard.writeText(location.href).then(() => {
  console.log('Skopiowano:', location.href);
});

// Wyciąga token JWT z localStorage / cookies dla debugowania
const token = localStorage.getItem('authToken')
  || document.cookie.match(/token=([^;]+)/)?.[1];
if (token) {
  navigator.clipboard.writeText(token);
  alert('Token skopiowany. Pierwsze znaki: ' + token.slice(0, 20) + '...');
} else {
  alert('Brak tokena');
}

// Przechwytuj wszystkie fetch i pokaż w konsoli
const origFetch = window.fetch;
window.fetch = async function(...args) {
  console.log('%c[FETCH]', 'color:#2563eb', args[0]);
  const res = await origFetch.apply(this, args);
  return res;
};
console.log('Włączono logowanie fetch. Każde wywołanie pojawi się w konsoli.');

const info = {
  url: location.href,
  userAgent: navigator.userAgent.split(' ').pop(),
  cookies: document.cookie.split(';').length,
  localStorage: Object.keys(localStorage).length,
  framework: window.React ? 'React' : window.Vue ? 'Vue' : window.jQuery ? 'jQuery' : 'unknown'
};
alert(JSON.stringify(info, null, 2));

Сценарии использования

1. Работа с несколькими клиентами / проектами

У каждого проекта свой каталог со своим шаблоном URL. Вы можете иметь каталоги:

• justzix.com — модификации продакшена
• justzix dev — для https://dev.justzix.com/* с красным баннером "DEV"
• клиент X — модификации на другом домене

В правой панели приватные каталоги можно быстро включать/выключать. Экспорт одного каталога позволяет поделиться конфигурацией с командой.

2. Окружение разработки с визуальной пометкой

На каждом dev/staging добавьте баннер и авто-логин. Один набор CSS (баннер) и один JS (авто-заполнение). Создаёте отдельный каталог для каждого окружения, всё включается простым чекбоксом.

3. Инструменты для product-менеджера / QA

Панель действий с кнопками: FILL (тестовые данные), CART (тестовая покупка), CLR (очистить форму), STATE (показать состояние приложения в alert). Без программиста, без консоли, один клик.

4. Модификации публичных страниц

Любимые блоги/документация с лучшей читаемостью — более широкий контейнер, шрифт, тёмный режим. Каждая страница в отдельном каталоге, "Активный" оставлен навсегда включённым.

5. Отладка аналитики / GTM

Один набор на каждый домен с JS, перехватывающим dataLayer.push и gtag. Включаете его, когда клиент сообщает о проблеме с аналитикой, без правки кода страницы.

6. Работа с административными панелями

Шаблон *://*.justzix.com/admin/* и CSS, улучшающий таблицы, списки, формы. Плюс действие "Тестовый фильтр", автоматически устанавливающее фильтры для типичного workflow.

7. Безопасные тесты на продакшене

Действие RO (read-only) внедряет CSS, который скрывает все кнопки "Удалить", "Сохранить", "Отправить" — временный "режим только для чтения", чтобы не ошибиться.

// Ukryj groźne przyciski
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('TRYB READ-ONLY włączony');

Частые проблемы и решения

JavaScript не выполнился

• Проверьте, совпадает ли страница с шаблоном — плавающая кнопка должна быть видна
• JS запускается один раз за жизнь страницы — изменили код? Перезагрузите страницу (F5)
• Проверьте консоль DevTools — ошибки JS логируются там как [JustZix] JS error
• Набор должен быть Включён — одного "Активный" недостаточно

CSS не работает

• Специфичность — у страницы свои стили; используйте !important или более специфичные селекторы
• Динамические классы — некоторые фреймворки генерируют классы вида .css-1abcd, которые меняются. Используйте атрибуты ([data-testid]) или стабильные селекторы
• Shadow DOM — некоторые элементы в Shadow DOM, и CSS извне не имеет к ним доступа. Нужен JS

Плавающая кнопка не появляется

• URL не совпадает ни с одним шаблоном
• Кнопка была ранее скрыта — в виджете попапа кликните Вернуть плавающую кнопку
• Страница заблокировала внедряемые скрипты (редко)

После обновления расширения потерял данные

У расширения постоянный ключ в манифесте — последующие обновления сохраняют данные. Если данные всё же исчезли:

• Регулярно экспортируйте настройки (Экспорт)
• Обновляйте с перезаписью той же папки — не меняйте путь
• В chrome://extensions/ используйте кнопку обновления, не удаляйте и не устанавливайте заново
• Если потеряете данные, импортируйте предыдущий экспорт — достаточно 1-2 кликов

Позиции кнопок/панелей сбрасываются

Это нормально — позиции хранятся на окно браузера в памяти сессии (chrome.storage.session). После закрытия окна позиции исчезают, в новом окне вы стартуете с дефолтных. Позиция переживает навигацию между вкладками в том же окне.

Частичный экспорт пропустил какие-то глобальные настройки

Да — частичный экспорт содержит только отмеченные каталоги и наборы плюс связанные с ними настройки видимости. Не содержит позиций плавающих панелей (они на окно) и других глобальных предпочтений. Для полного backup используйте режим "Всё".

Частичный импорт перезаписал ранее не существовавший каталог

Режим "Слить" сопоставляет каталоги по ID. Если импортируемый файл имел ID, конфликтующий с существующим каталогом (например, тот же файл уже однажды импортировался), появляется prompt: 1 перезаписать / 2 копия (по умолчанию, безопасно) / Отмена. Выбирая 2, вы получаете копии с новыми ID и припиской "(import)" в названии каталога — ничего не теряете.

Дерево каталогов не раскрывается

Стрелка раскрытия появляется только если у каталога есть наборы. Пустой каталог имеет приглушённую точку вместо стрелки. Состояние раскрытия каждого каталога запоминается в chrome.storage.local.

Не вижу кнопку Экспорт/Импорт каталога

Эти кнопки в панели каталога (вверху области редактирования), рядом с кнопкой "Удалить каталог". Не путать с кнопками в меню Настройки, которые касаются всех настроек.

AI Helper не отвечает

• Нет ключа API — в Настройках → AI Helper введите ключ хотя бы одного провайдера (OpenAI / Anthropic / Gemini).
• Неверный ключ — окно покажет ошибку, возвращённую провайдером; проверьте ключ и лимиты учётной записи у провайдера.
• Ключ не синхронизировался на другое устройство — синхронизация работает только для ключей с отмеченным чекбоксом «синхронизировать» и требует залогиненной учётной записи синхронизации JustZix.

Конфликт с Content Security Policy

JS правил и действий выполняется в контексте страницы по многоуровневой стратегии, устойчивой к строгим правилам Content Security Policy. Большинство страниц — включая крупные сервисы вроде Facebook — работают сразу, без какой-либо настройки.

Страницы с очень строгим CSP (некоторые банки, корпоративные сайты) могут блокировать выполнение. Чтобы JS работал на любой странице, включите для JustZix опцию «Разрешить пользовательские скрипты»: откройте chrome://extensions, перейдите к сведениям о JustZix и включите переключатель (в более старых браузерах также нужен режим разработчика). Когда страница блокирует выполнение, окно JavaScript / Консоль JS показывает соответствующее сообщение.

JustZix — инструкция