|
Chrome擴(kuò)展程序開(kāi)發(fā)調(diào)試簡(jiǎn)明教程 一、加載擴(kuò)展程序這里以加載一個(gè)已有的Chrome擴(kuò)展程序?yàn)槔?/div> 把已有的擴(kuò)展程序（.crx文件，點(diǎn)擊安裝擴(kuò)展程序的確定按鈕前可以拷貝保存）后綴改為.zip，就可以把它解壓縮到某個(gè)目錄，比如Beyond Feeds Flood。 參見(jiàn)下圖，點(diǎn)擊“載入正在開(kāi)發(fā)的擴(kuò)展程序”，瀏覽到剛才的目錄，點(diǎn)擊確定，擴(kuò)展程序就加載進(jìn)去了（跟安裝的基本一樣）。  二、調(diào)試擴(kuò)展程序擴(kuò)展程序安裝后是這個(gè)樣子：  如果是調(diào)試background.html，則插件下方“檢查活動(dòng)視圖”中就有，點(diǎn)擊它就可以調(diào)試了。 開(kāi)發(fā)中，經(jīng)常要調(diào)試的是popup.html，它不是總處于活動(dòng)中的，需要按如下方式操作： 1、確定popup.html的網(wǎng)址。（把下面網(wǎng)址中的id部分替換為你的擴(kuò)展程序id即可） chrome-extension://clobmlkkihhfbohnabllkobmmmdhkcmo/popup.html 2、在瀏覽器中打開(kāi)該網(wǎng)址。 打開(kāi)后就可以看到popup.html頁(yè)面也在活動(dòng)視圖中了：  3、點(diǎn)擊上圖中的popup.html，就打開(kāi)了調(diào)試器。 如果有錯(cuò)誤信息，點(diǎn)擊console按鈕就可以看到了。  點(diǎn)擊錯(cuò)誤信息中的位置鏈接，可以達(dá)到出錯(cuò)位置：  這里的錯(cuò)誤信息很明顯，是reader1沒(méi)有定義。 Chrome的Javascript調(diào)試器非常強(qiáng)大，點(diǎn)擊左邊的行號(hào)可以設(shè)置斷點(diǎn)，可以單步跟蹤，鼠標(biāo)放在變量上可以查看變量的值。  注： 1、調(diào)試中，設(shè)置了斷點(diǎn)，有時(shí)候需要考慮采用一些措施，才會(huì)運(yùn)行到那里，這需要根據(jù)你調(diào)試的功能以及如何觸發(fā)該功能的知識(shí)來(lái)確定。 2、Google Web Toolkit是很好的擴(kuò)展程序調(diào)試、優(yōu)化工具，感興趣的同學(xué)可參考：http://code.google.com/intl/zh-CN/webtoolkit/speedtracer/get-started.html 三、編寫(xiě)擴(kuò)展程序這篇文章不是完整的擴(kuò)展程序編寫(xiě)指南，它只是介紹如何利用已有的編程知識(shí)來(lái)編寫(xiě)Chrome擴(kuò)展程序，所以編寫(xiě)擴(kuò)展程序這個(gè)章節(jié)排的比較靠后。 簡(jiǎn)單說(shuō)來(lái)，Chrome擴(kuò)展程序編寫(xiě)主要用到的是Javascript、Ajax（基于javascript的異步通信機(jī)制）、css、html、DOM（以操縱對(duì)象的方式控制html頁(yè)面的內(nèi)容）。 這些知識(shí)可以從http://www.w3school.com.cn/ 學(xué)來(lái)，遇到問(wèn)題多問(wèn)Google，基本都能解決。 這里主要根據(jù)我的經(jīng)驗(yàn)寫(xiě)一點(diǎn)擴(kuò)展開(kāi)發(fā)中可能用到的知識(shí)： （更多詳細(xì)信息請(qǐng)參考Chrome擴(kuò)展程序開(kāi)發(fā)手冊(cè) http://code.google.com/chrome/extensions/getstarted.html） 1、處于活動(dòng)狀態(tài)的頁(yè)面的函數(shù)，別的頁(yè)面可以調(diào)用。典型的就是通過(guò)下面方式調(diào)用background頁(yè)面的函數(shù)： chrome.extension.getBackgroundPage().markItemsAsRead(itemsToMark); 2、javascript的賦值，除了基本類(lèi)型、字符串以外，都是引用賦值。 3、涉及數(shù)據(jù)存儲(chǔ)的，可以保存到localStorage中（據(jù)說(shuō)云中還有個(gè)數(shù)據(jù)庫(kù)也可以用來(lái)保存數(shù)據(jù)）。 4、網(wǎng)上有很多封裝得很好的javascript庫(kù)，使用它們有可能能減少工作量，比如我開(kāi)發(fā)Beyond Feeds Flood的時(shí)候，就用到了Date的一個(gè)封裝庫(kù)。 四、發(fā)布擴(kuò)展程序一般來(lái)說(shuō)，有如下兩種發(fā)布方式： 1、打包為crx文件發(fā)布。 命令行執(zhí)行如下命令即可： chrome.exe --pack-extension="D:\Projects\Beyond Feeds Flood" 執(zhí)行完之后，就在Beyond Feeds Flood目錄平級(jí)的地方生成Beyond Feeds Flood.crx和私鑰文件Beyond Feeds Flood.pem，私鑰文件用于升級(jí)軟件時(shí)使用。 前面提到的擴(kuò)展程序id，應(yīng)該就是根據(jù)私鑰文件生成的。 重新發(fā)布時(shí)使用的命令行是： chrome.exe --pack-extension="D:\Projects\Beyond Feeds Flood" --pack-extension-key=“D:\Projects\Beyond Feeds Flood.pem” 生成的crx用于發(fā)布，私鑰文件自己保存。 2、上傳到Chrome Extension Gallary。 注冊(cè)之后就可以上傳，上傳時(shí)是傳的擴(kuò)展程序目錄所有文件打包成的一個(gè).zip文件（注意不是.crx）。 上傳中，不需要用到pem文件。 注： （1）有時(shí)候Chrome上傳不成功，用IE能上傳成功。 （2）至少需要上傳一張截圖，但截圖大小嚴(yán)格限制為400*275，400為寬（雖然說(shuō)是不嚴(yán)格），所以上傳時(shí)用工具先調(diào)整好圖片大小。 |
|
|
