it-blog.club
Свой JS код в панели браузера на примере игры Cookie Clicker

Свой JS код в панели браузера на примере игры Cookie Clicker


Не так давно один мой знакомый, который со мной соревнуется в игру Cookie Clicker спросил, а можно ли сделать автоматический клик по заветной печеньке.

На самом деле вопрос был неплохой, так как это реально. Если учитывать, что мы кликаем по div элементу на странице и у нас просто отрабатывает событие клик, то мы его можем прописать при помощи JS, используя панель разработчика браузера.

Для этого заходим на нужный сайт и открываем панель нажав f12, ну или кликнув по любому элементу правой клавишей мыши и выбрав в списке "Посмотреть код элемента"

Разумеется вы можете использовать свои скрипты на любых сайтах. Я же, просто в рамках примера, буду работать на сайте браузерной игры CookieClicker.

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

Я, находясь во вкладке с игрой, кликнул правой клавишей мыши по элементу печеньке и выбрал "Посмотреть код элемента"

1.png

Снизу у меня разумеется открылась панель разработчика, где я и узнал ID нужного мне элемента

2.png

Зная ID элемента, всё что мне осталось сделать, так это в консоли прописать скрипт, который бы вызывал клик, по элементу с известным мне ID.

Для этого, переходим в console в панели браузера и, зная JS, можем прописать:


$('#bigCookie').click();

После нажатия на энтер, мой скрипт исполнился и по элементу был произведён клик. Нажимая стрелку вверх на клавиатуре, у нас из истории консоли выберется уже ранее введённая команда и мы можем снова нажать на энтер, произведя ещё один клик по печеньке.

3.png

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

Давайте для начала разберёмся в том, как же нам можно решить поставленную задачу. А решить её можно следующим образом.

Мы пишем свою функцию, в теле которой мы находим нужный нам элемент и производим по нему клик и следующим шагом вызываем эту функцию снова по таймеру, например 1 секунда.


function func () {
document.getElementById('bigCookie').click();
setTimeout(func,1000);//По истечению 1 секунды, всё повторяем
}

Но если вы пропишите в консоль только это и нажмёте на энтер, то ничего не произойдёт, так как данную функцию у нас ничего не вызывает. По этому давайте вызовем её, по истечению 1 доли секунды, просто добавив ещё один таймер после тела функции.


function func () {
document.getElementById('bigCookie').click();
setTimeout(func,1000);//По истечению 1 секунды, всё повторяем
}
setTimeout(func,1);//По истечению 1 доли секунды запускаем функцию

Кстати хотелось бы так же сообщить, что не все сайты может использовать jQuery библиотеки, ну или те на которых вы привыкли работать, по этой причине советую писать на чистом JS который гарантированно отработает.

Так же сразу сообщу, что написанный скрипт будет отрабатывать не зависимо от того, активно ли у вас окно браузера или нет, на этой ли вкладке вы находитесь или нет. Например после исполнения моего кода, каждую секунду будет производиться клик по заветной печеньке, при этом я смело могу вывести вкладку с игрой в отдельное окно и свернуть его. Так самым не нарушив исполнение скрипта.

В случае, если скрипт нужно остановить, то достаточно просто обновить страницу.

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


alert(123);

И потом нажать на энтер. У вас должно будет появиться нативное окно оповещения в котором будет написано 123. При нажатии на окей можете закрыть окно.

Собственно на этом всё. Рекомендую посмотреть видео размещённое сверху страницы, где я доступно объясняю и показываю этот же самый пример.


it-blog.club 764
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать