Clicker

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) Некоторые сайты блокируют автоматизацию — техническое ограничение Сохраняйте сценарии — они хранятся локально в браузере Где искать помощь? В самом редакторе — при наведении на блоки показывается их назначение В логах выполнения — видно, что происходит на каждом шаге По почте: hith433422@gmail.com — для сложных вопросов