インポート解決

Plasmoフレームワークは、拡張機能開発向けに特化した独自のコード/アセットバンドラを提供します。生のバンドル/変換済みバンドルのインライン化、アセットのミラーリング、環境変数の注入などをサポートしています。

サポートされているファイルの種類

ソースコードモジュールにインポートできるファイルと、その変換方法は以下のとおりです。

ファイル拡張子	例
`.{css,pcss,sass,scss,less}`	`import "./style.css"`
	`import styleCss from "data-text:./style.css"`

`.svg`	`import iconSrc from "data-text:./icon.svg"`
	`import Icon from "react:./icon.svg"`

`.{png,jpg,jpeg,webp,gif,tiff,avif,heic,heif}`	`import imageUrl from "data-url:./image.png"`
	`import image64 from "data-base64:./image.png"`

`.{json,json5}`	`import stuff from "./stuff.json"`
	`import stuff from "data-env:./stuff.json"`

`.{graphql,gql}`	`import query from "~query.gql"`

パス

Plasmoは、相対インポート、node_moduleパッケージインポート、ESMエクスポートインポートなど、一般的なインポートパスを大部分サポートしています。また、チルダ(~)と絶対インポートによるプロジェクト相対パスも提供します。インポートパスをさらにカスタマイズするには、エイリアスインポートセクションをご覧ください。

チルダ (`~/`)

チルダインポートパスは、「ソースコードモジュールディレクトリ」への便利なショートカットです。Plasmoは、次の拡張子で終わるファイルのみを「ソースコードモジュール」と見なします。

export const relevantExtensionList = [
  ".ts",
  ".tsx",
  ".svelte",
  ".vue",
  ".json"
] as const

ソースコードモジュール以外で使用する場合、またはdata-base64、data-text、urlなどのアセットスキームと共に使用する場合、チルダ(~)は常にpackage.jsonが存在するプロジェクトのルートディレクトリに解決されます。したがって：

package.json内のマニフェストオーバーライドで使用される~rulesets/test.jsonは/rulesets/test.jsonに解決されます。
data-base64:~assets/image.pngは/assets/image.pngに解決されます。
url:~src/code.jsは/src/code.jsに解決されます。

チルダがスキームなしで単独で使用され、別のソースコードモジュールからソースコードモジュールをインポートするために使用されている場合、デフォルト設定を使用しているか srcディレクトリ設定を使用しているかによって、2つの動作があります。

デフォルト設定では、~はプロジェクトルートを指します。
srcディレクトリ設定では、~はsrcディレクトリを指します。したがって、~core/code-module.tsxは/src/core/code-module.tsxに解決されます。

絶対パス (`/`)

チルダとは異なり、絶対インポートパスは、srcディレクトリに関係なく、常にpackage.jsonが存在するプロジェクトルートに解決されます。完全な一貫性を優先する場合は、絶対インポートパスを使用してください。

相対パス (`./`, `../`)

現在のファイルに対する相対パスを使用してファイルをインポートするには、./プレフィックスを使用します。たとえば、既存のファイルと同じディレクトリからファイルをインポートするには、./file-nameを使用します。サブディレクトリからファイルをインポートするには、./subdirectory/file-nameを使用します。親ディレクトリからファイルをインポートするには、../file-nameを使用します。

スキーム

Plasmoは、開発者がアセットファイルを拡張機能バンドルにインポートするために使用できるいくつかの_インポートスキーム_を導入しています。スキームは<scheme>:<file path>パターンに従います。たとえば、data-base64:~/assets/image.pngは有効なインポートパスです。

raw

rawスキームは、Plasmoに以下の指示を与えます。

ルートレベルでファイルを拡張機能バンドルにコピーする
似た名前の他のファイルと区別するために、コンテンツハッシュを割り当てる

インポートされた変数は、ランタイム時のファイルへの絶対URLになります。

import imageUrl from "raw:~/assets/image.png"
 
console.log(imageUrl) // chrome-extension://<extension-id>/image.<hashA>.png

raw-env

raw-envスキームはrawスキームに似ていますが、環境変数が追加されています。たとえば、次のようなコンテンツを持つファイル~/assets/config.jsonがあるとします。

{
  "url": "$PLASMO_PUBLIC_URL"
}

そして、PLASMO_PUBLIC_URLという環境変数をhttps://www.plasmo.comという値で宣言した場合、結果として生成されるファイルは次のようになります。

{
  "url": "https://www.plasmo.com"
}

👀

raw-envは、主にテキストベースのアセットに役立ちます。

url

urlスキームは、Plasmoに以下の指示を与えます。

ブラウザでの使用のためにファイルを変換/バンドル/最適化する（html/js/css/画像）
結果と依存関係をルートレベルで拡張機能バンドルにコピーする
似た名前の他のファイルと区別するために、コンテンツハッシュを割り当てる
（コンテンツスクリプトのみ）web_accessible_resourcesエントリにファイルを追加する

インポートされた変数は、ランタイム時のファイルへの絶対URLになります。

import styleAUrl from "url:~/a/style.scss"
import styleBUrl from "url:~/b/style.scss"
import codeUrl from "url:~/c/index.ts"
 
console.log(styleAUrl) // chrome-extension://<extension-id>/style.<hashA>.css
console.log(styleBUrl) // chrome-extension://<extension-id>/style.<hashB>.css
console.log(codeUrl) // chrome-extension://<extension-id>/file.<hashB>.js

😮

urlを画像アセットで使用すると、サイズとブラウザの読み込みが最適化されます。

data-text

data-textスキームは、Plasmoに以下の指示を与えます。

ファイルのコンテンツを読み取る
ブラウザでの使用のためにファイルを変換/バンドル/最適化する（html/js/css/画像）
コンテンツを単一のバンドルとして文字列にインライン化する

import styleText from "data-text:~/assets/style.scss"
 
console.log(styleText)
// {
//   "color": "red",
// }

data-text-env

data-textスキームは、Plasmoに以下の指示を与えます。

ファイルのコンテンツを読み取る
公開環境変数を注入する
ブラウザでの使用のためにファイルを変換/バンドル/最適化する（html/js/css/画像）
コンテンツをstringとしてインライン化する

.env

PLASMO_PUBLIC_URL=https://itero.plasmo.com

code.json

{
  "url": "$PLASMO_PUBLIC_URL"
}

content.tsx

import codeText from "data-text-env:~/assets/code.json"
 
console.log(codeText) // JSONとして使用するには、JSON.parse(codeText)を使用します。
// "{
//   "url": "https://itero.plasmo.com",
// }"

data-base64

data-base64スキームは、Plasmoに以下の指示を与えます。

ファイルのコンテンツを読み取る
ブラウザでの使用のためにファイルを変換/バンドル/最適化する（html/js/css/画像）
結果をbase64文字列に変換し、コードにインライン化する

import iconBase64 from "data-base64:~/assets/icon.png"
 
console.log(iconBase64) // data:image/png;base64,etc...

data-env

data-envスキームは、Plasmoに以下の指示を与えます。

ファイルのコンテンツを読み取る
公開環境変数を注入する
ブラウザでの使用のためにファイルを変換/バンドル/最適化する（html/js/css/画像）
適切なランタイムアセットの結果を返す

import data from "data-env:~/assets/data.json"
 
// DataはJSONオブジェクトになります。JSON.parseは不要です！
console.log(data) // { url: "https://itero.plasmo.com" }

react:*.svg

reactスキームは、SVGアセットをReactコンポーネントに変換します（SVGRとSVGOを使用）。

import Logo from "react:~/assets/logo.svg"
 
const Hello = () => <Logo />

Environment Variables Assets