Framework
Assets

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" />
📦

Please see this note about ~ import resolution

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)

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)

Import ResolutionIcon