Workflows
/
Assets

Assets

Plasmo processes some files within the assets directory. Use this feature to store assets you want to load inline into your source code instead of copying them into the built bundle.

Extension icon with assets/icon512.png

Plasmo uses the assets/icon512.png file for the extension icon. It automatically generates a smaller resolution version of the icon for the final build bundle. All you need to work on is the 512x512 version!

Importing image assets inline

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

NOTE: Please see this note about ~ import resolution

Importing Web Accessible Resources

Plasmo automatically copy any web accessible resources declared in the manifest override. For example, by specifying the config below 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():

  • 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

You can also include files installed from node_module as well:

  "resources": [
    "@inboxsdk/core/pageWorld.js",
    "@inboxsdk/core/background.js"
  ],

See with-web-accessible-resources

Last updated on July 13, 2022