Данный репозиторий содержит примеры кода для быстрого создания собственного браузерного расширения.
src/
├── views/
├──── popup/ — страница настройки всплывающего попапа
├────── assets/ — папка с ресурсами
├────── components/ — компоненты для всплывающего попапа
├──────── App/ — корневой компонент
├────────── App.css — стили для компонента
├────────── App.tsx — бизнес-логика
├────── index.html — точка входа в options
├────── index.css — общие для options
├────── main.tsx — подключение React-приложения
├──── options/ — страница настройки параметров расширения
├────── assets/ — папка с ресурсами
├────── components/ — компоненты для страницы настроек
├──────── App/ — корневой компонент
├────────── App.css — стили для компонента
├────────── App.tsx — бизнес-логика
├────── index.html — точка входа в options
├────── index.css — общие для options
├────── main.tsx — подключение React-приложения
├── public/ — статические файлы
└──── manifest.json — файл манифеста для настройки расширения
Отдельно в scripts/release.js лежит создание архива с запакованным расширением.
- Клонируйте репозиторий
- Выполните команды:
nvm use
npm install
npm run build- Откройте Google Chrome
- Перейдите на chrome://extensions/
- Нажмите на "Загрузить распакованное расширение"
- Укажите путь до папки
dist - Расширение добавит интерфейсы в панель рядом с адресной строкой, в параметры расширения и инструменты разработчика; вместе с этим над страницами появится счётчик ссылок, а страница https://www.google.com/#redirect-test будет автоматически перенаправлять на https://www.google.com/#redirect-success