Skip to main content
通过在 Extension.js 可以校验、重写并稳定输出的 manifest 字段中声明图标，保持扩展品牌与 action UI 的一致性。 Extension.js 会处理 manifest.json 中的图标路径，解析 public/相对路径，输出图标资源，并在开发期监视图标文件。

​
模板示例

​
action

action template screenshot 一个 action 扩展，在 manifest.json 中声明了工具栏图标。
仓库：extension-js/examples/action

​
图标能力

​
受支持的图标字段

Chromium 不接受 .svg（或 .webp）作为 icons 与 action 图标。把这些字段指向 SVG 的 manifest 能在 Firefox 中加载，但在 Chrome、Edge、Brave 和 Opera 中会失败。 面向所有 Chromium 目标请提供 PNG 文件。sidebar_action 与 browser_action.theme_icons 是 Firefox 字段，而且 sidebar_action.default_icon 对 .svg 的支持在那里也只是部分的（*）。

​
manifest.json 中的图标声明示例

​
从 SVG 生成各尺寸 PNG

把 SVG 保留为设计源文件，导出所有浏览器都接受的 PNG 尺寸。下面这条命令使用 librsvg 提供的 rsvg-convert（macOS 上 brew install librsvg，Debian 与 Ubuntu 上 apt install librsvg2-bin）：
然后像上面的示例那样，把 icons 与 action.default_icon 指向这些 PNG 文件。

​
输出路径

典型的图标输出：
图标不会被移动到某个 icons/ 文件夹里。声明为 images/icon.png 的图标会输出在 images/icon.png，输出的 manifest 也仍然指向同一个路径。

​
路径行为

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

​
开发期行为

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

​
最佳实践

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

​
下一步