Chrome擴展開發(fā)API中提供了一些關于UI外觀的操作,如果是剛剛上手的話首先需要了解Browser Actions、Omnibox、選項頁等,在這篇JavaScript開發(fā)Chrome瀏覽器擴展程序UI的教程中,我們先來回顧一下基本知識:

基本知識

1、插件文件結構

1.1、manifest.json

每一個擴展、可安裝的WebApp、皮膚，都有一個JSON格式的manifest文件，里面存放重要的插件相關信息。

一個最基本的配置例子：

{

  "name": "browser action demo",

  "version": "1.0",

  "permissions": [

    "tabs", "http://*/*", "https://*/*"

  ],

  "browser_action": {

    "default_title": "開關燈",

    "default_icon": "icon.png",

    "default_popup": "popup.html"

  },

  "background": {

    "page": "background.html"

   },

  "manifest_version": 2

}

1.2、popup

插件的彈窗，上面配置中的browser_action中default_popup就是這個頁面。

1.3、background page

絕大多數(shù)應用都包含一個背景頁面（background page），用來執(zhí)行應用的主要功能。

1.4、Content scripts

通過content script可以使應用和web頁面交互，content script是指能夠在瀏覽器已經(jīng)加載的頁面內(nèi)部運行的Javascript腳本?？梢詫ontent script看做是網(wǎng)頁的一部分，而不是它所在的應用的一部分。

2、文件之間的交互

popup彈窗中可以直接調(diào)用背景頁面中的函數(shù)。

Content script可以讀取并修改當前web頁面的dom樹，但是它并不能修改它所在應用的背景頁面（background）的dom樹。

Content script與應用之間的交互：可以互相發(fā)送消息

3、為web頁面注入JS（Content scripts）文件：

方法一，在manifest.json文件中配置：

"content_scripts": [

  {

   "matches": ["http://www.google.com/*"],

   "css": ["mystyles.css"],

   "js": ["jquery.js", "myscript.js"]

  }

 ],

方法二，通過executeScript()：

向頁面注入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主工具條的地址欄右側增加一個圖標。

注意：Packaged apps不能使用browser actions

1.1、manifest.json 中配置

注冊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、配置項說明

（1）default_icon

圖標 19 *19px

修改browser_action的manifest中 default_icon字段，或者調(diào)用setIcon()方法。

chrome.browserAction.setIcon(object details)

設置browser action的圖標。圖標可以是一個圖片的路徑或者是從一個canvas元素提取的像素信息.。無論是圖標路徑還是canvas的imageData，這個屬性必須被指定。

（2）default_title

修改browser_action的manifest中default_title字段，或者調(diào)用setTitle()方法。你可以為default_title字段指定本地化的字符串；點擊Internationalization查看詳情。

chrome.browserAction.setTitle(object details)

設置browser action的標題，這個將顯示在tooltip中。

（3）Badge

Browser actions可以選擇性的顯示一個badge— 在圖標上顯示一些文本。Badges 可以很簡單的為browser action更新一些小的擴展狀態(tài)提示信息。

因為badge空間有限，所以只支持4個以下的字符。

設置badge文字和顏色可以分別使用setBadgeText()andsetBadgeBackgroundColor()。

chrome.browserAction.setBadgeText(object details)

設置browser action的badge文字，badge 顯示在圖標上面。

setBadgeBackgroundColor

chrome.browserAction.setBadgeBackgroundColor(object details)

設置badge的背景顏色。

（4）default_popup

Popup 氣泡提示

修改browser_action的manifest中default_popup字段來指定HTML文件， 或者調(diào)用setPopup()方法。

chrome.browserAction.setPopup(object details)

設置一個點擊browser actions時顯示在popup中的HTML。

1.3、提示

為了獲得最佳的顯示效果, 請遵循以下原則：

確認 Browser actions 只使用在大多數(shù)網(wǎng)站都有功能需求的場景下。

確認 Browser actions 沒有使用在少數(shù)網(wǎng)頁才有功能的場景， 此場景請使用page actions。

確認你的圖標尺寸盡量占滿19x19的像素空間。 Browser action 的圖標應該看起來比page action的圖標更大更重。

不要嘗試模仿Google Chrome的扳手圖標，在不同的themes下它們的表現(xiàn)可能出現(xiàn)問題,，并且擴展應該醒目些。

