生活随笔
收集整理的這篇文章主要介紹了
基于Chrome的扩展开发（二）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Chrome啟動(dòng)時(shí)默認(rèn)的效果如下圖所示，有”most visited”,”Searches”,”Recent bookmarks”,”recently closed”這幾個(gè)區(qū)域，但每次打開標(biāo)簽都是這樣的頁面，相信讓很多人都感到煩躁。
本文要介紹的擴(kuò)展名為Custom New Tab，可以從這里直接下載安裝包：Custom New tab。這個(gè)擴(kuò)展實(shí)現(xiàn)的功能是讓用戶可以對標(biāo)簽頁打開后的顯示效果進(jìn)行自定義，實(shí)現(xiàn)的具體功能如下：
1、隱藏/顯示最熱門網(wǎng)頁略縮圖
2、隱藏/顯示新標(biāo)簽頁上的搜索欄
3、隱藏/顯示最近的書簽
4、隱藏/顯示最近關(guān)閉的標(biāo)簽
5、將新標(biāo)簽頁重定向到任意頁面
6、在新標(biāo)簽頁中嵌入任意頁面
具體效果如下面兩圖所示：
?
????好了，現(xiàn)在來看看這個(gè)擴(kuò)展究竟是如何實(shí)現(xiàn)的，首先需要進(jìn)行準(zhǔn)備工作，你需要使用Chrome 2.0.180.0或更新版本
????? 1）首先創(chuàng)建一個(gè)文件夾，例如c:/ myextension，在這個(gè)目錄下創(chuàng)建一個(gè)文本文件,命名為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"?????} ???] ?}? 中各個(gè)參數(shù)含義如下：
format_version（必需的）：向Chrome指明擴(kuò)展所使用的清單格式版本。目前只有一個(gè)格式版本，因此設(shè)為1.
id(必需的)：擴(kuò)展的ID號(hào)（唯一的）。
version（必需的）:擴(kuò)展的版本號(hào)。可以使用任意點(diǎn)分格式的數(shù)字串
name（必需的）：擴(kuò)展的名稱。
description（可選的）：擴(kuò)展的描述信息
toolstrips: 在此指定的頁面將加入到Chrome工具欄
content_scripts： 此處指定的內(nèi)容在Chrome的content中加載，這里指定了加載的js文件，以及待匹配的url模式，運(yùn)行的時(shí)刻應(yīng)該是文檔打開時(shí)。
?
2)先來看要加入工具欄的頁面CustomNewTab_toolstrip.html，它只有一個(gè)div，指明類型是toolstrip-button，也就是會(huì)作為工具欄按鈕顯示，并且指定了工具欄按鈕圖標(biāo)。
?
<div?id="button"??οnclick="window.open('dashboard.html')"?class="toolstrip-button"> ???<img?id="icon"?src="ui/icon.png"?/> ?</div> ? 再來看其中的JavaScript代碼，settings數(shù)組中保存了新標(biāo)簽頁中應(yīng)該顯示區(qū)域的默認(rèn)設(shè)置。
var?settings?=????{ ?????????????????????"displayAnotherPageInstead":?"0", ?????????????????????"pageToDisplayURL"?:?"", ?????????????????????"hideMostVisited":?"false", ?????????????????????"hideSearches"?:?"false", ?????????????????????"hideRecentBookmarks"?:?"false", ?????????????????????"hideRecentlyClosedTabs"?:?"false"?????????????????};? 這里為Chrome的connect事件注冊了一個(gè)監(jiān)聽器，當(dāng)擴(kuò)展加載進(jìn)來時(shí)會(huì)首先觸發(fā)此事件，并且會(huì)在一個(gè)端口中進(jìn)行監(jiān)聽，于是這里為此端口注冊了一個(gè)監(jiān)聽器來監(jiān)聽可能到來的消息。
chrome.self.onConnect.addListener(handleConnect);?function?handleConnect(port)? ?{ ??????console.log("Handling?connect"); ?????myport?=?port; ?????myport.onMessage.addListener(handleMessage); ?????console.log("Done?handling?connect"); ?}? 在端口的事件處理函數(shù)中，首先確認(rèn)消息類型是否是getsettings，若是，則使用Ajax技術(shù)讀取擴(kuò)展根目錄下的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加載時(shí)加載進(jìn)來的Javascript文件CustomNewTab.js。
它使用一個(gè)端口連接到擴(kuò)展，在此端口上注冊一個(gè)監(jiān)聽器來處理從擴(kuò)展發(fā)送過來的消息，在初始化時(shí)它會(huì)利用此端口向擴(kuò)展發(fā)送一個(gè)消息去通知擴(kuò)展讀取本地的配置文件。
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"); ?}? 擴(kuò)展發(fā)送過來的就是讀取到的配置信息，然后使用這些配置信息來對新標(biāo)簽頁進(jìn)行區(qū)域顯示的設(shè)置。
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"); ?}? 對新標(biāo)簽頁面的顯示區(qū)域處理就非常簡單了，就是DOM進(jìn)行處理即可
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）此擴(kuò)展還提供了一個(gè)圖形化的配置頁面，但實(shí)際意義不大，因?yàn)樗皇钱a(chǎn)生配置文件信息，最終還是需要手工去修改擴(kuò)展根目錄下的config.xml文件，仍然需要進(jìn)一步改進(jìn)
5)最后，將上述文件打包為Crx安裝包，請參考本系列的上一篇文章《基于Chrome的擴(kuò)展開發(fā)（一）》，
?? ?? 6)輸入下列URL:chrome://extensions/，將會(huì)列出所有已經(jīng)安裝的擴(kuò)展，同時(shí)還會(huì)顯示擴(kuò)展系統(tǒng)啟動(dòng)時(shí)發(fā)生的錯(cuò)誤信息。
?
7)google官方還放出了兩個(gè)擴(kuò)展示例，但是由于官網(wǎng)http://dev.chromium.org/好像被wall掉了，所以無法得到那兩個(gè)示例來研究。
?
參考資料
1，Chrome實(shí)用擴(kuò)展推薦:自定義新標(biāo)簽頁
2，Chrome Extension HOWTO
轉(zhuǎn)載于:https://blog.51cto.com/phinecos/368230
總結(jié)
以上是生活随笔為你收集整理的基于Chrome的扩展开发（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
