Chrome擴(kuò)展開發(fā)API中提供了一些關(guān)于UI外觀的操作,如果是剛剛上手的話首先需要了解Browser Actions、Omnibox、選項(xiàng)頁(yè)等,在這篇JavaScript開發(fā)Chrome瀏覽器擴(kuò)展程序UI的教程中,我們先來(lái)回顧一下基本知識(shí):
基本知識(shí)
1、插件文件結(jié)構(gòu)
1.1、manifest.json
每一個(gè)擴(kuò)展、可安裝的WebApp、皮膚，都有一個(gè)JSON格式的manifest文件，里面存放重要的插件相關(guān)信息。
一個(gè)最基本的配置例子：
{
"name": "browser action demo",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "開關(guān)燈",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"page": "background.html"
},
"manifest_version": 2
}
1.2、popup
插件的彈窗，上面配置中的browser_action中default_popup就是這個(gè)頁(yè)面。
1.3、background page
絕大多數(shù)應(yīng)用都包含一個(gè)背景頁(yè)面（background page），用來(lái)執(zhí)行應(yīng)用的主要功能。
1.4、Content scripts
通過(guò)content script可以使應(yīng)用和web頁(yè)面交互，content script是指能夠在瀏覽器已經(jīng)加載的頁(yè)面內(nèi)部運(yùn)行的Javascript腳本。可以將content script看做是網(wǎng)頁(yè)的一部分，而不是它所在的應(yīng)用的一部分。
2、文件之間的交互
popup彈窗中可以直接調(diào)用背景頁(yè)面中的函數(shù)。
Content script可以讀取并修改當(dāng)前web頁(yè)面的dom樹，但是它并不能修改它所在應(yīng)用的背景頁(yè)面（background）的dom樹。
Content script與應(yīng)用之間的交互：可以互相發(fā)送消息
3、為web頁(yè)面注入JS（Content scripts）文件：
方法一，在manifest.json文件中配置：
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
方法二，通過(guò)executeScript()：
向頁(yè)面注入JavaScript 腳本執(zhí)行。
chrome.tabs.executeScript(integer tabId, object details, function callback)
chrome.tabs.executeScript(tabId, {file: "func.js", allFrames: true});
UI外觀
1、browser action:
在chrome主工具條的地址欄右側(cè)增加一個(gè)圖標(biāo)。
注意：Packaged apps不能使用browser actions
1.1、manifest.json 中配置
注冊(cè)browser action：
{
"name": "My extension",
...
"browser_action": {
"default_icon": "images/icon19.png", // optional
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
1.2、配置項(xiàng)說(shuō)明
（1）default_icon
圖標(biāo) 19 *19px
修改browser_action的manifest中 default_icon字段，或者調(diào)用setIcon()方法。
chrome.browserAction.setIcon(object details)
設(shè)置browser action的圖標(biāo)。圖標(biāo)可以是一個(gè)圖片的路徑或者是從一個(gè)canvas元素提取的像素信息.。無(wú)論是圖標(biāo)路徑還是canvas的imageData，這個(gè)屬性必須被指定。
（2）default_title
修改browser_action的manifest中default_title字段，或者調(diào)用setTitle()方法。你可以為default_title字段指定本地化的字符串；點(diǎn)擊Internationalization查看詳情。
chrome.browserAction.setTitle(object details)
設(shè)置browser action的標(biāo)題，這個(gè)將顯示在tooltip中。
（3）Badge
Browser actions可以選擇性的顯示一個(gè)badge— 在圖標(biāo)上顯示一些文本。Badges 可以很簡(jiǎn)單的為browser action更新一些小的擴(kuò)展?fàn)顟B(tài)提示信息。
因?yàn)閎adge空間有限，所以只支持4個(gè)以下的字符。
設(shè)置badge文字和顏色可以分別使用setBadgeText()andsetBadgeBackgroundColor()。
chrome.browserAction.setBadgeText(object details)
設(shè)置browser action的badge文字，badge 顯示在圖標(biāo)上面。
setBadgeBackgroundColor
chrome.browserAction.setBadgeBackgroundColor(object details)
設(shè)置badge的背景顏色。
（4）default_popup
Popup 氣泡提示
修改browser_action的manifest中default_popup字段來(lái)指定HTML文件， 或者調(diào)用setPopup()方法。
chrome.browserAction.setPopup(object details)
設(shè)置一個(gè)點(diǎn)擊browser actions時(shí)顯示在popup中的HTML。
1.3、提示
為了獲得最佳的顯示效果, 請(qǐng)遵循以下原則：
確認(rèn) Browser actions 只使用在大多數(shù)網(wǎng)站都有功能需求的場(chǎng)景下。
確認(rèn) Browser actions 沒(méi)有使用在少數(shù)網(wǎng)頁(yè)才有功能的場(chǎng)景， 此場(chǎng)景請(qǐng)使用page actions。
確認(rèn)你的圖標(biāo)尺寸盡量占滿19x19的像素空間。 Browser action 的圖標(biāo)應(yīng)該看起來(lái)比page action的圖標(biāo)更大更重。
不要嘗試模仿Google Chrome的扳手圖標(biāo)，在不同的themes下它們的表現(xiàn)可能出現(xiàn)問(wèn)題,，并且擴(kuò)展應(yīng)該醒目些。
盡量使用alpha通道并且柔滑你的圖標(biāo)邊緣，因?yàn)楹芏嘤脩羰褂胻hemes，你的圖標(biāo)應(yīng)該在在各種背景下都表現(xiàn)不錯(cuò)。
不要不停的閃動(dòng)你的圖標(biāo)，這很惹人反感。
2、右鍵菜單
您可以選擇針對(duì)不同類型的對(duì)象（如圖片，鏈接，頁(yè)面）增加右鍵菜單項(xiàng)。
您可以根據(jù)需要添加多個(gè)右鍵菜單項(xiàng)。一個(gè)擴(kuò)展里添加的多個(gè)右鍵菜單項(xiàng)會(huì)被Chrome自動(dòng)組合放到對(duì)應(yīng)擴(kuò)展名稱的二級(jí)菜單里。
右鍵菜單可以出現(xiàn)在任意文檔（或文檔中的框架）中，甚至是本地文件（如file://或者Chrome://）中。若想控制右鍵菜單在不同文檔中的顯示，可以在調(diào)用create()和update()時(shí)指定documentUrlPatterns。
2.1、manifest.json 中配置
在清單中聲明“contentMenus”權(quán)限。同時(shí)，您應(yīng)該指定一個(gè)16x16的圖標(biāo)用作右鍵菜單的標(biāo)識(shí)。例如：
{
"name": "My extension",
...
"permissions": [
"contextMenus"
],
"icons": {
"16": "icon-bitty.png",
"48": "icon-small.png",
"128": "icon-large.png"
},
...
}
3、桌面通知
通知用戶發(fā)生了一些重要的事情。桌面通知會(huì)顯示在瀏覽器窗口之外。 下面的圖片是通知顯示時(shí)的效果，在不同的平臺(tái)下，通知的顯示效果會(huì)有些細(xì)微區(qū)別。
直-接使用一小段 JavaScript 代碼創(chuàng)建通知，當(dāng)然也可以通過(guò)擴(kuò)展包內(nèi)的一個(gè)單獨(dú)HTML頁(yè)面。
3.1、manifest.json 中配置
{
"name": "My extension",
...
"permissions": [
"notifications"
],
...
}
3.2、與擴(kuò)展頁(yè)交互：
使用 getBackgroundPage() 和 getViews()在通知與擴(kuò)展頁(yè)面中建立交互
// 在通知中調(diào)用擴(kuò)展頁(yè)面方法...
chrome.extension.getBackgroundPage().doThing();
// 從擴(kuò)展頁(yè)面調(diào)用通知的方法...
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
win.doOtherThing();
});
4、Omnibox
omnibox 應(yīng)用程序界面允許向Google Chrome的地址欄注冊(cè)一個(gè)關(guān)鍵字，地址欄也叫omnibox
必須在 manifest 中包含omnibox 關(guān)鍵字段。需要指定像素為16x16的圖標(biāo)，以便當(dāng)用戶輸入關(guān)鍵字時(shí)，在地址欄中顯示。
4.1、manifest.json 中配置
{
"name": "Aaron's omnibox extension",
"version": "1.0",
"omnibox": { "keyword" : "aaron" },
"icons": {
"16": "16-full-color.png"
},
"background_page": "background.html"
}
Chrome 自動(dòng)創(chuàng)建灰度模式16x16像素的圖標(biāo)。你應(yīng)該提供全色版本圖標(biāo)以便可以在其他場(chǎng)景下使用。
5、選項(xiàng)頁(yè)
為了讓用戶設(shè)定你的擴(kuò)展功能，你可能需要提供一個(gè)選項(xiàng)頁(yè)。如果你提供了選項(xiàng)頁(yè)，在擴(kuò)展管理頁(yè)面 chrome://extensions上會(huì)提供一個(gè)鏈接。點(diǎn)擊選項(xiàng)鏈接就可以打開你的選項(xiàng)頁(yè)。
5.1、manifest.json 中配置
{
"name": "My extension",
...
"options_page": "options.html",
...
}
6、覆寫特定頁(yè)
使用替代頁(yè)，可以將Chrome默認(rèn)的一些特定頁(yè)面替換掉，改為使用擴(kuò)展提供的頁(yè)面。
6.1、manifest.json 中配置
{
"name": "My extension",
...
"chrome_url_overrides" : {
"pageToOverride": "myPage.html"
},
...
}
7、Page Actions
使用page actions把圖標(biāo)放置到地址欄里。
想讓擴(kuò)展圖標(biāo)總是可見，則使用browser action。
打包的應(yīng)用程序不能使用page actions。
7.1、manifest.json 中配置
{
"name": "My extension",
...
"page_action": {
"default_icon": "icons/foo.png", // optional
"default_title": "Do action", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
7.2、配置項(xiàng)說(shuō)明
同browser actions一樣，page actions 可以有圖標(biāo)、提示信息、 彈出窗口。但沒(méi)有badge
使用方法 show() 和 hide() 可以顯示和隱藏page action。缺省情況下page action是隱藏的。當(dāng)要顯示時(shí)，需要指定圖標(biāo)所在的標(biāo)簽頁(yè)，圖標(biāo)顯示后會(huì)一直可見，直到該標(biāo)簽頁(yè)關(guān)閉或開始顯示不同的URL （如：用戶點(diǎn)擊了一個(gè)連接）
7.3、提示
要只對(duì)少數(shù)頁(yè)面使用page action；
不要對(duì)大多數(shù)頁(yè)面使用它，如果功能需要，使用 browser actions代替。
沒(méi)事別總讓圖標(biāo)出現(xiàn)動(dòng)畫，那會(huì)讓人很煩。
8、主題
主題是一種特殊的擴(kuò)展,可以用來(lái)改變整個(gè)瀏覽器的外觀。主題和標(biāo)準(zhǔn)擴(kuò)展的打包方式類似,但是主題中不能包含JavaScript或者HTML代碼。
8.1、manifest.json 中配置
{
"version": "2.6",
"name": "camo theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_frame_overlay" : "images/theme_frame_stripe.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}