Создавать надстройки, которые работают во всех популярных браузерах, теперь проще простого — всё благодаря стандарту WebExtension и привычным веб-технологиям. Один формат — и расширение будет совместимо почти с любым браузером, больше не нужно переписывать код для каждой платформы.
Посмотрите, как легко написать своё первое расширение, чтобы “прокачать” внешний вид и работу любых сайтов под себя!
Что такое WebExtensions?
WebExtensions — это расширения для браузеров, которые запускаются в современных браузерах и расширяют их возможности с помощью web API. Вы пишете их на знакомых HTML, CSS и JavaScript — а распространяются они как открытый код.
Расширения для браузеров существуют почти 30 лет, но раньше под каждый браузер приходилось делать отдельную версию: расширение для Chrome не работало в Firefox и наоборот. Сейчас, когда большинство браузеров перешли на Chromium и появился стандарт, эти сложности в прошлом. С 2021 года WebExtensions — это единые правила для всех: теперь достаточно один раз сделать расширение, чтобы оно заработало где угодно.
Дальше я покажу, как создать современное расширение, которое запускается в любом популярном браузере. Всё проще, чем кажется!
WebExtensions работают в разных браузерах, но для разработки рекомендую выбрать Firefox — тестировать расширения здесь удобнее всего. Для Safari потребуется платная учётная запись разработчика.
Как создать manifest-файл для расширения
Любое расширение начинается с manifest-файла — он описывает его основную структуру. Вот как он выглядит:
Manifest — это обычный JSON-файл. Редактировать его можно в любом удобном редакторе или прямо в онлайн-инструменте.
Достаточно указать три главных параметра: name, version и manifest_version. Название и версию пишите любые, но номер версии — только из 1–4 чисел через точки, например “0” или “0.0.1”, иначе Chrome не пропустит файл.
С версией manifest есть нюанс: если другие браузеры поддерживают 1 и 2 версию, то Chrome работает только с третьей (manifest_version: 3). Это уменьшает некоторые возможности, но если ориентируетесь на Chrome — сразу выбирайте версию 3.
Помимо обязательных параметров, добавьте полезные поля: author, description и icons пригодятся для публикации в магазине расширений. commands позволяют назначить горячие клавиши.
Один из самых крутых параметров — content_scripts: он позволяет сразу внедрять ваши CSS и JavaScript на страницы сайтов.
В каждом блоке content_scripts обязательны ключи matches (тут указываете адреса сайтов, где работает расширение) и js/css (подключаете нужные скрипты и стили).
Пишем код расширения
В самом простом примере я соберу свой аналог Tampermonkey — расширения для управления внешним видом сайтов. Например, Tampermonkey может скрыть надоедливую ленту “Лучшие” на Reddit.
Имея manifest и немного JavaScript, вы легко соберёте своего “монки”. Для примера я покажу настройку внешнего вида Википедии — но вы сможете изменить любой сайт на ваш вкус.
Для начала добавлю несколько строчек CSS. Мне мешает блок “требуются дополнительные источники” — для чтения он только отвлекает. Скрываю этот элемент по классу с помощью display: none:
Хотите убрать баннер с просьбой о пожертвованиях? Тоже можно скрыть аналогично:
Яркие сноски тоже раздражают — пусть будут незаметнее: меняю им цвет на полупрозрачный:
Цвет — как в оригинале, только на 50% прозрачнее. Теперь сноски больше не отвлекают от текста.
Пойду дальше: хочется одним нажатием скрывать/показывать элементы, а потом возвращать всё на место. Для этого понадобится чуть-чуть JavaScript!
Я написал короткую функцию: при нажатии нужной клавиши она находит элементы по селектору и скрывает или показывает их, меняя только свойство display — всё работает мгновенно, без перезагрузки страницы.
Установка и запуск расширения
Код готов — пора опробовать расширение в деле!
В Firefox откройте about:debugging, выберите “This Firefox”, нажмите “Load Temporary Add-on” и укажите любой файл расширения (manifest или скрипт).
В Chrome заходите на chrome://extensions/, включайте режим разработчика (правый верхний угол), потом жмите “Загрузить распакованное расширение” и выберите папку с файлами расширения.
Теперь расширение работает на всех страницах Википедии! До включения оно выглядело вот так:
После включения расширения — надоедливых объявлений больше нет, а сноски стали едва заметными:
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Премиум подписка — это доступ к эксклюзивным материалам, чтение канала без рекламы, возможность предлагать темы для статей и даже заказывать индивидуальные обзоры/исследования по своим запросам!
Подробнее о том, какие преимущества вы получите с премиум подпиской, можно узнать здесь
Также подписывайтесь на нас в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru
