Привет, в данной статье опишу как написать простое расширение для браузера на стеке react + ts + vite. Подробного разбора не будет, опишу, на мой взгляд, ключевые моменты на которые стоит обратить внимание, и проанализировав, можно пробовать писать свою логику для вашего расширения браузера.
Код приложения можно смотреть в GitHub репозитории - BrowserExtention
В будет реализован функционал запроса данных, показ полученных данных, отрисовки/удалении на странице активной вкладки, + бонусом, смена темы на странице.
Конфиги.
Первое что нужно настроить, как и всегда, это конфигурационные файлы.
Каждое расширение должно иметь файл manifest.json в корневом каталоге, в котором перечислена важная информация о структуре и поведении этого расширения. На этой странице объясняется структура полей и их значений.
В manifest указываются файлы скриптов и разметки которые он должен подтянуть. А так же иконки приложения в разных форматах, описание и название приложения. Помимо этого, в манифесте много дополнительных настроек, вот пара из них которые я настроил у себя:
- permissions - поле указывает, какие права или доступы необходимо получить расширению для его работы. Это может включать доступ к определённым сайтам, возможность отправлять уведомления, читать данные из вкладок и другие функции.
Например, если расширение должно изменять содержимое страниц, ему потребуется разрешение на доступ к этим страницам. Это помогает пользователю понимать, что именно будет делать расширение и какие данные оно может использовать. - host_pemissions - указывает, к каким сайтам расширение будет иметь доступ. Это позволяет расширению взаимодействовать с содержимым этих сайтов, например, считывать информацию или вносить изменения.
Если в этом поле указаны конкретные URL или домены, то расширение сможет работать только с ними. Это помогает обеспечить безопасность и информировать пользователей о том, на какие сайты расширение может влиять.
Код для manifest.json.
manifest.json помещается в папку public, если в vite.config не указан другой каталог для публичных файлов ( по умолчанию public ).
Так же в public нужно поместить картинки иконок которые указаны в manifest в поле icons.
Сконфигурируем vite.config.ts для сборщика vite, который и будет собирать бандл, помещая и связывая все необходимые файлы, которые требуются для расширения.
Зависимости для приложения установлены следующие:
Запуск приложения.
установка через npm install
npm start - запустить дев режим
npm run watch - запустить вотч режим ( пересборка при изменениях )
npm run build - собрать приложение
Для управления состоянием приложения использовал свой разработанный npm пакет react-context-tk, основанный на react-context, но с аналогичным функционалом как в redux tool kit. Настройки стора выглядят следующим образом:
Подключение стора:
app.tsx
Работа приложения
Для взаимодействия расширения со страницей активной вкладки нужно повесить слушателя в src/scripts/service-worker/background.ts. Это связующий скрипт между app.tsx и content.ts.
Слушатель в background.ts сработает при вызове функции sendMessage в app.tsx.
Такие функции как sendMessage выносят отдельно, у меня это в src/utils/helpers.ts:
- getActiveTab — Получает активную вкладку браузера. Использует API chrome.tabs.query для поиска активной вкладки. Если возникает ошибка, она обрабатывается, и результат возвращается через Promise.
- sendMessage — Отправляет сообщение через chrome.runtime.sendMessage и возвращает ответ. Если сообщение не удалось отправить или получить ответ, функция выбрасывает ошибку.
- sendMessageToContent — Отправляет сообщение в контент-скрипт для определённой вкладки. Если id вкладки не передан, функция пытается получить активную вкладку. При отсутствии активной вкладки или ошибке отправки сообщения функция возвращает ошибку.
- isTMessage — Проверяет, является ли объект типом TMessage на основе наличия поля action типа string. Это помогает безопасно работать с данными, которые могут быть не того типа, которого ожидает функция.
Простая схема взаимодействия компонента реакт с content-script через background:
В background.ts и content.ts можно увидеть как по типу экшена выполняются действия и возвращаются данные через передаваемый в параметрах слушателя метод sendResponse.
Применение:
- Content Script работает в контексте веб-страницы и взаимодействует с её DOM.
- Background Script может работать в фоновом режиме, обрабатывать сообщения от разных вкладок или событий и обеспечивать выполнение долгоживущих задач.
Реакт компоненты описывать не буду, их можно посмотреть в src/components, они простые.
Чтобы потыкать приложение, посмотреть и по изучать, или использовать как заготовку, можете склонировать репозиторий - https://github.com/G28XYZ/browser-extention
Для сборки используйте скрипт npm run build, появится build это и будет каталог расширения, который нужно выбрать при загрузке в расширения браузера.
Для запуска приложения используйте гайд от сюда - developer.chrome.com.
Подписывайтесь на канал, пишите комментарии ;)
Мой канал в телеграме - БлогНот