基于Chrome的擴充開發（二）

Chrome啟動時預設的效果如下圖所示，有”most visited”,”Searches”,”Recent bookmarks”,”recently closed”這幾個區域，但每次打開标簽都是這樣的頁面，相信讓很多人都感到煩躁。

本文要介紹的擴充名為Custom New Tab，可以從這裡直接下載下傳安裝包：Custom New tab。這個擴充實作的功能是讓使用者可以對标簽頁打開後的顯示效果進行自定義，實作的具體功能如下：

1、隐藏/顯示最熱門網頁略縮圖

2、隐藏/顯示新标簽頁上的搜尋欄

3、隐藏/顯示最近的書簽

4、隐藏/顯示最近關閉的标簽

5、将新标簽頁重定向到任意頁面

6、在新标簽頁中嵌入任意頁面

具體效果如下面兩圖所示：

    好了，現在來看看這個擴充究竟是如何實作的，首先需要進行準備工作，你需要使用Chrome 2.0.180.0或更新版本

      1）首先建立一個檔案夾，例如c:/ myextension，在這個目錄下建立一個文本檔案,命名為manifest.json,在其中放入下面幾句：

複制代碼

{

  "format_version": 1,

  "id": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2",

  "version": "0.2",

  "name": "CustomNewTab",

  "description": "Customize your new tab page.",

  "toolstrips": [

    "CustomNewTab_toolstrip.html"

  ],

  "content_scripts": [

    {

      "js": ["CustomNewTab.js"], 

      "matches": ["chrome://newtab/*"],

      "run_at": "document_start"

    }

  ]

}

其中各個參數含義如下：

format_version（必需的）：向Chrome指明擴充所使用的清單格式版本。目前隻有一個格式版本，是以設為1.

id(必需的)：擴充的ID号（唯一的）。

version（必需的）:擴充的版本号。可以使用任意點分格式的數字串

name（必需的）：擴充的名稱。

description（可選的）：擴充的描述資訊

toolstrips: 在此指定的頁面将加入到Chrome工具欄

content_scripts： 此處指定的内容在Chrome的content中加載，這裡指定了加載的js檔案，以及待比對的url模式，運作的時刻應該是文檔打開時。

2)先來看要加入工具欄的頁面CustomNewTab_toolstrip.html，它隻有一個div，指明類型是toolstrip-button，也就是會作為工具欄按鈕顯示，并且指定了工具欄按鈕圖示。

<div id="button"  onclick="window.open('dashboard.html')" class="toolstrip-button">

  <img id="icon" src="ui/icon.png" />

</div>

再來看其中的JavaScript代碼，settings數組中儲存了新标簽頁中應該顯示區域的預設設定。

var settings =    {

                    "displayAnotherPageInstead": "0",

                    "pageToDisplayURL" : "",

                    "hideMostVisited": "false",

                    "hideSearches" : "false",

                    "hideRecentBookmarks" : "false",

                    "hideRecentlyClosedTabs" : "false"

                };

這裡為Chrome的connect事件注冊了一個監聽器，當擴充加載進來時會首先觸發此事件，并且會在一個端口中進行監聽，于是這裡為此端口注冊了一個監聽器來監聽可能到來的消息。

chrome.self.onConnect.addListener(handleConnect);// 加入一個監聽器

function handleConnect(port) 

    console.log("Handling connect");

    myport = port;

    myport.onMessage.addListener(handleMessage);

    console.log("Done handling connect");

在端口的事件處理函數中，首先确認消息類型是否是getsettings，若是，則使用Ajax技術讀取擴充根目錄下的config.xml配置檔案，并傳回給請求者。

function handleMessage(message)

    console.log("Handling message");

    if(message != "getsettings")

        console.error("Not getsettings");

        return;

    req = new XMLHttpRequest();

    req.onload = loadconfig;

    console.log("Getting settings");

    //從config.xml檔案中讀取配置資訊

    req.open("GET",

             "config.xml",

             false);

    req.send(null);

    console.log("Done handling message");

