Я покажу, как с помощью JavaScript я создал расширение Chrome, которое отслеживает сообщения в чатах WhatsApp и отвечает на них предоставленными мной ответами. Звучит неправдой? Ну вы не одиноки, я сам так думал, пока не построил. Давай начнем!
Если вас интересует только конечный продукт и у вас нет времени просматривать эту статью, вы можете просто прокрутить вниз до раздела Заключение, к которому у меня есть общий доступ. к исходному коду. В нем есть инструкции по установке вручную.
Предпосылки
Чтобы эффективно следовать этой статье, вам потребуются базовые знания HTML, CSS и JavaScript.
Структура файла
whatsapp-group-bot/ ├── src │ ├── css │ │ └── index.css │ ├── js │ │ ├── background.js │ │ ├── inject.js │ │ └── index.js │ └── img | └── icon.png ├── index.html └── manifest.json
Создание интерфейса
Как человек, которому небезразличен дизайн (смеется), я не хотел просто вытеснять дизайн с низкими стандартами. Как видно из файловой структуры выше, мы должны создать два файла: index.html, index.css. Чтобы сэкономить время, я не буду объяснять содержимое этих файлов, поскольку это выходит за рамки данной статьи.
index.html
<!doctype html> <html> <head> <title>Whatsapp Monitor</title> <link rel="stylesheet" href="src/css/index.css"> </head> <body> <span id="author">Created With Love by <a href="https://chibuikenwa.com">Chibuike </a></span> <div class="container"> <h1>Whatsapp Monitor</h1> <section> <select placeholder="Group name" id="group_name" required disabled> <option value="">Loading...</option> </select> <textarea placeholder="Values seperated by comma" id="values" required></textarea> <br/> <textarea placeholder="Your preferred response(s) seperated by comma" id="response" required></textarea> </section> <section> <div id="validation"></div> </section> <section> <button id="kill">Kill All</button> <button id="status">Activate</button> </section> </div> <script type="text/javascript" src="src/js/index.js"></script> </body> </html>
index.css
Из-за его большого размера я бы дал только ссылку на него.
Link For CSS code: https://github.com/chyke007/whatsapp-spam-chrome-extension/blob/master/assets/css/popup.css
Теперь наше расширение должно выглядеть так:
Создание функциональности
Веселая часть начинается!
Добавление файла manifest.json
Чтобы зарегистрировать содержимое нашего проекта как расширение chrome, нам понадобится manifest.json файл.
Чтобы лучше понять, как работает файл манифеста и как его использовать, посетите их официальную документацию.
{
"name": "WhatsApp Monitor",
"version": "1.0",
"manifest_version": 2,
"author": "Nwachukwu Chibuike",
"description": "Monitors chat messages for specific keywords and returns desired response.",
"icons":{
"128":"/src/img/icon.png"
},
"background": {
"scripts": ["src/js/background.js"],
"persistent": false
},
"browser_action": {
"default_title": "WhatsApp Monitor",
"default_popup": "index.html"
},
"permissions": [
"activeTab",
"storage"
]
}
Стремясь сделать эту статью максимально сжатой, я не буду объяснять некоторые концепции, используемые в этом файле манифеста.
Ознакомьтесь с этими полезными руководствами для понимания
Фоновые скрипты: https://developer.chrome.com/extensions/background_pages
Разрешения: https://developer.chrome.com/extensions/declare_permissions
Действие браузера: https://developer.chrome.com/extensions/browserAction
Настройка фонового скрипта
Затем мы открываем background.js и добавляем событие onMessage. Это позволяет расширению получать сообщения, которые позже будут созданы при вызове thesendMessagemethod.
Также обратите внимание, что мы используем Content Script (https://developer.chrome.com/extensions/content_scripts). Это позволит нам внедрить дополнительный скрипт, который будет работать в контексте данной веб-страницы. В нашем случае WhatsApp Web внесите изменения и передайте информацию обратно нашему родительскому расширению.
Кроме того, мы устанавливаем дополнительную проверку, чтобы разрешить выполнение сценария inject.js только при вызове isActivated.
chrome.runtime.onMessage.addListener((message, sender)=> {
if(!message.isActivated) return;
else{chrome.tabs.executeScript({
file: 'src/js/inject.js'
}); }
});
Настройка скрипта index.js
Это код, который будет взаимодействовать с нашей страницей просмотра расширения. Любой написанный здесь код будет работать в контексте нашей страницы index.html.
Мы должны записать нашу логику в этот файл и включить ее в index.html. Это связано с тем, что политика безопасности содержимого не разрешает выполнение встроенных сценариев js.
Я знаю, что этот файл выглядит довольно много, но вы увидите, что он не такой уж сложный, если немного пояснить. Чтобы облегчить объяснение, я буду объяснять по разделам.
Первый раздел занимает строки 1–6. Мы в первую очередь очищаем наше хранилище, чтобы иметь чистый лист каждый раз, когда мы запускаем расширение. В строках 2–5 мы сохраняем ссылку на элементы HTML из нашего index.html, чтобы использовать их позже в этом файле. В строке 6 мы представляем нашу служебную функцию, которая помогает нам моделировать асинхронные запросы.
Второй раздел занимает строки 8–27. Поскольку мы не можем получить доступ к веб-контексту WhatsApp из этого файла, а только с помощью файла inject.js, нам нужен способ получить все в сети WhatsApp с помощью inject.js и каким-то образом передать его в этот файл. Мы достигаем этого, сначала (Строка 8–10), который отправляет сообщение и действует как триггер. У нас есть слушатель в файле inject.js, который его прослушивает, получает список чатов и сохраняет его, используя хром-хранилище. . Строка 12–27, затем получает это значение из хранилища и заполняет параметры выбора в index.html.
Третий раздел занимает строки 30–49. Это вспомогательные функции, которые мы используем позже в коде для обновления значений button и значений textarea.
Четвертый раздел занимает строки 85–89. Эта часть кода запускается, когда мы нажимаем кнопку «Активировать». Он выполняет некоторую проверку, после чего сохраняет значения с помощью API хранилища Chrome и вызывает метод runtime.sendMessage, чтобы можно было запустить файл inject.js.
Последний раздел занимает строки 51–83. Эта часть кода используется для уничтожения всех запущенных трекеров. Он делает это, убивая временной интервал, текущий в расширении.
Вот и все для этого файла. Затем мы исследуем файл inject.js.
Настройка скрипта inject.js
Любой написанный здесь код будет взаимодействовать с WhatsApp Web.
Этот файл состоит из функций. Сначала мы запускаем функции startTimer и chat, которые запускают функцию ввода и функцию чата соответственно.
Функция чата обрабатывает получение всего чата из сети WhatsApp и передает его обратно в файл index.js, который мы видели ранее.
Функция внедрения вызывается, когда мы нажимаем кнопку Активировать и кнопку Убить всех в представлении расширения (индекс .js файл).
Если кнопка Убить всех была тем, что запускало эту функцию, она просто уничтожает все интервалы выполнения и завершается на строке 48, тем самым останавливая все текущие работающие трекеры.
Если кнопка Активировать была тем, что активировало эту функцию, она входит в выбранный чат (строка 56), получает требуемые значения и ответы из Chrome-хранилища, а затем запускает monitorChatsфункцию каждые 200 миллисекунды. Эта функция следит за тем, чтобы текущие сообщения падали в выбранном чате для любых новых. Как только он обнаруживает, что новое сообщение было добавлено, оно затем сравнивает значение сообщения с тем, которое было предоставлено в нашей форме (где мы ввели значения, на которые нужно обратить внимание) (строка 86).
Как только он находит совпадение, он перебирает все желаемые ответы (строка 92), которые были преобразованы из строк в массив путем разделения. Строка 93–97 затем имитирует ввод каждого ответа в окно чата, имитирует нажатие на кнопку отправки (используя события мыши, вызывая функцию eventFire), которая затем отправляет фактический ответ (ответы).
Вот и все, мы успешно создали трекер WhatsApp, который не только отслеживает чаты, но и сравнивает его с нашими заданными ключевыми словами и беспрепятственно отвечает желаемым ответом. Большой!
Подведение итогов
Я пошел дальше, чтобы добавить больше функций в проект, полный проект с дополнительными функциями, такими как множественное отслеживание, уничтожение одного трекера и просмотр всех трекеров, можно найти здесь. В нем также есть инструкции по установке вручную.
Особая благодарность Акаш Павара за вдохновение для написанной им статьи.
Взрыв!
Больше контента на plainenglish.io
