资源
扩展包可以包含诸如图像、字体、二进制 WASM 包和其他文件的资源。Plasmo 提供了几种处理这些资源的方法。
内联图像
在扩展中加载图像最简单的方法是使用 data-base64 方案。这将在扩展的构建包中以内联 base64 编码数据的形式嵌入图像：
import someCoolImage from "data-base64:~assets/some-cool-image.png"
...
<img src={someCoolImage} alt="一个非常酷的图像" />📦
请参阅此 关于 ~ 导入解析的说明
网络可访问资源
Plasmo 会自动复制在 清单覆盖 中声明的任何网络可访问资源。例如，在 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 - 项目根目录下匹配通配符
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 的资源
有时，一个 node 包会暴露静态资源文件，您必须将其包含在扩展包中作为网络可访问资源。为此，请在 package.json 中的清单覆盖部分的 web_accessible_resources 字段中指定这些资源：
"manifest": {
"web_accessible_resources": [
{
"resources": [
"@inboxsdk/core/pageWorld.js",
"@inboxsdk/core/background.js"
],
"matches": [
"https://mail.google.com/*"
]
}
]
}