擴充功能圖示與 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 根目錄的語義來解析。
• Extension.js 可以監看 public 資料夾中的資產，而不必透過圖示功能本身重新輸出。

​

開發行為

• 變更現有圖示檔案會觸發重新編譯。
• 變更 manifest 的圖示進入點參考可能需要重新啟動開發伺服器。
• 缺少必要的圖示檔會造成建置錯誤（某些可選的圖示群組會改為警告）。

​

最佳實務

• 明確宣告 manifest 中的圖示欄位，而不是仰賴附帶的資產 import。
• 提供多種圖示尺寸（16、32、48、128），讓瀏覽器各介面顯示更銳利。
• 保持圖示檔名穩定，以減少開發期 manifest 的變動。
• 刻意使用 public 根路徑，並測試最終 manifest 的輸出路徑。

​

後續步驟

• 繼續閱讀 web-accessible resources。
• 進一步了解 Special folders。