PlasmoHQ/plasmo

これは何？

主な機能

• 01ReactとTypeScriptをサポートし、SvelteとVueにもオプションで対応
• 02開発中のReact HMRによるライブリロード
• 03拡張機能の各部分間の通信に使えるストレージAPIとメッセージングAPI
• 04コンテンツスクリプトからホストページにUIを描画
• 051つのコードベースから複数のブラウザーとmanifestを対象にビルド
• 06Browser Platform Publisherによる自動デプロイ

ユースケース

• manifest設定を手作業で書かずに、ReactとTypeScriptでChromeまたはFirefoxの拡張機能を開発
• コンテンツスクリプトを使って、サードパーティーのWebサイトにReactベースのUIを注入
• 1つの拡張機能コードベースを複数のブラウザーやストア向けにリリース

クイックスタート

1. 1

   Node.js 16.x 以降がインストールされていることを確認してください

2. 2

   pnpm をインストールしてください（強く推奨）

3. 3

   テンプレートから新しいプロジェクトを作成してください

   pnpm create plasmo example-dir
4. 4

   プロジェクトディレクトリに移動して、開発サーバーを起動してください

   cd example-dir pnpm dev

使う前に知っておきたいこと

• !README には、Plasmo はアルファ版ソフトウェアであり、バージョン間で変更される可能性があると記載されています。
• !一部の機能は、任意で利用できる Itero のクラウドサービスなど、外部サービスに依存します。

トピック

よくある質問

plasmo とは？

Chrome、Firefox、Edge向けのmanifest設定、ビルド、ライブリロードを担う、ReactとTypeScript用のブラウザー拡張機能フレームワーク。 Plasmoは、Next.jsに着想を得たブラウザー拡張機能開発フレームワークです。拡張機能の開発で通常必要となる手作業の設定を大幅に減らし、開発者がポップアップページ、オプションページ、コンテンツスクリプト、バックグラウンドのサービスワーカーに集中できるようにします。

plasmo は無料で使えますか？ライセンスは？

plasmo は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

plasmo は今もメンテナンスされていますか？

活発にメンテナンス中。plasmo の最終コミットは 2026年10月21日 です。

plasmo は何に使えますか？

manifest設定を手作業で書かずに、ReactとTypeScriptでChromeまたはFirefoxの拡張機能を開発 コンテンツスクリプトを使って、サードパーティーのWebサイトにReactベースのUIを注入 1つの拡張機能コードベースを複数のブラウザーやストア向けにリリース

plasmo のインストール方法は？

Node.js 16.x 以降がインストールされていることを確認してください pnpm をインストールしてください（強く推奨） テンプレートから新しいプロジェクトを作成してください: pnpm create plasmo example-dir プロジェクトディレクトリに移動して、開発サーバーを起動してください: cd example-dir pnpm dev

plasmo はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/PlasmoHQ/plasmo