Production Cloud: 私たちはブラウザ拡張機能向けのクラウドサービス「Itero」を開始しました。即時のベータテストやより素晴らしい機能が必要なら、ぜひチェックしてください。

Plasmo Framework

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を送ってください！