function loadconfig()

{//加載配置資訊

    if( this.readyState == 4 ) 

        console.log("Loading config");

        var xmlDoc = req.responseXML;

        bindSettings(xmlDoc);

        console.log("Done loading config");

        console.log("Sending settings");

        console.log(settings);

        myport.postMessage(settings);//向請求者應答送出配置資訊

        console.log("Done sending settings");

3)再來看頁面content加載時加載進來的Javascript檔案CustomNewTab.js。

它使用一個端口連接配接到擴充，在此端口上注冊一個監聽器來處理從擴充發送過來的消息，在初始化時它會利用此端口向擴充發送一個消息去通知擴充讀取本地的配置檔案。

function init()

 {

    var theBody = document.body;

    if(theBody == null)

    {//頁面還未加載完畢

        console.debug("CS: Body not loaded yet");

        if(currentWait < maxWaitTime)

        {

            currentWait++;

            window.setTimeout(init,1);

        } 

        else 

            currentWait=0;//重新歸零

        }

    console.debug("CS: Hiding body");

    theBody.style.display = "none";

    console.debug("CS: Sending message");

    myport.postMessage("getsettings");//請求配置資訊

    console.debug("CS: Done sending message");

擴充發送過來的就是讀取到的配置資訊，然後使用這些配置資訊來對新标簽頁進行區域顯示的設定。

var myport = chrome.extension.connect();

myport.onMessage.addListener(handleMessage);//加入監聽者

function handleMessage(settings) 

    console.debug("CS: Handling received settings");

    console.debug(settings);

    console.debug("CS: Start customizing");

    customizeNewTab(settings);//使用讀取到的配置資訊設定頁面

    console.debug("CS: Done customizing");

    if(settings["displayAnotherPageInstead"] != "1")

        showBody();

    console.debug("CS: Done handling received settings");

對新标簽頁面的顯示區域處理就非常簡單了，就是DOM進行處理即可

function customizeNewTab(settings) 

    if(document.body == null)

        console.debug("CS: Cannot customize, no body");

        window.setTimeout(customizeNewTab,1,settings);

    if(settings['displayAnotherPageInstead']=="1")

    {//重定向到指定頁面，比如www.google.com

        console.debug("CS: Redirecting");

        window.location = settings['pageToDisplayURL'];

    if(settings['displayAnotherPageInstead']=="2")

    {//把新打開的頁面作為一個frame加入

        console.debug("CS: Adding IFrame");

        addPageIFrame(settings['pageToDisplayURL']);

    if(settings['hideMostVisited'] == "true")

        hideDiv("mostvisitedsection");

    if(settings['hideSearches'] == "true")

        hideDiv("searches");

    if(settings['hideRecentBookmarks'] == "true")

        hideDiv("recentlyBookmarked");

    if(settings['hideRecentlyClosedTabs'] == "true")

        hideDiv("recentlyClosedTabs");

}  

4）此擴充還提供了一個圖形化的配置頁面，但實際意義不大，因為它隻是産生配置檔案資訊，最終還是需要手工去修改擴充根目錄下的config.xml檔案，仍然需要進一步改進

5)最後，将上述檔案打包為Crx安裝包，請參考本系列的上一篇文章《基于Chrome的擴充開發（一）》，

      6)輸入下列URL:chrome://extensions/，将會列出所有已經安裝的擴充，同時還會顯示擴充系統啟動時發生的錯誤資訊。

7)google官方還放出了兩個擴充示例，但是由于官網http://dev.chromium.org/好像被wall掉了，是以無法得到那兩個示例來研究。

參考資料

1，Chrome實用擴充推薦:自定義新标簽頁

2，Chrome Extension HOWTO

本文轉自Phinecos(洞庭散人)部落格園部落格，原文連結：http://www.cnblogs.com/phinecos/archive/2009/05/18/1459529.html，如需轉載請自行聯系原作者