盡量使用alpha通道并且柔滑你的圖標邊緣，因為很多用戶使用themes，你的圖標應該在在各種背景下都表現(xiàn)不錯。

不要不停的閃動你的圖標，這很惹人反感。

2、右鍵菜單

您可以選擇針對不同類型的對象（如圖片，鏈接，頁面）增加右鍵菜單項。

您可以根據(jù)需要添加多個右鍵菜單項。一個擴展里添加的多個右鍵菜單項會被Chrome自動組合放到對應擴展名稱的二級菜單里。

右鍵菜單可以出現(xiàn)在任意文檔（或文檔中的框架）中，甚至是本地文件（如file://或者Chrome://）中。若想控制右鍵菜單在不同文檔中的顯示，可以在調(diào)用create()和update()時指定documentUrlPatterns。

2.1、manifest.json 中配置

在清單中聲明“contentMenus”權限。同時，您應該指定一個16x16的圖標用作右鍵菜單的標識。例如：

{

    "name": "My extension",

    ...

    "permissions": [

     "contextMenus"

    ],

    "icons": {

     "16": "icon-bitty.png",

     "48": "icon-small.png",

     "128": "icon-large.png"

    },

    ...

}

3、桌面通知

通知用戶發(fā)生了一些重要的事情。桌面通知會顯示在瀏覽器窗口之外。 下面的圖片是通知顯示時的效果，在不同的平臺下，通知的顯示效果會有些細微區(qū)別。

直-接使用一小段 JavaScript 代碼創(chuàng)建通知，當然也可以通過擴展包內(nèi)的一個單獨HTML頁面。

3.1、manifest.json 中配置

{

 "name": "My extension",

 ...

 "permissions": [

  "notifications"

 ],

 ...

}

3.2、與擴展頁交互：

使用 getBackgroundPage() 和 getViews()在通知與擴展頁面中建立交互

// 在通知中調(diào)用擴展頁面方法...

chrome.extension.getBackgroundPage().doThing();

// 從擴展頁面調(diào)用通知的方法...

chrome.extension.getViews({type:"notification"}).forEach(function(win) {

 win.doOtherThing();

});

4、Omnibox

omnibox 應用程序界面允許向Google Chrome的地址欄注冊一個關鍵字，地址欄也叫omnibox

必須在 manifest 中包含omnibox 關鍵字段。需要指定像素為16x16的圖標，以便當用戶輸入關鍵字時，在地址欄中顯示。

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 自動創(chuàng)建灰度模式16x16像素的圖標。你應該提供全色版本圖標以便可以在其他場景下使用。

5、選項頁

為了讓用戶設定你的擴展功能，你可能需要提供一個選項頁。如果你提供了選項頁，在擴展管理頁面 chrome://extensions上會提供一個鏈接。點擊選項鏈接就可以打開你的選項頁。

5.1、manifest.json 中配置

{

 "name": "My extension",

 ...

 "options_page": "options.html",

 ...

}

6、覆寫特定頁

使用替代頁，可以將Chrome默認的一些特定頁面替換掉，改為使用擴展提供的頁面。

6.1、manifest.json 中配置

{

 "name": "My extension",

 ...

 "chrome_url_overrides" : {

  "pageToOverride": "myPage.html"

 },

 ...

}

7、Page Actions

使用page actions把圖標放置到地址欄里。

想讓擴展圖標總是可見，則使用browser action。

打包的應用程序不能使用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、配置項說明

同browser actions一樣，page actions 可以有圖標、提示信息、 彈出窗口。但沒有badge

使用方法 show() 和 hide() 可以顯示和隱藏page action。缺省情況下page action是隱藏的。當要顯示時，需要指定圖標所在的標簽頁，圖標顯示后會一直可見，直到該標簽頁關閉或開始顯示不同的URL （如：用戶點擊了一個連接）

7.3、提示

要只對少數(shù)頁面使用page action；

不要對大多數(shù)頁面使用它，如果功能需要，使用 browser actions代替。

沒事別總讓圖標出現(xiàn)動畫，那會讓人很煩。

8、主題

主題是一種特殊的擴展,可以用來改變整個瀏覽器的外觀。主題和標準擴展的打包方式類似,但是主題中不能包含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"

  }

 }

}