Skip to main content

静态资源

静态资源使用​

Plasmo 可以加载静态资源， 比如 图片、字体、二进制的 WASM 、或者其他的文件。 Plasmo 提供了几种机制加载这些资源。

内联加载​

最简单的方式，是把资源文件的数据作为 Base64 的对象方式加载。

示例中展示了，如何 base64 方式的加载图片

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

这里需要注意下关于 ~ 的解释。

网络资源加载​

通过 修改 package.json 在 manifest 中定义允许的资源，主要集中在 web_accessible_resources 的配置内容

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

以上列出的文件，都会被复制到 扩展的文件目录中。 url 可以使用 chrome.getURL获取。 各种路径都是相对于 package.json 同级的目录。

以上列出的三种路径:

  1. raw.js 会在默认的根目录
  2. assets/pic*.png 会复制为 assets 目录
  3. resources/test.json 会复制为 resources 目录。

官方示例: with-web-accessible-resources

运行时加载资源​

同时， web_accessible_resources 中定义的 资源，都可以通过运行时加载。 比如:

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

加载来自 node_modules 中的资源​

有时需要加载 node_modules 中的资源，也需要在 web_accessible_resources 定义。

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

参考示例: with-inbox-sdk

tip

inboxsdk是一个开发 Gmail扩展的综合工具包。

扩展图标 (icon)​

Plasmo 会自动把你的图标，缩小。所以，对于多个版本的图标，用户提供较大的即可。 扩展图标路径: assets/icon.png。 当然，如果你对不同大小的图标做了设计也可以按照如下的方式命名。

icon512icon-512icon-512x512icon1024icon-1024icon-1024x1024
tip

保证你的 图标文件在 assets 目录，并且 后缀名为 .png 的 png 文件。

开发模式的图标​

开发模式下，Plasmo 会自动把你的扩展图标变为灰色，已区分开正常的模式。

自定义开发者图标​

如果你不喜欢灰色的图标，你也可以保存为 assets/icon.development.png 来作为开发模式图标。