Browser Action類型的Google Chrome擴展程序,通常在Chrome瀏覽器的工具欄中,地址欄的右側,有一個始終存在的圖標。也就是說,這個圖標與瀏覽器相關,只要安裝了該Chrome擴展的瀏覽器,就會顯示該圖標。
鼠標懸浮到圖標上會給出提示信息,鼠標點擊圖標會彈出popup頁面。圖標還可以根據條件設置不同的徽章(Badge),提示用戶不同的條件狀態。
定義Browser Action類型的Google Chrome擴展程序,首先要在manifest.json文件中注冊如下:
{
...
"browser_action": {
"default_icon": { // optional
"19": "images/icon19.png", // optional
"38": "images/icon38.png" // optional
},
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
圖標(icon)的默認尺寸是19px*19px,可以是WebKit能夠顯示的任何靜態圖片(如BMP, GIF, ICO, JPEG, PNG等),也可以是HTML5的canvas元素。可以直接在manifest.json文件中設置圖標的圖片,也可以通過chrome.browserAction.setIcon(object details, function callback)方法設置圖標的圖片。其中的details對象有兩個名為imageData和path的對象屬性,二者必須設置其一,如details.imageData = icon19.png(等價於details.imageData = {'19': icon19.png})或details.path= icon19.png(等價於details.path = {'19': icon19.png})。
提示(tooltip)可選,可以直接在manifest.json文件中設置,也可以通過chrome.browserAction.setTitle(object details)方法設置。其中的details對象有一個名為title的字符串屬性,示例如details.title='An extension for strocks.'。提示的字符串支持國際化。
徽章(badge)可選,是在圖標之上疊加顯示的文本,可以靈活地顯示Browser Action的狀態變化。但是由於顯示空間有限,通常徽章的文本不多於4個字符。可以通過chrome.browserAction.setBadgeText(object details)方法顯示徽章的文本,其中的details對象有一個名為text的字符串屬性,示例如details.text='A'。可以通過chrome.browserAction.setBadgeBackgroundColor(object details)方法顯示徽章的背景色,其中的details對象有一個名為color的屬性。color屬性可以是字符串,如details.color='#FF0000'或details.color='#F00'。color屬性也可以是數組,如details.color=[255, 0, 0, 255]。
彈出框(popup)可選,點擊圖標時彈出框出現。彈出框是一個HTML文件,尺寸根據其內容自動設置。可以直接在manifest.json文件中設置popup頁面,也可以通過chrome.browserAction.setPopup(object details)方法設置popup頁面,其中的details對象有一個名為popup的字符串屬性,示例如details.popup='somePath.popup.html'。如果details.popup=''則表示沒有popup頁面。