Chrome瀏覽器擴充套件開發系列之四:Browser Action型別的Chrome瀏覽器擴充套件

Chrome擴充套件開發極客發表於2015-09-14

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

相關文章