chrome插件開發詳解

1、chrome插件簡單介紹

     1.1基本概念

      一個chrome插件其實是壓縮在一起的一組文件，包括HTML、CSS、JavaScript腳本，圖片文件、還有其它任何需要的文件。插件從本質上來說就是web頁面，它們可以使用所有的瀏覽器提供的API，從XMLHttpRequest到JSON到HTML5全部都有。

      另外，插件可以和web頁面交互，或者通過content script 或者cross-original XMLHttpRequests與服務器交互。插件還可以訪問瀏覽器提供的內部功能，例如標簽或者書簽等。

     1.2開發過程中幾個常用的對象

(1)Browser Actions

     browser actions負責插件在瀏覽器上的展現形式，需要了解的有Icon(圖標)、Title、Popup(單擊Icon彈出的氣泡)。另外還有一個單擊圖標會觸發的事件方法需要了解—chrome.browserAction.onClicked.addListener(function(Tab tab){…})

(2)Desktop Notifications

      Desktop Notifications(桌面通知)，通過在右下角彈出一個氣泡來提示用戶一些重要的事情。 Desktop Notifications 需要了解的有：在配置文件中要聲明notifications的權限(這個很重要)、Notifications可以與擴展頁面進行交互 ：  1.在通知中調用擴展頁面的方法：chrome.extension.getBackgroundPage().doThing() 2.從擴展頁面調用通知的方法: chrome.extension.getViews({type:”notifiction”}).forEach(function(win)){  wind.doOtherThing });

 Notifications 的創建方式：

 1.簡單的文字通知：

   

 var notification = webkitNotifications.createNotification(‘48.png’ ,  //icon url –can be relative
 ‘Hello!’,          //notification title

‘Lorem ipsum’    //notification body text;

 

 2.創建一個HTML通知：

       

var notification = webkitNotifications.createHTMLNotification( 'notification.html' // html url -              can be relative );

       最后調用notification.show()就顯示通知，

（3）Page Actions

   Page Actions 和Browser Actions 相似，只不過Page Actions的圖標是出現在地址欄的。可參考browser Actions的用法。

（4）bookmarkets

   chrome.bookmarks 用來創建、組織和管理書簽的，這里不做過多介紹。詳細參考開發文檔。

（5）tabs

   chrome標簽頁模塊用於和瀏覽器的標簽系統交互，它可以創建、修改、重新排列瀏覽器中的標簽。

   這里了解幾個比較有用的方法：

  1.captureVisibleTab(integer windowid,object options,function callback)   截取當前網頁可見區域

  2.chrome.tabs.create(, object createProperties, function callback)   創建一個標簽頁

  3.chrome.tabs.executeScript(, integer tabId, object details, function callback)向頁面注入javascript腳本執行，這個方法很管用，當你自己創建一個頁面的時候。

  4.chrome.tabs.get(, integer tabId, function callback) 獲取指定標簽頁的信息

  5.chrome.tabs.getAllInWindow(, integer windowId, function callback)

  6.chrome.tabs.getCurrent(function callback)  這個也有用，可以獲取當前的tab

  7.chrome.tabs.insertCSS(, integer tabId, object details, function callback) 向頁面注入css

  8.chrome.tabs.remove(, integer tabId, function callback)  關閉某個標簽頁

  9.chrome.tabs.onSelectionChanged.addListener(function(integer tabId, object selectInfo) {...});當標簽頁發生變化時觸發這個方法。

（6）window

        使用chrome.windows 模塊跟瀏覽器視窗進行交互，可以使用這么模塊在瀏覽器中創建、修改和重新排列視窗。

  此外還有一些知識點  比如：替代頁Override 、選項頁、主題、history、Cookies等不是那么主要，可以參考開發文檔了解。

  2.插件組成介紹

     首先要了解一個chrome插件的組成：

     如上圖所示，一個chrome插件目錄大致如此。我下面結合着插件目錄對插件組成做一個簡單介紹：

     2.1manifest.json主配置文件

首先manifest.json文件，這個文件的名字必須是這個，為了chrome瀏覽器能夠識別解析，

       manifest.json文件的字段如下：

{

        // Required  (版本號在采用寫注冊表安裝的時候必須和寫入注冊表的版本號一致，否則安裝失敗)

        "name": "My Extension",   

               "version": "versionString",     

              

               // Recommended   

               "description": "A plain text description",   

               "icons": { ... },  //icons這里需要三種不同分辨率的圖片 一般是16*16 48*48 128*128

               "default_locale": "en",     //支持國際化

              

               // Pick one (or none)   

               "browser_action": {...},  //這個在上面都有介紹到。 

               "page_action": {...},   

               "theme": {...},   

               "app": {...},     

              

               // Add any of these that you need   

               "background_page": "aFile.html",   

               "chrome_url_overrides": {...},    //替換頁  

               "content_scripts": [...],   

               "homepage_url": "http://path/to/homepage",   

               "incognito": "spanning" or "split",   

               "key": "publicKey",    

               "minimum_chrome_version": "versionString",   

               "omnibox": { "keyword" : "aString" },    

               "options_page": "aFile.html",     //選項的配置頁

               "permissions": [...],    //權限這里很重要，需要使用標簽頁、window等的要在這里配置權限

               "plugins": [...],      //和dll交互的時候需要在這里配置  

               "update_url": "http://path/to/updateInfo.xml" 

} 

   首先可以把必須的字段寫上，"name”、"version"、“description”、“icons”，后面有需要的可以再添加。

2.2html文件

html文件我們用到的有兩種background.html 和popup.html：

      background.html主要是運行在后台，它在插件的生命周期中都存在，比如：你可以將一些持久的數據放到到背景頁中，當需要的時候可以從背景頁中得到。需要注意的是，使用了background.html,需要在manifest.json文件中要配置“background_page”：background.html。(下面的例子中會有介紹)

      而popup.html是單擊chrome瀏覽器右上角任務欄中或者是地址欄的插件圖標時彈出的頁面，假如你有單擊圖標彈出氣泡提示的需求，就可以在popup.html上下功夫。同樣使用了popup.html就需要在manifest.json文件中要配置：

"browser_action": {
    "default_icon": "images/icon19.png", // optional 
    "default_title": "Google Mail",      // optional; shown in tooltip 
    "default_popup": "popup.html"        // optional 
  },

 下面的例子中會詳細的介紹

 2.3js文件 

      Js文件在插件中作用也很大，一般我們會將html中的js代碼放到專門的js文件中，而在html中引入。有時當需要去操作頁面時也是將寫好的js文件注入到對應的標簽頁面。

使用了js文件，在manifest.json文件中也要配置鍵值，這個我在開發插件的過程中用到的比較少。詳細的可以參考chrome應用開發文檔。

2.4images文件

     Image文件夾中存放的是插件的圖片資源，由於chrome插件在不同的地方會顯示不同分辨率的圖標，因此在image文件夾下會存放不同分辨率的圖標，一般來說有16*16、48*48、128*128三種分辨率。

     在manifest.json文件中要做如下配置：

"icons": {

         "16": "images/menu_logo.png",

         "48": "images/extension_logo.png",

         "128": "images/install_logo.png"

        }

2.5_locales國際化

     為了國際化您的擴展,您需要把所有用戶可見字符串保存在文件名為messages.json的文件里。每當你本地化您的擴展時，您需要在_locales/localeCode下增加這個messages.json文件，localeCode 是一個形如en代表英語的編碼。

      下面是一個支持英語(en)、西班牙語(es)和韓語(ko)的國際化擴展文件層次結構圖。

      在messages.json文件中定義的結構如下：

{

  "name": {

         "message": "XLFastPass Addin"

  },

    "description": {

    "message": "一鍵保存精彩網頁，多終端同步，永久珍藏"

  },

         "title": {

    "message": "單擊這里將網頁保存到快傳客戶端"

  }

}

     在manifest.json和CSS文件中，像下圖一樣引用一個字符串：__MSG_messagename__

     在您的擴展JavaScript程序中，像下圖一樣引用一個字符串： chrome.i18n.getMessage("messagename")

重要提示:如果一個擴展有_locales目錄，那么manifest文件必須定義"default_locale"字段內容。

2.6NPAPI插件

     使用HTML和JavaScript開發新擴展是十分容易的事情，不過如果你想在擴展中重用已經開發完成的代碼和功能，你可以通過使用NPAPI插件到達目的。NPAPI插件使JavaScript代碼能夠調用本地二進制代碼，比如dll文件。

     使用NPAPI，你需要在擴展的manifest.json文件中加入一個節，描述如何找到你的插件，以及其他一些信息，:

{

  "name": "My extension",

  ...

  "plugins": [

    { "path": "content_plugin.dll", "public": true },

    { "path": "extension_plugin.dll" }

  ],

  ...

}

    創建一個HTML文件，mime-type為：application/x-my-extension" ，用於加載你的插件。

<embed type="application/x-my-extension" id="pluginId">

<script>

  var plugin = document.getElementById("pluginId");

  var result = plugin.myPluginMethod();  // call a method in your plugin

  console.log("my plugin returned: " + result);

</script>

   </embed>

   這樣在html中就可以調用dll中定義的方法了。

 

3.插件安裝和卸載

3.1.插件安裝

chrome插件安裝大致可以分為兩種：靜默安裝和拉起瀏覽器安裝。

(1)靜默安裝

      靜默安裝也就是通過寫注冊表安裝，個人覺得Google對這種方式支持的不是太好，因此使用這種方式會造成很多問題。

      首先寫注冊表安裝的格式如下：

      在HKEY_LOCAL_MACHINE\SOFTWARE\Google\Chrome\Extensions\下建立一個以插件的id為名字的鍵值。然后創建兩個分別以"path" 和 "version"命名的字符串類型數據項,設置該擴展的位置和版本。如:

path: xl_plugin_chrome.crx

version: 1.0

采用靜默安裝遇到的問題及解決方法如下：

1. 第一次安裝時如果有打開的chrome瀏覽器(或者是默認chrome瀏覽器在后台運行)，會出現安裝不上的情況，需要將chrome瀏覽器重啟才能安裝插件。
2. 覆蓋安裝的時候會出現安裝不上的情況，需要在覆蓋安裝之前將chrome插件已有的配置等清理干凈，這樣覆蓋安裝就能成功。
3. 寫入注冊表的version一定要和manifest.json文件中配置的一樣，不一樣會造成安裝失敗。
4. 在寫注冊表安裝之后第二次重啟chrome瀏覽器，在右上角會彈出一個“某某插件已安裝”的提示，讓你確定。這里要用到插件的name，假如是中文的話會出現亂碼，這個問題我也沒有解決，不過暫時用英文代替吧。

  （2）拉起瀏覽器安裝

      拉起瀏覽器安裝的效果和將crx拖到chrome瀏覽器的安裝效果一樣，個人感覺這是Google提倡的安裝方式，所以采用這種方式不會出現什么問題。但是這種方式可能用戶體驗會差一些，因為安裝過程中還需要去拉起瀏覽器。

 （3）版本差異化

     由於chrome瀏覽器發展很快，所以出現了非常多的版本，他們對插件的影響如下：

     1.chrome瀏覽器從4.0及以上版本才支持插件，因此3.0及以下版本安裝是不成功的；

     2.chrome瀏覽器從21.0.1180.80m 版本開始要求必須將crx文件拖到“擴展程序”界面才可以安裝(如下圖所示)，因此拉起瀏覽器安裝方式不可行，只能用靜默安裝的方式。

    

3.2卸載插件

     卸載插件的方式有兩種，其實和安裝對應，一種是直接在chrome://chrome/extensions/頁面切換到開發者模式進行卸載，一種是采用清理安裝文件等的方式。

（1）清理插件安裝文件、注冊表鍵值

    這種方式需要清理三個地方的內容：

     1. 清理掉注冊表中key為插件id的項；

     2.將C:\Documents and Settings\admin\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions安裝目錄下的對應插件id名字的安裝文件夾清除；

     3.將C:\Documents and Settings\admin\Local Settings\Application Data\Google\Chrome\User Data\Default\ Preferences文件中的對應的插件id名字相關的項清理掉；

      在完成上面的三個清理過程之后還需要注意，在卸載的過程中假如chrome瀏覽器開着，再打開一個chrome瀏覽器就會在右上角出現一個白色的框(其實是圖標不見了)，插件還可以使用。解決方法是重啟chrome瀏覽器。

（2）在chrome://chrome/extensions/頁面卸載

     這種卸載方式不會遇到太多的問題，也是Google建議的方式。

 

4.chrome插件打包

      chrome插件都是以crx文件的形式發布的。在chrome://chrome/extensions/頁面對插件進行打包

      打包的時候會用到一個pem結尾的密鑰文件，這個要保管好，后續版本的插件打包都用這個密鑰，這樣插件的id就不會發生變化。

      Chrome插件的id也要備份一下，方便后面使用：

      注意：打包時的插件文件要放到硬盤的根目錄，然后密鑰也要放到同一根目錄下，這樣才能正確的生成crx文件，否則crx文件會出現不能安裝的情況。

5.詳細舉例(以迅雷快傳chrome插件為例)

4.1.manifest.json文件

{

    "default_locale": "zh_CN",

    "name": "__MSG_name__",

    "description": "__MSG_description__",

    "version": "1.0.2",

    "icons": {

       "16": "images/menu_logo.png",

       "48": "images/extension_logo.png",

       "128": "images/install_logo.png"

    },

    /*插件動作配置*/

    "browser_action": {

       "default_icon": "images/extension_logo.png",

       /*圖標上的懸浮字*/"default_title": "__MSG_title__"

    },

    /*background_page是一個和插件同生命周期的一個腳本，用來它管理一個任務和一些狀態*/

    "background_page": "background.html",

    "permissions":

    ["notifications",

    "background",

    "<all_urls>",

    "tabs"],

    "plugins":

    [{

       "path": "npxunlei.dll",

       "public": true

    }]

}

 

4.2.background.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

 <embed id="np_xunlei_plugin" type="application/np_xunlei_plugin" hidden="true">

      <SCRIPT LANGUAGE="JavaScript">

       

       /*  var notification = webkitNotifications.createNotification(

           'images/menu_logo.png',  // icon url - can be relative

           'Hello!',  // notification title

           'Lorem ipsum...'  // notification body text

           );

           notification.show();

       */

           chrome.browserAction.onClicked.addListener(function(tab) {

             var xl_plugin =document.getElementById('np_xunlei_plugin');

            

             var url = tab.url;

             var urlTitle = tab.title;

              //alert("url== "+url);

              //alert("urlTitle=="+urlTitle);

             /*調用C++程序的方法 url_image 是Base64位的截圖data*/

             chrome.tabs.captureVisibleTab(null, function(img) {

             /*將Base64 image保存到本地*/

             xl_plugin.SaveToFastPassPlugin(url,urlTitle,img);

             });

           });

 

     </SCRIPT>     

  </embed>

 </HEAD>

 <BODY>

 

 </BODY>

</HTML>

 

4.3. _locales文件

_locales/zh_CN/message.json:

{

  "name": {

    "message": "XLFastPass Addin"

  },

    "description": {

    "message": "一鍵保存精彩網頁，多終端同步，永久珍藏"

  },

    "title": {

    "message": "單擊這里將網頁保存到快傳客戶端"

  }

}

_locales/zh_TW/message.json:

{

  "name": {

    "message": "XLFastPass Addin"

  },

    "description": {

    "message": "一鍵保存精彩網頁，多終端同步，永久珍藏"

  },

    "title": {

    "message": "單擊這里將網頁保存到快傳客戶端"

  }

}

 

4.4.images文件

在images文件夾下放3個不同分辨率的圖標。

4.5.npxunlei.dll

這里的dll是為了拉起快傳客戶端並將網頁的截圖保存到本地然后通過快傳客戶端上傳到服務器用的，大家可以根據自己的需要來實現dll文件。