资源管理

浏览器扩展包可以包含多种类型的资源文件，如图像、字体、二进制 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.plasmocn.org/*"
        ]
      }
    ],
    "host_permissions": [
      "https://*/*"
    ]
  }
}

配置后，以下文件将被自动复制到扩展包中，并可通过 chrome.runtime.getURL() API 访问：

项目根目录下的 raw.js 文件（与 package.json 同级）
匹配 assets/pic*.png 通配符模式的所有图片文件
resources/test.json 配置文件

具体示例请参考 with-web-accessible-resources

运行时资源加载

如果使用的第三方库需要在运行时动态加载资源（如 WASM 文件），并且需要访问本地资源路径，可以通过以下方式配置：


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

在 JavaScript/TypeScript 代码中，需要使用绝对路径 / 来引用资源目录：


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

使用 npm 包中的资源

某些 npm 包可能会暴露静态资源文件，需要将这些文件包含在扩展的网络可访问资源中。可以通过在 package.json 的清单配置中指定这些资源：


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

具体实现示例请参考 with-inbox-sdk

最佳实践建议

💡

资源优化提示： 对于小型资源文件（如图标、配置文本等），推荐使用内联方案以减少网络请求。对于较大的资源文件，建议使用网络可访问资源方式，并按需加载。

⚠️

安全注意事项： 网络可访问资源的配置需要谨慎处理，确保只暴露必要的资源文件，避免潜在的安全风险。建议使用精确的文件路径匹配，而不是宽泛的通配符模式。