plasmo README

The project's README from github.com/PlasmoHQ/plasmo. As one markdown file: README.md.

plasmo logo

See License NPM Install Follow PlasmoHQ on Twitter Watch our Live DEMO every Friday Join our Discord for support and chat about our projects

English | 简体中文 | Tiếng Việt | Deutsch | French | Indonesian | Русский | Turkish | 日本語 | 한국어

Production Cloud: We've built a cloud offering for browser extensions called Itero. Check it out if you want instant beta testing and more awesome features.

Plasmo Framework

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers. Build your product and stop worrying about config files and the odd peculiarities of building browser extensions.

It's like Next.js for browser extensions!

CLI Demo

Highlighted Features

And many, many more! 🚀

System Requirements

Examples

We have examples showcasing how one can use Plasmo with Firebase Authentication, Redux, Supabase authentication, Tailwind, and many more. To check them out, visit our examples repository.

Documentation

Check out the documentation to get a more in-depth view into the Plasmo Framework.

Browser Extensions Book

For a more in-depth view into how browser extensions work, and how to develop them, we highly recommend Matt Frisbie's new book "Building Browser Extensions"

Usage

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

The road ahead is filled with many turns.

Directories

You can also organize these files in their own directories:

ext-dir
├───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
...

Finally, you can also avoid putting source code in your root directory by putting them in a src sub-directory, following this guide. Note that assets and other config files will still need to be in the root directory.

Supported Browsers

To see a list of supported browser targets, please refer to our documentation here.

Community

The Plasmo community can be found on Discord. This is the appropriate channel to get help with using the Plasmo Framework.

Our Code of Conduct applies to all Plasmo community channels.

Contributing

Please see the contributing guidelines to learn more.

A big thanks to all of our amazing contributors ❤️

Feel free to join the fun and send a PR!

Plasmo Framework

Plasmo Examples

Plasmo Storage

Browser Platform Publisher

Disclaimer

Plasmo is currently alpha software, and some things might change from version to version, so please be mindful and use it at your own risk.

License

MIT ⭐ Plasmo

plasmo (PlasmoHQ/plasmo)

Searching Database…

13.2K ·GitHub
Что это такое?Plasmo — это фреймворк для браузерных расширений, который берёт на себя сборку, генерацию manifest и инструменты разработки, чтобы вы могли заниматься самой логикой расширения, а не конфигурационными файлами.
Это сборщик или полноценный фреймворк?Это полноценный SDK/фреймворк, а не просто сборщик. Его описывают как аналог Next.js, но для браузерных расширений, с соглашениями для страниц, скриптов и конфигурации.
Как организовать код расширения в Plasmo?Plasmo использует соглашения об именовании файлов: код попапа кладётся в popup.tsx, страница настроек — в options.tsx, контент-скрипт — в content.ts, а фоновый service worker — в background.ts. Эти файлы также можно разложить по отдельным папкам или поместить в подкаталог src.
Что нужно установить перед использованием Plasmo?Нужен Node.js версии 16.x или новее на macOS, Windows или Linux. Также настоятельно рекомендуется использовать pnpm в качестве менеджера пакетов.
Достаточно ли Plasmo стабилен для расширений в продакшене?В проекте сказано, что это программное обеспечение альфа-версии, то есть поведение может меняться между версиями, поэтому в продакшене использовать его стоит с осторожностью.
Нужно ли знать React и TypeScript, чтобы использовать его?Plasmo изначально построен на полноценной поддержке React и TypeScript, поэтому знание обоих ожидается. При этом Svelte и Vue также поддерживаются, но опционально.
Какие браузеры можно поддерживать одним проектом Plasmo?Plasmo позволяет собирать расширения сразу для нескольких браузеров и версий manifest из одной кодовой базы. Полный список поддерживаемых платформ приведён в документации.
Можно ли использовать Svelte или Vue вместо React?Да, Plasmo опционально поддерживает Svelte и Vue в дополнение к стандартной связке React и TypeScript.
Поддерживается ли live reload во время разработки?Да, Plasmo включает живую перезагрузку с React HMR, так что изменения сразу появляются во время разработки.
Как автоматически публиковать расширение?Plasmo интегрируется с BPP (Browser Platform Publisher), что позволяет автоматизировать публикацию расширения в магазинах браузеров.
Что такое Itero?Itero — это собственный облачный сервис Plasmo для браузерных расширений. Он даёт мгновенное бета-тестирование и другие дополнительные возможности помимо открытого фреймворка.
Creator
PlasmoHQ
Size
6.2 MB
Stars
13.2K
Age
4y
Commits · 90 Days