JavaScript開發Chrome瀏覽器延伸程式UI的教程，chromeui

JavaScript開發Chrome瀏覽器延伸程式UI的教程，chromeui

基本知識
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
絕大多數應用都包含一個背景頁面（background page），用來執行應用的主要功能。

1.4、Content scripts
通過content script可以使應用和web頁面互動，content script是指能夠在瀏覽器已經載入的頁面內部啟動並執行Javascript指令碼。可以將content script看做是網頁的一部分，而不是它所在的應用的一部分。

2、檔案之間的互動
popup彈窗中可以直接調用背景頁面中的函數。

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

Content script與應用之間的互動：可以互相發送訊息

3、為web頁面注入JS（Content scripts）檔案：
方法一，在manifest.json檔案中配置：

"content_scripts": [  {   "matches": ["http://www.google.com/*"],   "css": ["mystyles.css"],   "js": ["jquery.js", "myscript.js"]  } ],

方法二，通過executeScript()：

向頁面注入JavaScript 指令碼執行。

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欄位，或者調用setIcon()方法。

chrome.browserAction.setIcon(object details)

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

（2）default_title
修改browser_action的manifest中default_title欄位，或者調用setTitle()方法。你可以為default_title欄位指定本地化的字串；點擊Internationalization查看詳情。

chrome.browserAction.setTitle(object details)

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

（3）Badge
Browser actions可以選擇性的顯示一個badge— 在表徵圖上顯示一些文本。Badges 可以很簡單的為browser action更新一些小的擴充狀態提示資訊。

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

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

chrome.browserAction.setBadgeText(object details)

設定browser action的badge文字，badge 顯示在表徵圖上面。

setBadgeBackgroundColorchrome.browserAction.setBadgeBackgroundColor(object details)

設定badge的背景顏色。

（4）default_popup
Popup 氣泡提示

修改browser_action的manifest中default_popup欄位來指定HTML檔案， 或者調用setPopup()方法。

chrome.browserAction.setPopup(object details)

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

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

確認 Browser actions 只使用在大多數網站都有功能需求的情境下。
確認 Browser actions 沒有使用在少數網頁才有功能的情境， 此情境請使用page actions。
確認你的表徵圖尺寸盡量佔滿19x19的像素空間。 Browser action 的表徵圖應該看起來比page action的表徵圖更大更重。
不要嘗試模仿Google Chrome的扳手表徵圖，在不同的themes下它們的表現可能出現問題,，並且擴充應該醒目些。
盡量使用alpha通道並且柔滑你的表徵圖邊緣，因為很多使用者使用themes，你的表徵圖應該在在各種背景下都表現不錯。
不要不停的閃動你的表徵圖，這很惹人反感。

2、右鍵菜單
您可以選擇針對不同類型的對象（片，連結，頁面）增加右鍵功能表項目。

您可以根據需要添加多個右鍵功能表項目。一個擴充裡添加的多個右鍵功能表項目會被Chrome自動組合放到對應副檔名稱的二級菜單裡。

右鍵菜單可以出現在任意文檔（或文檔中的架構）中，甚至是本地檔案（如file://或者Chrome://）中。若想控制右鍵菜單在不同文檔中的顯示，可以在調用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、案頭通知
通知使用者發生了一些重要的事情。案頭通知會顯示在瀏覽器視窗之外。 下面的圖片是通知顯示時的效果，在不同的平台下，通知的顯示效果會有些細微區別。

直-接使用一小段 JavaScript 代碼建立通知，當然也可以通過擴充包內的一個單獨HTML頁面。

3.1、manifest.json 中配置

{ "name": "My extension", ... "permissions": [  "notifications" ], ...}

3.2、與擴充頁互動：
使用 getBackgroundPage() 和 getViews()在通知與擴充頁面中建立互動

// 在通知中調用擴充頁面方法...chrome.extension.getBackgroundPage().doThing();// 從擴充頁面調用通知的方法...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 自動建立灰階模式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、提示
要只對少數頁面使用page action；
不要對大多數頁面使用它，如果功能需要，使用 browser actions代替。
沒事別總讓表徵圖出現動畫，那會讓人很煩。
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"  } }}