基本知識
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 顯示在圖標上面。
setBadgeBackgroundColor chrome.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" } } }