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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。