Clicker

About

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] — для сложных вопросов