Plasmo Framework

Фреймворк Plasmo это SDK для разработки кроссплатформерных расширений для браузера, созданное хакерами для хакеров. Разрабатывайте расширения и перестаньте беспокоится о конфигах и специфичных особенностях браузерных расширений.

Это как Next.js для браузерных расширений!

Главные особенности

Первоклассная поддержка React + Typescript
Декларативная настройка "manifest.json" (MV3)
Контент скрипты с поддержкой UI
Вкладки расширения
Активная перезагрузка + React HMR
.env* файлы
API для хранения информации
API для общения между различными частями расширения
Подключение удаленного кода (e.g., for Google Analytics)
Поддержка кроссплатфоменности и различных видов манифеста
Автоматическое развертывание с помощью BPP
Дополнительная поддержка Svelte и Vue

И многое, многое другое! 🚀

Системные требования

Node.js 16.x или выше
MacOS, Windows, или Linux
(Настоятельно рекомендуется) pnpm

Примеры

У нас есть примеры, показывающие, как можно использовать Plasmo с Firebase Authentication, Redux, Supabase authentication, Tailwind, и многое другое. Чтобы посмотреть, посетите наш репозиторий примеров.

Документация

Ознакомьтесь с documentation чтобы получить более глубокое представление о Plasmo Framework.

Книга расширений браузера

Для более подробного ознакомления с тем, как работают расширения браузера и как их разрабатывать, мы настоятельно рекомендуем новую книгу Мэтта Фрисби "Building Browser Extensions"

Использование

pnpm create plasmo example-dir
cd example-dir
pnpm dev

Дальнейший путь наполнен возможностями.

Изменение Popup в popup.tsx
Редактирование страницы настроек расширения в options.tsx
Настройка контент скриптов в content.ts
Изменение Background service worker в background.ts

Каталоги

Вы также можете структурировать эти файлы в собственных каталогах:

папка-расширения
├───assets
|   └───icon.png
├───popup
|   ├───index.tsx
|   └───button.tsx
├───options
|   ├───index.tsx
|   ├───utils.ts
|   └───input.tsx
├───contents
|   ├───site-one.ts
|   ├───site-two.ts
|   └───site-three.ts
...

Наконец, вы также можете избежать размещения исходного кода в вашем корневом каталоге, поместив их в подкаталог src, следуя этому руководству. Обратите внимание что assets и другие конфигурационные файлы по-прежнему должны находиться в корневом каталоге.

Поддерживаемые браузеры

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

Сообщество

Сообщество Plasmo можно найти в Discord. Это подходящий канал для получения помощи в использовании Plasmo Framework.

Внести свой вклад

Пожалуйста, ознакомьтесь с рекомендациями по контрибьютингу чтобы узнать больше.

Большое спасибо всем нашим удивительным помощникам ❤️

Не стесняйтесь присоединиться к веселью и отправить PR!