https://github.com/daniilium/extension-test
https://github.com/daniilium/extension-test
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/daniilium/extension-test
- Owner: daniilium
- Created: 2025-01-24T12:40:51.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-25T18:14:58.000Z (4 months ago)
- Last Synced: 2025-01-25T18:26:11.851Z (4 months ago)
- Language: TypeScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# extension-test
Расширение написано с использованием [WXT](https://wxt.dev/)
Для тестирования расширения можно воспользоваться готовой сборкой, для этого скачайте `wxt-react-starter-0.1.0-chrome.zip` и подключите к браузеру.
### Как запустить проект:
1. Установите зависимости с помощью команды:
```bash
npm i
```
или
```bash
pnpm i
```
из корня проекта.
2. Выберите режим запуска:
- **Режим разработки:** выполните команду
```bash
npm run dev
```
или
```bash
pnpm run dev
```
Это автоматически откроет Google Chrome с подключённым расширением.
- **Сборка билда:** выполните команду
```bash
npm run build
```
или
```bash
pnpm run build
```
После сборки подключите расширение вручную в браузере через меню управления расширениями.
---
# Фитчи
- [x] получение листа доменов раз в 4 часа
- [x] показывать окно на сайтах из листа с сообщением
- [x] показывать не больше трёх раз за сессию браузера
- [x] если окно закрыли, то больше не показывать
- [x] popup окно. список сайтов из листа и количество переходов пользователя на них
- [x] в гугл и яндекс поисковой выдаче отметить иконкой сайт из списка
# Лирика
Приступая к тестовому заданию, решил найти способы сделать разработку более удобной и наткнулся на WXT — инструмент, используемый в том числе в Facebook. WXT предоставляет встроенный hot-reloader и множество обёрток поверх Vite, что одновременно облегчает работу и добавляет сложности из-за множества возможностей и собственных API. Перед реализацией я подготовил проект, изучив документацию WXT, а также подключив Tailwind CSS и Shadcn.
Ровно за день выполнил задание, как и планировал. Однако в процессе осознал, что разработка расширений для браузеров — это сложная инженерная задача. Множество ограничений API и размытые зоны ответственности между различными компонентами расширения заставляют заново переосмыслить подход к организации взаимодействий. Попытался приземлить FSD (Feature-Sliced Design), но получилось не так, как хотелось. Это был необычный опыт, который потребовал выйти за рамки привычных решений.
Если бы было больше времени, я бы углубился в изучение документаций и исследование лучших практик, чтобы избежать создания "велосипедов". Особенно заинтересовала возможность использования tRPC для взаимодействия с background.js, которая открывает облегчение в разработке расширений.
# Тестовое задание
Одна из распространенных задач, выполняемая расширениями к браузерам является обработка текущей страницы пользователя и инъекция информационного контента в содержимое страницы.
Задача: разработать расширение на manifest v3 для Chrome браузера.
Требования:
1. Расширение загружает список сайтов по адресу [https://config-tool.ru/ext.json](https://config-tool.ru/ext.json)
2. Список сайтов обновляется расширением 1 раз в 4 часа, но не чаще, чем 1 раз в 4 часа
3. При посещении пользователем страницы из списка сайтов (поле «domain») – показывать сообщение в виде html блока в любом виде на загруженной странице (поле «text»)
4. Пользователь должен иметь возможность закрыть сообщение
5. Если пользователь закрыл сообщение - при следующей загрузке сайта сообщение не должно быть показано никогда
6. Если пользователь не закрыл сообщение - при следующей загрузке сайта сообщение должно быть показано вновь, но не более 3-х раз за сессию браузера
7. Расширение должно иметь popup окно открываемое нажатием на иконку
8. В popup-окне отобразить список загруженных сайтов с возможностью перехода по сайтам, там же нужно вывести кол-во переходов на сайт, которые были с момента установки пользователем расширения
9. На сайтах google.[com|ru], ya.ru в поисковой выдаче отметить иконкой расширения сайты из загруженного списка. Никаких дополнительных действий по нажатию на эту иконку не требуется.
10. Стили CSS реализовать с помощью LESS или SASS
11. Результирующий JS-код должен быть минифицирован
12. Для сборки расширения использовать webpack или другой сборщик
13. Опубликовать проект на git и инструкцию по сборке
Разрешается использовать любые JavaScript библиотеки и фреймворки
Предоставить работающее расширение в формате zip