chrome插件开发详解
1、chrome插件簡(jiǎn)單介紹
1.1基本概念
一個(gè)chrome插件其實(shí)是壓縮在一起的一組文件,包括HTML、CSS、JavaScript腳本,圖片文件、還有其它任何需要的文件。插件從本質(zhì)上來(lái)說(shuō)就是web頁(yè)面,它們可以使用所有的瀏覽器提供的API,從XMLHttpRequest到JSON到HTML5全部都有。
另外,插件可以和web頁(yè)面交互,或者通過(guò)content script 或者cross-original XMLHttpRequests與服務(wù)器交互。插件還可以訪問(wèn)瀏覽器提供的內(nèi)部功能,例如標(biāo)簽或者書(shū)簽等。
1.2開(kāi)發(fā)過(guò)程中幾個(gè)常用的對(duì)象
(1)Browser Actions
browser actions負(fù)責(zé)插件在瀏覽器上的展現(xiàn)形式,需要了解的有Icon(圖標(biāo))、Title、Popup(單擊Icon彈出的氣泡)。另外還有一個(gè)單擊圖標(biāo)會(huì)觸發(fā)的事件方法需要了解—chrome.browserAction.onClicked.addListener(function(Tab tab){…})
(2)Desktop Notifications
Desktop Notifications(桌面通知),通過(guò)在右下角彈出一個(gè)氣泡來(lái)提示用戶一些重要的事情。 Desktop Notifications 需要了解的有:在配置文件中要聲明notifications的權(quán)限(這個(gè)很重要)、Notifications可以與擴(kuò)展頁(yè)面進(jìn)行交互 : 1.在通知中調(diào)用擴(kuò)展頁(yè)面的方法:chrome.extension.getBackgroundPage().doThing() 2.從擴(kuò)展頁(yè)面調(diào)用通知的方法: chrome.extension.getViews({type:”notifiction”}).forEach(function(win)){ wind.doOtherThing });
Notifications 的創(chuàng)建方式:
1.簡(jiǎn)單的文字通知:
1 var notification = webkitNotifications.createNotification(‘48.png’ , //icon url –can be relative 2 ‘Hello!’, //notification title 3 4 ‘Lorem ipsum’ //notification body text;
2.創(chuàng)建一個(gè)HTML通知:
1 var notification = webkitNotifications.createHTMLNotification( 'notification.html' // html url - can be relative );
最后調(diào)用notification.show()就顯示通知,
(3)Page Actions
Page Actions 和Browser Actions 相似,只不過(guò)Page Actions的圖標(biāo)是出現(xiàn)在地址欄的。可參考browser Actions的用法。
(4)bookmarkets
chrome.bookmarks 用來(lái)創(chuàng)建、組織和管理書(shū)簽的,這里不做過(guò)多介紹。詳細(xì)參考開(kāi)發(fā)文檔。
(5)tabs
chrome標(biāo)簽頁(yè)模塊用于和瀏覽器的標(biāo)簽系統(tǒng)交互,它可以創(chuàng)建、修改、重新排列瀏覽器中的標(biāo)簽。
這里了解幾個(gè)比較有用的方法:
1.captureVisibleTab(integer windowid,object options,function callback) 截取當(dāng)前網(wǎng)頁(yè)可見(jiàn)區(qū)域
2.chrome.tabs.create(, object createProperties, function callback) 創(chuàng)建一個(gè)標(biāo)簽頁(yè)
3.chrome.tabs.executeScript(, integer tabId, object details, function callback)向頁(yè)面注入javascript腳本執(zhí)行,這個(gè)方法很管用,當(dāng)你自己創(chuàng)建一個(gè)頁(yè)面的時(shí)候。
4.chrome.tabs.get(, integer tabId, function callback) 獲取指定標(biāo)簽頁(yè)的信息
5.chrome.tabs.getAllInWindow(, integer windowId, function callback)
6.chrome.tabs.getCurrent(function callback) 這個(gè)也有用,可以獲取當(dāng)前的tab
7.chrome.tabs.insertCSS(, integer tabId, object details, function callback) 向頁(yè)面注入css
8.chrome.tabs.remove(, integer tabId, function callback) 關(guān)閉某個(gè)標(biāo)簽頁(yè)
9.chrome.tabs.onSelectionChanged.addListener(function(integer tabId, object selectInfo) {...});當(dāng)標(biāo)簽頁(yè)發(fā)生變化時(shí)觸發(fā)這個(gè)方法。
(6)window
使用chrome.windows 模塊跟瀏覽器視窗進(jìn)行交互,可以使用這么模塊在瀏覽器中創(chuàng)建、修改和重新排列視窗。
此外還有一些知識(shí)點(diǎn) 比如:替代頁(yè)Override 、選項(xiàng)頁(yè)、主題、history、Cookies等不是那么主要,可以參考開(kāi)發(fā)文檔了解。
2.插件組成介紹
首先要了解一個(gè)chrome插件的組成:
如上圖所示,一個(gè)chrome插件目錄大致如此。我下面結(jié)合著插件目錄對(duì)插件組成做一個(gè)簡(jiǎn)單介紹:
2.1manifest.json主配置文件
首先manifest.json文件,這個(gè)文件的名字必須是這個(gè),為了chrome瀏覽器能夠識(shí)別解析,
manifest.json文件的字段如下:
1 {
2
3 // Required (版本號(hào)在采用寫(xiě)注冊(cè)表安裝的時(shí)候必須和寫(xiě)入注冊(cè)表的版本號(hào)一致,否則安裝失敗)
4
5 "name": "My Extension",
6
7 "version": "versionString",
8
9
10
11 // Recommended
12
13 "description": "A plain text description",
14
15 "icons": { ... }, //icons這里需要三種不同分辨率的圖片 一般是16*16 48*48 128*128
16
17 "default_locale": "en", //支持國(guó)際化
18
19
20
21 // Pick one (or none)
22
23 "browser_action": {...}, //這個(gè)在上面都有介紹到。
24
25 "page_action": {...},
26
27 "theme": {...},
28
29 "app": {...},
30
31
32
33 // Add any of these that you need
34
35 "background_page": "aFile.html",
36
37 "chrome_url_overrides": {...}, //替換頁(yè)
38
39 "content_scripts": [...],
40
41 "homepage_url": "http://path/to/homepage",
42
43 "incognito": "spanning" or "split",
44
45 "key": "publicKey",
46
47 "minimum_chrome_version": "versionString",
48
49 "omnibox": { "keyword" : "aString" },
50
51 "options_page": "aFile.html", //選項(xiàng)的配置頁(yè)
52
53 "permissions": [...], //權(quán)限這里很重要,需要使用標(biāo)簽頁(yè)、window等的要在這里配置權(quán)限
54
55 "plugins": [...], //和dll交互的時(shí)候需要在這里配置
56
57 "update_url": "http://path/to/updateInfo.xml"
58
59 }
首先可以把必須的字段寫(xiě)上,"name”、"version"、“description”、“icons”,后面有需要的可以再添加。
2.2html文件
html文件我們用到的有兩種background.html 和popup.html:
background.html主要是運(yùn)行在后臺(tái),它在插件的生命周期中都存在,比如:你可以將一些持久的數(shù)據(jù)放到到背景頁(yè)中,當(dāng)需要的時(shí)候可以從背景頁(yè)中得到。需要注意的是,使用了background.html,需要在manifest.json文件中要配置“background_page”:background.html。(下面的例子中會(huì)有介紹)
而popup.html是單擊chrome瀏覽器右上角任務(wù)欄中或者是地址欄的插件圖標(biāo)時(shí)彈出的頁(yè)面,假如你有單擊圖標(biāo)彈出氣泡提示的需求,就可以在popup.html上下功夫。同樣使用了popup.html就需要在manifest.json文件中要配置:
1 "browser_action": {
2 "default_icon": "images/icon19.png", // optional
3 "default_title": "Google Mail", // optional; shown in tooltip
4 "default_popup": "popup.html" // optional
5 },
下面的例子中會(huì)詳細(xì)的介紹
2.3js文件
Js文件在插件中作用也很大,一般我們會(huì)將html中的js代碼放到專門(mén)的js文件中,而在html中引入。有時(shí)當(dāng)需要去操作頁(yè)面時(shí)也是將寫(xiě)好的js文件注入到對(duì)應(yīng)的標(biāo)簽頁(yè)面。
使用了js文件,在manifest.json文件中也要配置鍵值,這個(gè)我在開(kāi)發(fā)插件的過(guò)程中用到的比較少。詳細(xì)的可以參考chrome應(yīng)用開(kāi)發(fā)文檔。
2.4images文件
Image文件夾中存放的是插件的圖片資源,由于chrome插件在不同的地方會(huì)顯示不同分辨率的圖標(biāo),因此在image文件夾下會(huì)存放不同分辨率的圖標(biāo),一般來(lái)說(shuō)有16*16、48*48、128*128三種分辨率。
在manifest.json文件中要做如下配置:
1 "icons": {
2
3 "16": "images/menu_logo.png",
4
5 "48": "images/extension_logo.png",
6
7 "128": "images/install_logo.png"
8
9 }
2.5_locales國(guó)際化
為了國(guó)際化您的擴(kuò)展,您需要把所有用戶可見(jiàn)字符串保存在文件名為messages.json的文件里。每當(dāng)你本地化您的擴(kuò)展時(shí),您需要在_locales/localeCode下增加這個(gè)messages.json文件,localeCode 是一個(gè)形如en代表英語(yǔ)的編碼。
下面是一個(gè)支持英語(yǔ)(en)、西班牙語(yǔ)(es)和韓語(yǔ)(ko)的國(guó)際化擴(kuò)展文件層次結(jié)構(gòu)圖。
在messages.json文件中定義的結(jié)構(gòu)如下:
1 {
2
3 "name": {
4
5 "message": "XLFastPass Addin"
6
7 },
8
9 "description": {
10
11 "message": "一鍵保存精彩網(wǎng)頁(yè),多終端同步,永久珍藏"
12
13 },
14
15 "title": {
16
17 "message": "單擊這里將網(wǎng)頁(yè)保存到快傳客戶端"
18
19 }
20
21 }
在manifest.json和CSS文件中,像下圖一樣引用一個(gè)字符串:__MSG_messagename__
在您的擴(kuò)展JavaScript程序中,像下圖一樣引用一個(gè)字符串:chrome.i18n.getMessage("messagename")
重要提示:如果一個(gè)擴(kuò)展有_locales目錄,那么manifest文件必須定義"default_locale"字段內(nèi)容。
2.6NPAPI插件
使用HTML和JavaScript開(kāi)發(fā)新擴(kuò)展是十分容易的事情,不過(guò)如果你想在擴(kuò)展中重用已經(jīng)開(kāi)發(fā)完成的代碼和功能,你可以通過(guò)使用NPAPI插件到達(dá)目的。NPAPI插件使JavaScript代碼能夠調(diào)用本地二進(jìn)制代碼,比如dll文件。
使用NPAPI,你需要在擴(kuò)展的manifest.json文件中加入一個(gè)節(jié),描述如何找到你的插件,以及其他一些信息,:
1 {
2
3 "name": "My extension",
4
5 ...
6
7 "plugins": [
8
9 { "path": "content_plugin.dll", "public": true },
10
11 { "path": "extension_plugin.dll" }
12
13 ],
14
15 ...
16
17 }
創(chuàng)建一個(gè)HTML文件,mime-type為:application/x-my-extension" ,用于加載你的插件。
1 <embed type="application/x-my-extension" id="pluginId">
2
3 <script>
4
5 var plugin = document.getElementById("pluginId");
6
7 var result = plugin.myPluginMethod(); // call a method in your plugin
8
9 console.log("my plugin returned: " + result);
10
11 </script>
12
13 </embed>
這樣在html中就可以調(diào)用dll中定義的方法了。
3.插件安裝和卸載
3.1.插件安裝
chrome插件安裝大致可以分為兩種:靜默安裝和拉起瀏覽器安裝。
(1)靜默安裝
靜默安裝也就是通過(guò)寫(xiě)注冊(cè)表安裝,個(gè)人覺(jué)得Google對(duì)這種方式支持的不是太好,因此使用這種方式會(huì)造成很多問(wèn)題。
首先寫(xiě)注冊(cè)表安裝的格式如下:
在HKEY_LOCAL_MACHINE\SOFTWARE\Google\Chrome\Extensions\下建立一個(gè)以插件的id為名字的鍵值。然后創(chuàng)建兩個(gè)分別以"path" 和 "version"命名的字符串類型數(shù)據(jù)項(xiàng),設(shè)置該擴(kuò)展的位置和版本。如:
1 path: xl_plugin_chrome.crx 2 3 version: 1.0
采用靜默安裝遇到的問(wèn)題及解決方法如下:
第一次安裝時(shí)如果有打開(kāi)的chrome瀏覽器(或者是默認(rèn)chrome瀏覽器在后臺(tái)運(yùn)行),會(huì)出現(xiàn)安裝不上的情況,需要將chrome瀏覽器重啟才能安裝插件。
覆蓋安裝的時(shí)候會(huì)出現(xiàn)安裝不上的情況,需要在覆蓋安裝之前將chrome插件已有的配置等清理干凈,這樣覆蓋安裝就能成功。
寫(xiě)入注冊(cè)表的version一定要和manifest.json文件中配置的一樣,不一樣會(huì)造成安裝失敗。
在寫(xiě)注冊(cè)表安裝之后第二次重啟chrome瀏覽器,在右上角會(huì)彈出一個(gè)“某某插件已安裝”的提示,讓你確定。這里要用到插件的name,假如是中文的話會(huì)出現(xiàn)亂碼,這個(gè)問(wèn)題我也沒(méi)有解決,不過(guò)暫時(shí)用英文代替吧。
(2)拉起瀏覽器安裝
拉起瀏覽器安裝的效果和將crx拖到chrome瀏覽器的安裝效果一樣,個(gè)人感覺(jué)這是Google提倡的安裝方式,所以采用這種方式不會(huì)出現(xiàn)什么問(wèn)題。但是這種方式可能用戶體驗(yàn)會(huì)差一些,因?yàn)榘惭b過(guò)程中還需要去拉起瀏覽器。
(3)版本差異化
由于chrome瀏覽器發(fā)展很快,所以出現(xiàn)了非常多的版本,他們對(duì)插件的影響如下:
1.chrome瀏覽器從4.0及以上版本才支持插件,因此3.0及以下版本安裝是不成功的;
2.chrome瀏覽器從21.0.1180.80m 版本開(kāi)始要求必須將crx文件拖到“擴(kuò)展程序”界面才可以安裝(如下圖所示),因此拉起瀏覽器安裝方式不可行,只能用靜默安裝的方式。
3.2卸載插件
卸載插件的方式有兩種,其實(shí)和安裝對(duì)應(yīng),一種是直接在chrome://chrome/extensions/頁(yè)面切換到開(kāi)發(fā)者模式進(jìn)行卸載,一種是采用清理安裝文件等的方式。
(1)清理插件安裝文件、注冊(cè)表鍵值
這種方式需要清理三個(gè)地方的內(nèi)容:
1. 清理掉注冊(cè)表中key為插件id的項(xiàng);
2.將C:\Documents and Settings\admin\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions安裝目錄下的對(duì)應(yīng)插件id名字的安裝文件夾清除;
3.將C:\Documents and Settings\admin\Local Settings\Application Data\Google\Chrome\User Data\Default\ Preferences文件中的對(duì)應(yīng)的插件id名字相關(guān)的項(xiàng)清理掉;
在完成上面的三個(gè)清理過(guò)程之后還需要注意,在卸載的過(guò)程中假如chrome瀏覽器開(kāi)著,再打開(kāi)一個(gè)chrome瀏覽器就會(huì)在右上角出現(xiàn)一個(gè)白色的框(其實(shí)是圖標(biāo)不見(jiàn)了),插件還可以使用。解決方法是重啟chrome瀏覽器。
(2)在chrome://chrome/extensions/頁(yè)面卸載
這種卸載方式不會(huì)遇到太多的問(wèn)題,也是Google建議的方式。
4.chrome插件打包
chrome插件都是以crx文件的形式發(fā)布的。在chrome://chrome/extensions/頁(yè)面對(duì)插件進(jìn)行打包
打包的時(shí)候會(huì)用到一個(gè)pem結(jié)尾的密鑰文件,這個(gè)要保管好,后續(xù)版本的插件打包都用這個(gè)密鑰,這樣插件的id就不會(huì)發(fā)生變化。
Chrome插件的id也要備份一下,方便后面使用:
注意:打包時(shí)的插件文件要放到硬盤(pán)的根目錄,然后密鑰也要放到同一根目錄下,這樣才能正確的生成crx文件,否則crx文件會(huì)出現(xiàn)不能安裝的情況。
5.詳細(xì)舉例(以迅雷快傳chrome插件為例)
4.1.manifest.json文件
1 {
2
3 "default_locale": "zh_CN",
4
5 "name": "__MSG_name__",
6
7 "description": "__MSG_description__",
8
9 "version": "1.0.2",
10
11 "icons": {
12
13 "16": "images/menu_logo.png",
14
15 "48": "images/extension_logo.png",
16
17 "128": "images/install_logo.png"
18
19 },
20
21 /*插件動(dòng)作配置*/
22
23 "browser_action": {
24
25 "default_icon": "images/extension_logo.png",
26
27 /*圖標(biāo)上的懸浮字*/"default_title": "__MSG_title__"
28
29 },
30
31 /*background_page是一個(gè)和插件同生命周期的一個(gè)腳本,用來(lái)它管理一個(gè)任務(wù)和一些狀態(tài)*/
32
33 "background_page": "background.html",
34
35 "permissions":
36
37 ["notifications",
38
39 "background",
40
41 "<all_urls>",
42
43 "tabs"],
44
45 "plugins":
46
47 [{
48
49 "path": "npxunlei.dll",
50
51 "public": true
52
53 }]
54
55 }
4.2.background.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
3 <HTML>
4
5 <HEAD>
6
7 <embed id="np_xunlei_plugin" type="application/np_xunlei_plugin" hidden="true">
8
9 <SCRIPT LANGUAGE="JavaScript">
10
11
12
13 /* var notification = webkitNotifications.createNotification(
14
15 'images/menu_logo.png', // icon url - can be relative
16
17 'Hello!', // notification title
18
19 'Lorem ipsum...' // notification body text
20
21 );
22
23 notification.show();
24
25 */
26
27 chrome.browserAction.onClicked.addListener(function(tab) {
28
29 var xl_plugin =document.getElementById('np_xunlei_plugin');
30
31
32
33 var url = tab.url;
34
35 var urlTitle = tab.title;
36
37 //alert("url== "+url);
38
39 //alert("urlTitle=="+urlTitle);
40
41 /*調(diào)用C++程序的方法 url_image 是Base64位的截圖data*/
42
43 chrome.tabs.captureVisibleTab(null, function(img) {
44
45 /*將Base64 image保存到本地*/
46
47 xl_plugin.SaveToFastPassPlugin(url,urlTitle,img);
48
49 });
50
51 });
52
53
54
55 </SCRIPT>
56
57 </embed>
58
59 </HEAD>
60
61 <BODY>
62
63
64
65 </BODY>
66
67 </HTML>
4.3. _locales文件
1 _locales/zh_CN/message.json:
2
3 {
4
5 "name": {
6
7 "message": "XLFastPass Addin"
8
9 },
10
11 "description": {
12
13 "message": "一鍵保存精彩網(wǎng)頁(yè),多終端同步,永久珍藏"
14
15 },
16
17 "title": {
18
19 "message": "單擊這里將網(wǎng)頁(yè)保存到快傳客戶端"
20
21 }
22
23 }
24
25 _locales/zh_TW/message.json:
26
27 {
28
29 "name": {
30
31 "message": "XLFastPass Addin"
32
33 },
34
35 "description": {
36
37 "message": "一鍵保存精彩網(wǎng)頁(yè),多終端同步,永久珍藏"
38
39 },
40
41 "title": {
42
43 "message": "單擊這里將網(wǎng)頁(yè)保存到快傳客戶端"
44
45 }
46
47 }
4.4.images文件
在images文件夾下放3個(gè)不同分辨率的圖標(biāo)。
4.5.npxunlei.dll
這里的dll是為了拉起快傳客戶端并將網(wǎng)頁(yè)的截圖保存到本地然后通過(guò)快傳客戶端上傳到服務(wù)器用的,大家可以根據(jù)自己的需要來(lái)實(shí)現(xiàn)dll文件。
總結(jié)
以上是生活随笔為你收集整理的chrome插件开发详解的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 湖北首款全碳纤维飞机首飞成功:配有整机降
- 下一篇: 女儿为已故父亲按时交话费被停机 中国电信