Plasmo Framework
Plasmo (opens in a new tab) Frameworkは、ハッカーによってハッカーのために作られた、多機能なブラウザ拡張機能SDKです。設定ファイルやブラウザ拡張機能開発特有の奇妙な点について心配することなく、製品を開発できます。
Next.js (opens in a new tab) for browser extensions! と言えるでしょう！
主な機能
- ファーストクラスのReact (opens in a new tab) + Typescript (opens in a new tab)サポート
- 宣言型開発 (opens in a new tab)
- コンテンツスクリプトUI (opens in a new tab) (Content Scripts UI)
- タブページ (opens in a new tab) (Tab Pages)
- ライブリロード + React HMR
.env*ファイル (opens in a new tab)- ストレージAPI (opens in a new tab) (Storage API)
- メッセージングAPI (opens in a new tab) (Messaging API)
- リモートコードバンドリング (opens in a new tab) (Remote code bundling) (例：Google Analytics用)
- 複数のブラウザとマニフェストペアへの対応 (Targeting multiple browser and manifest pairs (opens in a new tab))
- BPPによる自動デプロイ (opens in a new tab) (Automated deployment via BPP)
- Svelte (opens in a new tab)とVue (opens in a new tab)のオプションサポート、そしてその他多くのツール (opens in a new tab)
その他多数！ 🚀
システム要件
- Node.js 16.14.x以降
- macOS、Windows、またはLinux
- （強く推奨）pnpm (opens in a new tab)
はじめに
pnpm create plasmo
# OR
yarn create plasmo
# OR
npm create plasmo
このコマンドは、最もシンプルなPlasmoブラウザ拡張機能プロジェクトをセットアップします。構造はシンプルです。
| ファイル名 | 説明 |
|---|---|
popup.tsx | このファイルはデフォルトのReactコンポーネントをエクスポートし、ポップアップページにレンダリングされます。拡張機能のポップアップを操作するために必要なのはこれだけです！ |
assets | Plasmoは自動的に小さなアイコンを生成し、"icon.png"ファイルからマニフェストに適用します |
package.json | 通常のNode.jsプロジェクト記述子で、Plasmoを自分のニーズに合わせてカスタマイズするためのオプションの "manifest" プロパティがあります |
.prettierrc.cjs | コードスタイルの一貫性のため |
.gitignore | Git ignoreファイル |
.github | 自動デプロイのためのGitHub Actionsワークフロー |
README.md | 基本的なドキュメント |
tsconfig.json | TypeScript設定 |
注意: デフォルトでは、すべてのコードはプロジェクトのルートに存在します。ソースコードを配置する場所にsrcディレクトリを使用するには、このガイドに従ってください。
開発サーバー
ライブリロードとHMRには、以下のコマンドで開発サーバーを起動します。
pnpm dev上記のコマンドは、ファイルの変更を監視し、build/chrome-mv3-devに拡張機能のバンドルを再生成し、ブラウザで拡張機能を自動的に再読み込みします。
本番ビルド
本番ビルドには、以下のコマンドを実行します。
pnpm buildこれにより、build/chrome-mv3-prodに拡張機能の本番バージョンが作成されます。
Chromeへの拡張機能の読み込み
将来的には自動化を予定していますが、現時点では、Chromeに拡張機能を読み込むために必要な手順は以下のとおりです。
chrome://extensionsにアクセスし、「デベロッパーモード」を有効にします。
「パッケージ化されていない拡張機能を読み込む」をクリックし、拡張機能のbuild/chrome-mv3-dev（またはbuild/chrome-mv3-prod）ディレクトリに移動します。
ポップアップを表示するには、Chromeツールバーのパズルピースアイコンをクリックし、拡張機能をクリックします。
プロチップ: ピンボタンをクリックして、拡張機能をChromeツールバーにピン留めして簡単にアクセスできるようにします。
manifest.jsonファイルはどこにありますか？
Plasmoはmanifestファイルを抽象化します。このフレームワークは、Next.js (opens in a new tab)がファイルシステムとページコンポーネントを使用してページルーティングとSSGを抽象化するのと同様に、ソースファイルとコードからエクスポートする設定に基づいて、内部でmanifestを生成します。
さらに、自動パーミッションとニーズベースのパーミッションスキームで抽象化を進め、手動でパーミッションを指定する必要をなくします！（近日公開）
次のステップ
拡張機能ページセクションにアクセスして、Plasmo拡張機能のさまざまなUI要素の詳細とインスピレーションを得てください。各ワークフローには、フレームワークのシンプルさを示すモジュラーな例が付属しています。GitHubリポジトリ (opens in a new tab)で例をご覧ください。
Plasmoをニーズに合わせて適応させる方法については、カスタマイズセクションをご覧ください。
Plasmoを他のツール（TailwindCSSやFirebaseなど）と統合する方法については、クイックスタートセクションの例の一覧をご覧ください。
コミュニティ
Discord (opens in a new tab)でPlasmoコミュニティを見つけてください。行き詰まって助けが必要な場合や、Plasmoやブラウザ拡張機能についてもっとチャットしたい場合は、ここが最適な場所です！
Plasmo Frameworkのバグを見つけた場合は、バグレポートフォームを使用して報告してください。
行動規範 (opens in a new tab)は、すべてのPlasmoコミュニティチャネルに適用されます。