iT邦幫忙

DAY 15
0

Chrome Extension 學習筆記系列 第 15

Chrome Extension 開發經驗篇 15 - 如何改變 browserAction 的圖示?

[好讀版]

有些 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 - 如何在右鍵選單上顯示選取的文字?
系列文
Chrome Extension 學習筆記30

1 則留言

0
holmes2136
iT邦新手 3 級 ‧ 2014-10-06 12:32:47

滿有趣的 ~ 多謝分享嚕

我要留言

立即登入留言