Clicker

Clicker - это инструмент для автоматизации действий на веб-страницах. Вы создаете "сценарии" (последовательности команд), которые расширение затем выполняет на странице вместо вас.

Проще говоря: вы показываете расширению "что делать" на странице, а оно повторяет эти действия автоматически.

Основные компоненты
1. Редактор сценариев (Popup)
🔸Открывается по клику на иконку расширения
🔸Визуальный конструктор с блоками-нодами
🔸Каждый блок = одно действие на странице

2. Исполнитель (Content Script)
🔸Работает прямо на веб-странице
🔸Выполняет созданные вами сценарии
🔸Взаимодействует с элементами страницы

3. Менеджер вкладок
🔸Позволяет выбрать, на какой вкладке выполнять сценарий
🔸Проверяет подключение к целевой странице

Как это работает: от идеи до выполнения
Шаг 1: Создание сценария
🔸Открываете редактор (клик по иконке расширения)

а)Выбираете тип действия из списка:
🔸Клик по элементу
🔸Ввод текста
🔸Проверка наличия текста
🔸Ожидание загрузки
и т.д.

б)Размещаете блок на рабочей области

в)Настраиваете блок:
🔸Указываете, какой элемент на странице
🔸Задаете параметры (текст для ввода, время ожидания и т.п.)

Шаг 2: Связывание блоков
🔸Соединяете блоки линиями для создания логической цепочки (2 нажатиями на узел подключения, а после на конечный узел)
🔸Например: "кликнуть кнопку" → "подождать 2 секунды" → "ввести текст"
🔸Условные блоки (проверки) создают ветвления: "если текст найден → идти по одной ветке, иначе → по другой"

Шаг 3: Выполнение
а)Выбираете вкладку в менеджере вкладок

б) Настраиваете параметры:
🔸Скорость выполнения (паузы между действиями)
🔸Количество повторений

в) Запускаете сценарий

г) Наблюдаете за выполнением в реальном времени

Формат сценариев (как это выглядит внутри)
Каждый сценарий — это список команд в формате:

XPath_элемента|Номер_действия|Дополнительные_данные

Пример:
/html/body/input[1]|2|Привет мир # Ввести "Привет мир" в первый input
/html/body/button[1]|1| # Кликнуть на первую кнопку
/html/body/div[1]|5|Текст для проверки # Проверить, содержит ли div текст
End|99 # Конец ветки (если проверка не прошла)
/html/body/div[2]|4|1 # Скопировать текст из второго div
Объяснение формата:
XPath — адрес элемента на странице (например, /html/body/div[3]/input[2])

Номер действия (флаг) — что сделать с элементом:

1 = клик/фокус
2 = ввести текст
3 = цикл по списку значений
4 = скопировать данные
5 = проверить текст
11 = проверить существование элемента
15 = добавить запись в лог
19 = задержка времени
20 = изменить текст элемента
и другие...

Данные — дополнительная информация (текст для ввода, значения для проверки и т.д.)

Логика выполнения на странице
Основной принцип:
Сценарий выполняется последовательно, команда за командой.

Особые случаи:
1. Условные переходы (флаги 5, 7, 11, 13, 21):

Элемент|5|Текст для проверки # Если элемент содержит этот текст
...действия при успехе...
End|99 # Иначе - перейти сюда
...действия при неудаче...
2. Циклы (флаг 3):

Элемент|3|значение1~значение2~значение3 # Для каждого значения
...действия внутри цикла...
3. Переходы (флаг 17):

||17|5 # Перейти к 5-й команде в сценарии
Визуальное представление в редакторе:
text
[Кнопка "Войти"] --клик--> [Поле "Логин"] --ввод текста-->
↓
[Проверка: если "Добро пожаловать"] --да--> [Действие успеха]
↓ (нет)
[Конец ветки] --переход--> [Действие при ошибке]

Что нужно знать:
XPath может сломаться — если структура страницы изменится

Страницы грузятся с разной скоростью — используйте ожидания (флаг 16, 18, 19)
Некоторые сайты блокируют автоматизацию — техническое ограничение
Сохраняйте сценарии — они хранятся локально в браузере

Где искать помощь?
В самом редакторе — при наведении на блоки показывается их назначение
В логах выполнения — видно, что происходит на каждом шаге
По почте: [email protected] — для сложных вопросов