about 5 years ago

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

切換 icon 圖示的目的

先舉幾個例子,Speak SelectionEvernote 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 上加文字。

結語:

適時的給予使用者一些狀態資訊能夠提升使用體驗。如果您有問題,歡迎在下方留言。謝謝!

← Chrome Extension 開發經驗篇 14 - 如何在當前網頁嵌入 HTML 和 JavaScript? Chrome Extension 開發經驗篇 16 - 如何在右鍵選單上顯示選取的文字? →
 
comments powered by Disqus