Сегодня будем программировать "курицу которая приносит золотые яйца". Расширение браузера - это web-приложение, которое устанавливается в web-браузер, чтобы расширить его возможности.
Например популярное среди авторов Дзен расширение ПРОДЗЕН, встраивает в уже загруженную с сервера WEB страницу информацию, которой в исходном варианте страницы нет.
Включается оно в разделе chrome://extensions/
И без него страница выглядит вот так:
Механизм мощный. В качестве эксперимента я решил использовать данный механизм, чтобы понажимать кнопки на чужом сайте.
Есть такой ресурс https://tasks.yandex.ru/
На нем можно выполнять простые задания (не все из них кстати простые) и типа за их выполнение вам будет начислена маленькая денежка.
Почему типа? Заданий на платформе мало, платят за них тоже не густо и рассматривать платформу Яндекс.Задания, как серьезный источник даже ДОПОЛНИТЕЛЬНОГО дохода я бы не стал от слова совсем. Электричество, которое кушает компьютер пока вы их выполняете данный ресурс отобьет - но не более. Набор бесплатных головоломок за решение которых чуть-чуть платят, ну и возможность поупражняться в программировании за деньги ;-)
Как пользователь работает на ресурсе:
Вручную нужно с определенным интервалом жамкать кнопку обновить:
Если в пуле выбранных заданий появится задание доступное для выполнения, на WEB странице появится кнопка с подписью "Приступить"
При нажатии на кнопку возможны 2 сценария:
- На неё кто-то уже нажал раньше Вас и задание больше не доступно (в таком случае необходимо снова обновить страницу)
- Если нажать успели, в этой же вкладке открывается новая страница, на которой, это задание и должно выполняться.
Как заставить программу брать в работу доступные задания?
Первое действие выполняет пользователь, открывает браузер и переходит по адресу https://tasks.yandex.ru/
Алгоритм работы программы которую я придумал выглядит несколько странно:
Но, это связано с тем, что расширение можно настроить таким образом, что его код будет выполняться только на определенном сайте или даже отдельной web страничке. Это упрощает задачу, так как если мы ушли со страницы выдачи заданий (нашли доступное задание в пуле) ни один из остальных операторов выполняться не будет.
Написано все на таймерах. Их в JavaScript два. Один из них может выполнять команду через определенный промежуток времени, а второй через определенный промежуток времени, но только один раз. Используется как раз 2-й вариант. Код:
"Овнокод" несущий золотые яйца - готов, осталось заставить выполняться его на определенной странице.
Пишем расширения для Chrom в Microsoft VSCode
Расширение для браузера состоит из нескольких специальным образом организованных файлов. Их можно написать и в блокноте, но я буду использовать Microsoft Visual Studio Code.
Файлов и папок будет много, поэтому создаем в VS Code отдельное рабочее пространство для будущего проекта:
В проводнике программы цепляем заранее созданную на диске папку под будущий проект расширения, и сохраняем рабочую область в этой же папке.
Рабочая область VS Code, это удобный инструмент для работы с проектом состоящим из множества файлов и папок. Внутри создаем папку в которой будут храниться файлы расширения.
Иконки своими руками без регистрации и СМС
Вообще, если вы не собираетесь распространять свои расширения через магазин хрома, иконки можно и не делать - оно будет работать и без них, но сделаем красиво.
Дизайнер из меня примерно такой-же как и программист, поэтому я их буду рисовать в MS Visio (цвет был утащен у Яндекса инструментом "онлайн-пипетка")
Чертежик Visio 4 раза экспортируем в формат .PNG
Размеры иконок 16*16 / 32*32 / 48*48 / 128*128
Как заставить расширение что-то делать?
В Интернет полно инструкций по созданию расширений, но лучшая как ни странно оказалась на сайте самого гугла в разделе: https://developer.chrome.com/docs/extensions/get-started?hl=ru
Здесь я не буду заниматься перепечаткой информации из этого раздела, а покажу настройки ключевого файла manifest.json под конкретную задачу описываемую в этой статье:
Пояснения здесь требуют только строки 15 и 17.
- строка 15 указывает из какого файла брать исполняемый код;
- строка 17 указывает на какой конкретно странице его выполнять;
Окончательная структура файлов и папок для расширения браузера будет выглядеть следующим образом:
Файл manifest.json должен лежать в корневом каталоге "YaTasksChrome".
Как интегрировать расширение в браузер Google Chrome
Переходим в раздел "Управления расширениями"
Переводим переключатель в режим разработчика и скармливаем браузеру нашу папку с файлами
Можно пользоваться: (если со страницей потребуется поработать в обычном режиме - его всегда можно отключить).
Если теперь перейти на страницу "Яндекс.Задания", то расширение будет обновлять её с интервалом 5 секунд, пока не найдет доступное задание, после чего будет выполнен автоматический переход на страницу задания.
Эта страница уже находится под другим уникальным URL, и на ней код расширения выполнятся больше не будет.
От необходимости клацать кнопку обновить избавились, осталось избавиться от необходимости обязательно находится за компьютером и наблюдать за работой расширения. Для этого воспользуемся например ESP32.
Управление ESP32 из расширения для браузера
Тут все просто (но есть нюанс) - если нашли задание, отправляем GET запрос ESP32 подключенной к домашней сети, который зажжет на ней встроенный светодиод.
Поскольку VS Code дружит с Arduino IDE версии младше 2.0 код буду писать в ней-же.
Для этого создаем папку и в ней же файл с расширением .ino Данный код будет принимать GET запросы вида:
- http://192.168.0.19/update?output=2&state=0 (выключить светодиод)
- http://192.168.0.19/update?output=2&state=1 (включить светодиод)
где:
- output= номер порта ввода/вывода
- state= лог 1 или лог 0
Программа разбирает приходящую строку на на номер порта и его состояние и управляет портом ввода/вывода. После прошивки и подключения к домашней сети Wi-Fi необходимо посмотреть какой IP адрес поймает плата.
В код расширения необходимо добавить несколько строк, одна из которых будет гасить светодиод при загрузке страницы:
и зажигать если обнаружено новое задание:
но, не все так просто.
Страница которой управляет скрипт, работает по протоколу https:// и при попытке отправить запрос по протоколу http:// браузер сообщит об ошибке, и расширение работать не будет:
Mixed Content: The page at 'https://tasks.yandex.ru/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.0.19/update?output=2&state=0'. This request has been blocked; the content must be served over HTTPS.
Поэтому переходим в "Настойки сайта", и меняем переключатель:
Небезопасный контент на "Разрешить"
Предупреждение при этом останется, но сообщение будет отсылаться внутри домашней сети Wi-Fi.
Подробнее про борьбу с этой ошибкой можно прочитать тут:
Осталось красиво оформить самоделку, и подключить её через зарядку для мобилы в розетку.
Синие свечение светодиода подскажет Вам, что появилась работенка, сидеть за компом теперь не обязательно, а само задание можно выполнить с мобильного приложения лежа на диване.
Управлять ESP-шками по http совсем не сложно, используя гибкий механизм расширений для браузера можно прикрутить уведомления к любым даже не своим сайтам и отправлять их в какие-нибудь самодельные часы.
Код примеров тут:
Оглавление канала тут:
Всем удачи!
