Chrome瀏覽器擴展開發系列之四：Browser Action類型的Chrome瀏覽器擴展

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頁面。