Assets

Extension bundles can include assets such as images, fonts, binary WASM bundles, and other files. Plasmo provides several methods to work with these assets.

Inline Image

The easiest way to load images inside your extension is to use the data-base64 scheme. This will inline the image as base64 encoded data in the built bundle of your extension:

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

Web Accessible Resources

Plasmo automatically copies any web-accessible resources declared in the manifest override. For example, by specifying the following config in package.json:

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

The files below will be copied into the extension bundle and be available to chrome.getURL() (opens in a new tab):

• raw.js in the root of the project (where package.json is)
• Any file matching the glob assets/pic*.png from the project root
• resources/test.json from the project root

See with-web-accessible-resources (opens in a new tab)

Loading Asset during runtime

If you use a package that dynamically loads an asset (e.g. wasm) during runtime and needs a path to the local asset library, note that you need to make your asset folder available using ~assets, e.g.:

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

While in your js/ts code you need to refer the folder using the absolute path /

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

Assets from node_modules

Sometimes, a node package exposes static assets files you must include in your bundle as web-accessible resources. To do so, specify those assets in the web_accessible_resources field of the manifest override in package.json:

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

See with-inbox-sdk (opens in a new tab)