English | 简体中文 | Tiếng Việt | Deutsch | French | Indonesian | Русский | Turkish | 日本語 | 한국어
Production Cloud: 私たちはブラウザ拡張機能向けのクラウドサービス「Itero」を開始しました。即時のベータテストやより素晴らしい機能が必要なら、ぜひチェックしてください。
Plasmo Framework は、すべての開発者のためのブラウザ拡張機能のSDKです。拡張機能のconfigファイルやビルドにおける面倒な独自仕様に悩まされずに拡張機能を作りましょう!
ブラウザ拡張機能におけるNext.js
- React + Typescript の全面サポート
- 宣言型開発
- Contents Scripts UI
- Tab Pages
- ライブリロード + React HMR
.env*
ファイル- Storage API
- Messaging API
- リモートコードバンドル (Google Analyticsなど)
- 複数ブラウザ・マニフェスト対応
- BPPによる自動デプロイ
- Svelte、 Vue にも対応
他にもたくさんの機能があります! 🚀
- Node.js 16.x 以上
- MacOS, Windows, Linux のいずれか
- pnpm(推奨)
Firebase Authentication, Redux, Supabase authentication, Tailwind などと組み合わせた例をこちらのリポジトリで紹介しています。
さらに詳しく知りたい場合は、ドキュメントをご覧ください。
ブラウザ拡張機能の動作や開発方法についてさらに深く学びたい場合、Matt Frisbie氏の書籍『Building Browser Extensions』がおすすめです。
pnpm create plasmo example-dir
cd example-dir
pnpm dev
変更したい部分によって、以下のファイルを編集してください。
- ポップアップ →
popup.tsx
- 設定ページ →
options.tsx
- コンテンツスクリプト →
content.ts
- バックグランドサービスワーカー →
background.ts
これらのファイルはそれぞれのディレクトリに分けて整理することもできます。
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
...
また、ルートディレクトリに置きたくない場合は、src
ディレクトリを作成して、そこにソースコードを置くこともできます。詳しくはこちらのガイドをご覧ください。
ただし、assets
やconfigファイルはルートディレクトリに置く必要があります。
対応しているブラウザのリストは、こちらのドキュメントをご覧ください。
DiscordにPlasmoのコミュニティがあります。Plasmo Framework に関するヘルプはこちらでお願いします。
Code of Conductは、全てのPlasmoコミュニティに適用されます。
詳しくはコントリビュートガイドラインをご覧ください。
素晴らしいコントリビューターの方々に感謝します❤️
ぜひ気軽に参加してPRを送ってください!
Plasmoは現在α版のソフトウェアです。バージョンアップによって変更される可能性がありますので、ご注意いただき自己責任で使用してください。