[好讀版]

有些 Extension 的 browser action 按鈕按下去時，會改變 icon，那為什麼需要換 icon？

切換 icon 圖示的目的

先舉幾個例子，Speak Selection 和 Evernote Web Clipper 在按下 browser action 按鈕時，會切換 icon 的顏色；Clear Cache 則是會有動畫效果；AdBlock 在不支援的頁面也會將 icon 改成灰色。從上面這些例子發現，切換 icons 的目的在於告知使用者 Extension 當下的狀態。

切換 icon 圖示的方法

你可以在彈出頁面、選項頁面、後台頁面、事件頁面的地方呼叫 api，如下所示。

chrome.browserAction.setIcon({
path: 'icons/disableIcon_19.png'
});

**溫馨小提醒：**browser action 按鈕的 icon 大小為 19x19 or 38x38(retina)。

加碼補充：在 icon 上顯示文字

一樣先舉的例子，Google Calendar (by Google) 會在 icon 右下方顯示距離下一個活動還有多少時間，這是怎麼做到的呢？ 跟 setIcon 差不多，只是改用 setBadgeText，如下所示。

chrome.browserAction.setBadgeText({
text: 'haha'
});

**溫馨小提醒：**只能顯示英文和數字，長度不要超過 4 個字元，會被切掉。
還可以用 setBadgeBackgroundColor 設定文字的背景顏色喔！方法如下。

chrome.browserAction.setBadgeBackgroundColor({
color: '#00ff00'
});

**注意：**setBadgeText 和 setBadgeBackgroundColor 是 browser action 才有的功能，page action 無法在 icon 上加文字。