開発サーバーの起動

プロジェクトの設定が完了したら、プロジェクトディレクトリに移動して以下のコマンドを実行し、拡張機能の開発を開始します。

pnpm dev
# または
npm run dev
# または
plasmo dev

Plasmo は拡張機能の開発用バンドルとライブリロード対応の開発サーバーを作成し、ファイルの変更時に拡張機能バンドルを自動的に更新し、ソースコードの変更時にブラウザをリロードします。また、拡張機能名に DEV | をプレフィックスとして追加し、アイコンをグレースケールにすることで、開発用と本番環境の拡張機能バンドルを区別します。

拡張機能の読み込み

将来的には自動化を予定していますが、現時点ではChromeに拡張機能を読み込むには以下の手順が必要です。

chrome://extensions にアクセスし、「デベロッパーモード」を有効にします。

「パッケージ化されていない拡張機能を読み込む」をクリックし、拡張機能の build/chrome-mv3-dev (または build/chrome-mv3-prod) ディレクトリに移動します。

ポップアップを表示するには、Chrome ツールバーのジグソーパズルアイコンをクリックし、拡張機能をクリックします。

プロチップ: ピンボタンをクリックして、Chrome ツールバーに拡張機能をピン留めし、簡単にアクセスできるようにします。

特定のターゲットを指定して

Plasmo を使用してビルドする際は、Chrome や Firefox の拡張機能ではなく、Plasmo 拡張機能をビルドします。つまり、わずかな調整で、サポートされているすべてのブラウザで動作する単一の拡張機能をビルドできます。--target フラグを使用して、特定のブラウザとマニフェストバージョン用の拡張機能を Plasmo にビルドさせることができます。

plasmo dev --target=firefox-mv2

最終的なバンドルは build/firefox-mv2-dev ディレクトリで使用できます。

正式にサポートされているターゲットのリストについては、このリンク を参照してください。

ソースマップなしで

デフォルトでは、Plasmo は開発中に拡張機能のソースマップを生成します。これを無効にする必要がある場合は、--no-source-maps フラグを使用できます。

plasmo dev --no-source-maps

これは、ソースマップと互換性のない依存関係がある場合に役立ちます。

特定のホスト名とポートを使用して

開発サーバーは、デフォルトで localhost とポート 1012 にバインドされます。--serve-host と --serve-port を使用してこれらを変更できます。

plasmo dev --serve-host=localhost --serve-port=1012

同様に、ホットモジュールリロードの Websocket は、デフォルトで localhost とポート 1815 にバインドされ、ビルドレポーターは HMR ソケット + 1（デフォルトでは 1816）にバインドされます。--hmr-host と --hmr-port を使用してこれらを変更できます。

plasmo dev --hmr-host=localhost --hmr-port=1815