Chrome — один из самых популярных браузеров на сегодняшний день. Интернет-магазин Chrome предлагает множество расширений, облегчающих просмотр. Если вы немного знакомы с JavaScript и основами HTML, тогда вы можете приступить к созданию собственного пользовательского расширения !!!

Итак, приступим!
В этом блоге мы создадим расширение для Chrome, чтобы получить список участников Google Meet одним щелчком мыши.

Шаг 1. Создание каталога

Создайте каталог для нашего расширения и назовите его как хотите, для этого я назову его «meet-attence».

Шаг 2. Создайте файл с именем manifest.json.

Здесь, в этом файле, объект browser_action имеет свойство «default_pop», которое будет файлом HTML, который будет всплывать при нажатии на наше расширение.

Затем массив content_scripts имеет объект, содержащий несколько свойств, таких как «matches» (для запуска скрипта по определенному URL-адресу), «js» (js-скрипт, который будет выполняться в фоновом режиме при сопоставлении массива «matches» URL-адресов) и «run_at» (управляет когда будет запущен массив файлов «js»)

В массиве «разрешения» нам потребуется только разрешение activeTab, потому что мы собираем данные с текущей вкладки.

Шаг 3. Создание всплывающего HTML-файла

Шаг 4: Скрипт данных очистки с именем main.js

В этом chrome.runtime.onMessage.addListener мы будем проверять событие из скрипта расширения, чтобы запустить скрипт и очистить список участников.
После очистки данных он отправит данные с chrome.runtime.sendMessage слушателю, прослушивающему событие в сценарии расширения.

Шаг 5: Создайте файл extension.js

В файле extension.js, который является кодом скрипта нашего расширения, он отправит сообщение с помощью chrome.tabs.sendMessage, единственная разница между предыдущим и этим методом заключается в том, что он отправит сообщение на текущую активную вкладку при нажатии кнопки «Посещаемость».

Здесь, наконец, chrome.runtime.onMessage.addListener мы получим данные из вкладки в скрипт расширения, и мы будем отображать их соответственно, манипулируя DOM нашего расширения.

Шаг 6: Добавляем наше пользовательское расширение в Chrome

Заключение

Кто не любит автоматизацию? Расширение Chrome предоставляет нам отличные полезные функции, облегчающие нашу работу. Таким образом, создание собственного расширения для автоматизации некоторых процессов, таких как учет посещаемости, сбор изображений с веб-сайта, расширения для шуток и многие другие забавные расширения, создает совершенно другой опыт просмотра. За этот блог я хотел бы поблагодарить Rusty Zone, у него есть очень хороший плейлист в расширении Chrome, обязательно посмотрите его.

Итак, хватит на сегодня,

Продолжайте улыбаться! Продолжайте кодировать! 😀