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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM