環境変数

Plasmoは環境変数を第一級のサポート対象としています。これにより、同じコードベースから各ブラウザと開発環境のニーズに合わせて拡張機能をカスタマイズできます。

例

• with-env (opens in a new tab)

組み込み環境変数

Plasmoフレームワークは、次の組み込みクライアントサイド環境変数を提供します。

• NODE_ENV: ビルドコマンドに応じてdevelopmentまたはproductionのいずれかになります。
• PLASMO_TARGET: 指定されたターゲット（例: chrome-mv3）。 --target フラグで指定します。
• PLASMO_BROWSER: ターゲットブラウザの名前（例: chrome）。
• PLASMO_MANIFEST_VERSION: マニフェストのバージョン（例: mv3またはmv2）。
• PLASMO_TAG: ビルドタグ（例: dev、prod、または --tag フラグで指定されたカスタムタグ）。

カスタム環境変数

拡張機能からアクセスできる環境変数を追加するには、.envファイルを作成します。

PLASMO_PUBLIC_SHIP_NAME=ncc-1701
PLASMO_PUBLIC_SHIELD_FREQUENCY=42
 
PRIVATE_KEY=xxx # 拡張機能では定義されません

NODE_ENV固有の環境変数

devとbuildの間で環境変数を分離するには、次のファイルを使用できます。

• .env.development
• .env.production

.env.developmentにCRX_PUBLIC_KEY環境変数があり、.env.productionまたは.envにない場合、それはplasmo devでは利用可能ですが、plasmo buildでは利用できません。

バンドル固有の環境変数

Plasmoフレームワークは、最終的なバンドルを作成する際に、特定のビルドターゲットまたはビルドタグに固有の環境変数も提供します。次のビルドコマンドを例とします。

plasmo build --target=safari-mv3 --tag=alpha

次のenvファイルが優先順位に従って考慮されます。

• .env.safari
• .env.alpha
• .env

ローカル環境変数

Plasmoは、次の環境ファイル名もサポートします（Next.js開発者はこれらが馴染み深いでしょう）。

• .env.<browser>.local
• .env.<tag>.local
• .env.<NODE_ENV>.local
• .env.local

名前の最後に.localが付いたファイルは、ローカルではないファイルよりも優先順位が高くなります。たとえば、.env.localは.env.productionおよび.env.developmentよりも優先順位が高くなります。

ただし、同じ名前空間内では、カスケード順序は期待どおりです。この機能は、dotenvパッケージ (opens in a new tab)を使用して、環境変数に対してカスケード/上書き戦略を利用しています。

優先順位の高い環境変数

すべての環境ファイルよりも優先順位の高い環境ファイルを含めるには、--envフラグを使用します。このファイルの名前は何でもかまいません。

plasmo build --env=.env.important

環境変数の使用

環境変数は、同じコードベースから各ブラウザと開発環境のニーズに合わせて拡張機能をカスタマイズできる強力な機能です。

ソースコード内

ソースコードで環境変数を参照するには、完全パスprocess.env.<ENV_NAME>を使用します。例：

// TSXの場合（ポップアップ、オプションページ）：
const FrontHull = () => <h1>{process.env.PLASMO_PUBLIC_SHIP_NAME}</h1>
 
// TSの場合（コンテンツスクリプトまたはバックグラウンドスクリプト）：
const shield = new Shield(process.env.PLASMO_PUBLIC_SHIELD_FREQUENCY)
 
// PLASMO_PUBLIC_で始まらないため、undefinedになります。
console.log(process.env.PRIVATE_KEY)

.env変数の使用方法の詳細については、with-env (opens in a new tab)を参照してください。

リモートコードインポート時

リモートコードをインポートする場合は、公開環境変数を使用します。

import "https://www.plasmo.com/js?id=$PLASMO_PUBLIC_ITERO"

コンテンツスクリプト設定時

コンテンツスクリプト設定エクスポートでも環境変数を使用できます。

export const config: PlasmoCSConfig = {
  matches: ["$PLASMO_PUBLIC_SITE_URL/"]
}

マニフェスト上書き時

Plasmoでは、package.jsonファイルのmanifestプロパティを使用して、最終的に生成された拡張機能マニフェストを上書きできます。さらに一歩進んで、Plasmoはマニフェストの上書きで使用される環境変数も解析します。

"manifest": {
  "key": "$CRX_PUBLIC_KEY"
}

マニフェストの上書きでは、公開（PLASMO_PUBLICで始まる）および非公開の環境変数を使用できます。😎