Решил немного попробовать себя в авторском контенте, а за одно и рассказать о своём видении расширений для браузера.
Многие из нас знакомы с расширениями(плагинами) для браузеров которыми они пользуются, в основном это блокировщики рекламы, вроде Адблока или Юблока. В наше время, как по мне блокировщик рекламы в браузере, это прям вещь необходимая, так как я лично на многие сайты просто зайти не могу без морального потрясения когда нет блокировщика. Серьёзно! Я понимаю что владелец сайта хочет заработать, но некоторый типа фандома, откровенно жадничают, количество рекламных блоков просто зашкаливает! Но суть не в этом.
Что такое вообще расширение для браузера? В примитиве это небольшой скрипт который производит некие манипуляции на странице сайта. В случае адблока, скрипт пробегает по странице сайта и скрывает все блоки которые в его "списке" помечены как рекламные.
Есть более сложные расширения такие как ВПН, которые взаимодействуют не просто со страницей, а уже с настройками браузера и т.д., но речь сегодня не о них.
Мне больше нравится сама идея того что есть возможность расширить или модифицировать свой браузер эдаким изящным апплетом.
Например когда на ютюбе скрыли дизлайки, некто написал расширение которое при загрузке страницы улавливает параметр количества дизлайков ил "потрохов" сайта и не смотря на то что администрация ютюба это дело скрыла, плагин сам генерирует кусочек html кода и через JavaScript вставляет его в нужное место!
В этом мне нравится сама идея избавления от каких то идей которые нам хочет так или иначе навязать администрация сайта! (Цифровая диктатура как сейчас модно говорить)
Самое простое что можно сделать через расширения это скорректировать дизайн того или иного сайта под себя (или сразу всех), создать какую то свою интересную тему. Например заменить общий фон тела страницы на какой то узор, и сделать цвет текста мягче.
Работа расширений как и их создание (и размещение) очень просты, всем управляет JavaScript, а какие то вещи вроде меню настроек которые открываются при нажатии на его иконку, это просто небольшая html страничка.
По сути расширение это такая папочка с файлами, которая в случае firefox запаковывается в zip, после чего расширение у файла с zip меняется xpi и расширение готово к установке в браузер. В случае с браузерами на движке Chromium (chrome,opera,eadge,yandex e.t.c.) ничего запаковывать и вовсе не нужно, в настройках можно выбрать установку расширения из папки.
Во первых файл manifest.json - это грубо говоря "паспорт" расширения, документ в котором написано, что это за расширение, кем создано, какая версия, какая у него иконка стоит, какие оно запрашивает разрешения у браузера (например возможность работать как раз с контентом страницы), указания того что за страничка будет открываться при нажатии на иконку, а так же указание какой скрипт нужно выполнять на сайтах при работе.
Далее естественно сама страничка index.html - которая показывается при нажатии на иконку, там обычно размещают какие то настройки, переключатели состояния. Это все легко верстается на html тэгах, а стили задаются в отдельному css файлике, ну или если лень то прям среди html тэгов.
Ну и раз есть настройки то нажатие на них нужно как то регистрировать? Здесь нам поможет файлик main.js - в котором мы пропишем логику того что будет происходить когда пользователь нажимает например на наши кнопочки в меню. Грубо говоря там будут инструкции в стиле "нажал на кнопку > происходит следующее"
И если мы пишем расширение которое работает с чем то на открытых нами сайтах то и скрипт background.js - в котором будут уже инструкции о том что будет расширение делать на открытых нами сайтах.
Так же тут находятся сопутствующие папочки вроде img или icons где у нас лежат какие то изображения и графика которую мы используем и иконка самого расширения.
по итогу у нас получается примерно такая вот структура:
Как это работает: человек кликает на иконку приложения в шапке окна браузера, ему показывается index.html в котором какие то настройки, при клике по настройкам файл main.js их обрабатывает, например сохраняет их значение в память браузера. А далее файл background.js который запускается на каждом открытом нами сайте, в начале получает из памяти браузера настройки которые натыкал пользователь, а затем на их основе проводит какие то манипуляции, например заменяет все изображения на странице на фото Николаса Кейджа, с той прической которая похожа на птицу.
Самое интересное для меня что в теории любой может на досуге попробовать в плане "поиграть", написать что то подобное для себя. В сети полно бесплатных мануалов и уроков, да и сейчас тот же chatGpt если задавать правильные вопросы может наглядно показывать подробные примеры кода и объяснять их работу.
Я постарался максимально простым языком описать работу расширений, без лишней терминологии что бы любой заинтересованный (надеюсь) смог примерно понять как это работает)
Надеюсь было интересно, за ошибки прошу прощения, я больше по части языков на котором говорят машины😁