扩展图标与 manifest 声明

​

模板示例

​

action

npx extension@latest create my-extension --template=action

pnpx extension@latest create my-extension --template=action

yarn dlx extension@latest create my-extension --template=action

bunx extension@latest create my-extension --template=action

bunx extension@latest create my-extension --template=action

​

图标能力

​

受支持的图标字段

​

manifest.json 中的图标声明示例

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": "icons/action-icon.png"
  }
}

​

输出路径

icons/<filename>
browser_action/<theme-icon-filename>   # for theme_icons

​

路径行为

• Extension.js 会从 manifest 所在目录解析相对图标路径。
• 以 / 开头的路径和 public/... 会按扩展 public-root 语义解析。
• Extension.js 可以监视 public 文件夹中的资源，而不必通过图标特性本身重新输出它们。

​

开发期行为

• 修改已存在的图标文件会触发重新编译。
• 修改 manifest 中图标入口的引用可能需要重启开发服务器。
• 缺失必需的图标文件会产生构建错误（某些可选的图标组只会产生警告）。

​

最佳实践

• 显式声明 manifest 图标字段，而不是依赖偶发的资源导入。
• 提供多种图标尺寸（16、32、48、128），让 UI 在各浏览器表面更清晰。
• 保持图标文件名稳定，减少开发期对 manifest 的扰动。
• 有意地使用 public-root 路径，并测试由此产生的 manifest 输出路径。

​

下一步

• 继续阅读 web-accessible 资源。
• 进一步了解 特殊文件夹。