Framework
Assets

アセット

拡張機能バンドルには、画像、フォント、バイナリ WASM バンドル、その他のファイルなどのアセットを含めることができます。Plasmo は、これらのアセットを操作するためのいくつかの方法を提供します。

インライン画像

拡張機能内で画像をロードする最も簡単な方法は、data-base64 スキームを使用することです。これにより、画像は base64 エンコードされたデータとして、拡張機能のビルドされたバンドルにインラインされます。

import someCoolImage from "data-base64:~assets/some-cool-image.png"
 
...
 
<img src={someCoolImage} alt="Some pretty cool image" />
📦

~ インポート解決に関するこの 注記 を参照してください。

Web アクセス可能なリソース

Plasmo は、マニフェストのオーバーライドで宣言された Web アクセス可能なリソースを自動的にコピーします。たとえば、package.json に次の設定を指定することで：

  "manifest": {
    "web_accessible_resources": [
      {
        "resources": [
          "~raw.js",
          "assets/pic*.png",
          "resources/test.json"
        ],
        "matches": [
          "https://www.plasmo.com/*"
        ]
      }
    ],
    "host_permissions": [
      "https://*/*"
    ]
  }

以下のファイルは拡張機能バンドルにコピーされ、chrome.getURL() (opens in a new tab) から利用可能になります。

  • プロジェクトのルート（package.json がある場所）にある raw.js
  • プロジェクトルートからの glob assets/pic*.png に一致する任意のファイル
  • プロジェクトルートからの resources/test.json

with-web-accessible-resources (opens in a new tab) を参照してください

ランタイム時のアセットの読み込み

ランタイム時にアセット（例：wasm）を動的に読み込むパッケージを使用し、ローカルアセットライブラリへのパスが必要な場合は、~assets を使用してアセットフォルダを公開する必要があることに注意してください。例：

    "web_accessible_resources": [
      {
        "resources": [
          "~assets/wasm/*/**",
        ],
      }
    ],

JS/TSコードでは、絶対パス / を使用してフォルダを参照する必要があります。

wasmPackage.localWASMPath("/assets/wasm/")

node_modules からのアセット

場合によっては、ノードパッケージが、Web アクセス可能なリソースとしてバンドルに含める必要がある静的アセットファイルを公開します。そのためには、package.json のマニフェストのオーバーライドの web_accessible_resources フィールドにそれらのアセットを指定します。

  "manifest": {
    "web_accessible_resources": [
      {
        "resources": [
          "@inboxsdk/core/pageWorld.js",
          "@inboxsdk/core/background.js"
        ],
        "matches": [
          "https://mail.google.com/*"
        ]
      }
    ]
  }

with-inbox-sdk (opens in a new tab) を参照してください

Import ResolutionIcon