生活随笔
收集整理的這篇文章主要介紹了
基于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"??οnclick="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. ????? ?????console.log("Getting?settings"); ??????????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;?????????} ?????????return; ?????} ?????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"); ?????console.debug(settings); ?????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); ?????????return; ?????} ????? ?????if(settings['displayAnotherPageInstead']=="1") ?????{?????????console.debug("CS:?Redirecting"); ?????????window.location?=?settings['pageToDisplayURL']; ?????????return; ?????} ?????if(settings['displayAnotherPageInstead']=="2") ?????{?????????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
轉載于:https://blog.51cto.com/phinecos/368230
總結
以上是生活随笔為你收集整理的基于Chrome的扩展开发（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
