Это пятая часть небольшой серии статей о расширениях браузера — нажмите здесь, чтобы перейти к четвертой части.

Если вам интересна эта тема, вы, скорее всего, знаете, что такое расширение для браузера — по крайней мере, вы им пользовались. Тот, с которого я начал, я думаю, был Wappalyzer. Это ссылка на интернет-магазин Chrome, но все поставщики браузеров предлагают возможность расширить свой продукт с помощью пользовательских расширений. Они предлагают API (который как бы стандартизирован для разных поставщиков), который дает вам доступ ко многим внутренним функциям вашего браузера. Просто назову некоторые вещи, с которыми вы можете играть:

  • Закладки
  • Вкладки
  • Контекстные меню
  • Все виды событий (например, «открыта новая страница»)
  • Управление расширениями
  • средства разработки
  • и многие другие…

Для Chrome посмотрите здесь; для Firefox загляните на эту страницу.

Как правило, расширения браузера предлагают некоторую (меньшую) функциональность, связанную с подмножеством вышеупомянутого API. Они могут быть полезны не всем, поэтому они не являются частью стандартных дистрибутивов браузера. И может быть много идей, например, как более аккуратно обрабатывать вкладки или закладки. Со своей стороны, я не слишком доволен тем, как браузер обрабатывает закладки (и вкладки, если хотите) (как вы можете прочитать здесь, если хотите), и поэтому я начал Tabsets.

В любом случае, речь идет об анатомии расширений браузера: какова минимальная настройка, необходимая для запуска расширения, и какие существуют разновидности? Для начала вам не нужна специальная структура, но вы можете подумать о том, какой язык вы хотите использовать. Я буду использовать typescript (о том, почему вы можете прочитать здесь), но и javascript, конечно, тоже подойдет.

Минимальная настройка проекта

Манифест.json

Вам обязательно понадобится один файл, и он должен называться «manifest.json». Он должен находиться в корневом каталоге расширения и предоставлять всю информацию, необходимую вашему браузеру для понимания вашего нового расширения.

Конечно, это не даст ничего ценного, так как не предоставляет никакой логики для выполнения. Для этого вам понадобится

Сотрудник службы

Этот файл (обычно javascript) обрабатывает и прослушивает события браузера. У него есть доступ к API браузера, и минимальный пример может выглядеть так:

Нам нужно немного изменить файл манифеста, чтобы браузер знал о нашем сервис-воркере:

Если вы используете Chrome, вы можете проверить это, открыв chrome://extensions/, отметив переключатель «Режим разработчика» и нажав «Загрузить распакованное». Выберите папку с расширениями в средстве выбора файлов и нажмите «ОК». Ваше новое расширение должно появиться на странице. Чтобы на самом деле использовать его, вам нужно найти значок управления расширениями» (вверху справа), который выглядит примерно так:

Вы можете закрепить свое расширение (для более легкого доступа) или щелкнуть его, и вы должны увидеть открытие страницы (без содержимого, поскольку мы еще не определили страницу popup.html).

С Firefox, на момент написания этой статьи, к сожалению, дела обстоят немного иначе. Возможно, вы заметили, что «версия манифеста» имеет значение 3. Это еще не полностью поддерживается в Firefox, и даже этот небольшой пример нуждается в некоторых изменениях (как решить эту проблему, будет темой следующего поста):

Это манифест, который вы можете использовать для Firefox; вы можете легко заметить пару небольших отличий. Manifest V3 уже должен поддерживаться, но как-то не очень.

К сожалению, вам также необходимо изменить код сервис-воркера:

Теперь это должно работать: откройте about:debugging#/runtime/this-firefox, нажмите «Загрузить временное дополнение» и перейдите к файлу manifest.json (на этот раз не к самой папке расширения). Затем откройте диалоговое окно управления расширением и нажмите на свое расширение.

Последний тип файлов, который я хочу здесь обсудить (который не нужен для минимального расширения), это

Сценарии контента

service worker, о котором мы говорили в предыдущем абзаце, определяет ваше расширение и запускается всякий раз, когда ваше расширение активно. Сценарии контента, с другой стороны, запускаются в контексте других веб-страниц, открытых в данный момент вашим браузером. Они могут читать и изменять DOM страниц, в которые они внедряются, что создает большой потенциал для ваших идей для вашего расширения. При желании вы можете создать красную рамку на всех изображениях всех вкладок… или вместо этого сделать что-нибудь полезное.

И последнее, на что следует обратить внимание, поскольку сценарии контекста не имеют полного доступа к API: они могут взаимодействовать с сервис-воркером с помощью сообщений. Таким образом, ваш сервис-воркер всегда будет знать, что происходит на любой вкладке (и наоборот).

Заключение

Первые шаги в создании расширения для браузера не слишком сложны. Но они могли бы быть еще проще, если бы API-интерфейсы поставщиков были лучше согласованы и если бы была надлежащая поддержка манифеста версии 3.

Хорошая новость заключается в том, что, приложив немного усилий, вы можете написать код, который работает (более или менее) одинаково в разных браузерах (также Brave, даже Edge и Safari… Opera мне нужно проверить, пожалуйста, оставьте комментарий, если у вас есть идеи). Я расскажу вам о своем подходе в другом посте (для любопытных: в настоящее время я поддерживаю манифест версии 2 и версии 3 в разных ветках git).

Дальнейшие посты из этой серии

I: Начало
II: Выбор языка
III: Выбор фреймворка
IV: Настройка проекта