Интерактивное обучение проведёт вас через первый набор правил
Новый пользователь расширения теперь получает больше, чем вводный абзац в руководстве — интерактивное обучение, которое по очереди подсвечивает элементы интерфейса и шаг за шагом проводит вас через создание первого проекта. Оно работает и в панели редактирования, и прямо на странице, которую вы посещаете, на восьми языках, с копируемыми фрагментами кода. Вот что мы выпустили в v3.1.
Два движка, одна цель
Под капотом — два взаимодействующих модуля. Первый — lib/onboarding.js — запускается в панели редактирования JustZix, проводит вас по дереву каталог → группа → набор правил и объясняет компоновку вкладок CSS / JS / Действия. Второй — lib/onboarding-front.js — живёт в контент-скрипте, поэтому может подсвечивать элементы прямо на обычной веб-странице. Вместе они покрывают всю историю: от идеи до работающего правила.
Мы выбрали визуальный вариант Glow — светящееся кольцо вокруг цели, без затемнения страницы. В этом и состоит отличие от типового слоя-«прожектора»: вы по-прежнему видите всю страницу и свой собственный контент; подсветка лишь указывает, на чём должно сосредоточиться внимание.
19 шагов: «Ваш первый проект»
Сценарий по умолчанию проводит вас через полноценный пример: создание каталога (папки для связанных правил), открытие группы «default», добавление набора правил с простыми CSS и JS (которые действительно меняют страницу), подключение панели действий и добавление действия-переключателя с собственным JS-кодом. На каждом шаге есть подсвеченная цель и пузырёк с заголовком, кратким описанием и навигацией «Назад / Далее». Интерактивные шаги (например, «нажмите кнопку Добавить набор правил») продвигаются дальше только после выполнения действия — вслепую их не пропустить.
У фрагментов CSS и JS, которые появляются в пузырьках, есть кнопка Копировать — вставляйте их прямо в редактор, без перепечатывания. Когда вы дойдёте до конца сценария, в вашем дереве будет полноценный, рабочий набор правил, который потом можно расширять.
Лаунчер обучения
Обучение открывается автоматически при первом запуске расширения — в виде лаунчера (центра обучения), из которого вы выбираете сценарий. Позже до него можно добраться из меню настроек (Настройки → «Обучение»). В этом же центре будут появляться будущие сценарии по мере их добавления — когда выйдет новый, пользователь увидит его в том же месте, без поисков.
Восемь языков, без эмодзи, клавиша Esc
Весь движок и сценарий переведены на восемь языков (PL, EN, DE, ES, FR, IT, RU, ZH) — полный текстовый каталог лежит в lib/i18n.js под ключами onboard.*. Иконки берутся только из набора JustZix (JZ_ICONS): иконка-мишень для сценария, стрелка внутри пузырька, иконка «Копировать». Никаких эмодзи, никаких сторонних шрифтов — интерфейс остаётся единообразным с остальным расширением.
Клавиша Esc закрывает пузырёк обучения и лаунчер. Клик за пределами пузырька или по кнопке закрытия тоже завершает работу. Прогресс сохраняется в chrome.storage.local (jzOnboarding.frontCompleted) — если вы остановитесь посередине, обучение не будет всплывать снова при каждом перезапуске.
Что дальше
Первый сценарий — лишь начало. Лаунчер готов к большему — мы планируем пути для продвинутых возможностей: AI Helper, окна TEMP, действия slider / toggle3 и панель редактирования в отдельном окне по Ctrl+Alt+I. Напишите нам через контактную форму, какую тему вы хотите увидеть следующим обучением.
Смотрите также
- Внедрение CSS и JavaScript — чем на самом деле являются правила, которые вы создаёте в обучении
- Окна на странице — описанные окна разработчика
- JustZix против Tampermonkey — почему миграция может оказаться оправданной
Установите JustZix — ваш первый проект займёт меньше 15 минут.
Оцени эту статью
Оценок пока нет — оцени первым.