manifest.json 中的圖示路徑、解析 public/相對路徑、輸出圖示資產,並在開發期間監看圖示檔案。
範本範例
action

manifest.json 中宣告工具列圖示的 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 根目錄的語義來解析。 - Extension.js 可以監看 public 資料夾中的資產,而不必透過圖示功能本身重新輸出。
開發行為
- 變更現有圖示檔案會觸發重新編譯。
- 變更 manifest 的圖示進入點參考可能需要重新啟動開發伺服器。
- 缺少必要的圖示檔會造成建置錯誤(某些可選的圖示群組會改為警告)。
最佳實務
- 明確宣告 manifest 中的圖示欄位,而不是仰賴附帶的資產 import。
- 提供多種圖示尺寸(
16、32、48、128),讓瀏覽器各介面顯示更銳利。 - 保持圖示檔名穩定,以減少開發期 manifest 的變動。
- 刻意使用 public 根路徑,並測試最終 manifest 的輸出路徑。
後續步驟
- 繼續閱讀 web-accessible resources。
- 進一步了解 Special folders。

