Chrome插件開(kāi)發(fā)之一:

http://gdfans.net/?p=14

搭建基本結(jié)構(gòu) 作者：cmdbuf 發(fā)布時(shí)間：2010年05月28日 發(fā)表評(píng)論 (6) 4閱讀評(píng)論

歡迎喜愛(ài)Chrome的谷友進(jìn)入Chrome插件開(kāi)發(fā)的世界！ 你很幸運(yùn)，因?yàn)镃hrome插件開(kāi)發(fā)是如此簡(jiǎn)單，你不需要明白什么是ActiveX，不需要知道什么叫COM，嗯，讓他們一邊涼快去吧，這里只有HTML & Javascript，這里是互聯(lián)網(wǎng)的世界！ 首先，會(huì)英文的同學(xué)請(qǐng)瀏覽一下官方開(kāi)發(fā)文檔～： http://code.google.com/chrome/extensions/getstarted.html 本系列博文主要分享開(kāi)發(fā)重點(diǎn)，具體細(xì)節(jié)不一一贅述（PS：若無(wú)法訪問(wèn)，請(qǐng)f-a-n, q-i-a-n-g……） 1. 文件列表 本文引用項(xiàng)目 urlcmt 作為開(kāi)發(fā)示例（urlcmt是一個(gè)可以對(duì)任意網(wǎng)頁(yè)進(jìn)行評(píng)論的Chrome插件，你可以 下載源代碼，或 安裝此插件），為了讓插件正常工作，至少需要這幾個(gè)文件： 它們的作用分別是： icon.png: 插件工具欄圖標(biāo) manifest.json: 控制整個(gè)插件行為的配置文件 popup.html: 點(diǎn)擊插件圖標(biāo)后彈出的窗口，是插件的主界面 如果希望插件具有更加合理的結(jié)構(gòu)和功能，則還可以有以下文件： 他們的作用分別是： imgs: 存放插件界面圖片 background.html: 在此運(yùn)行的代碼不會(huì)因?yàn)閜opup.html窗口消失而停止運(yùn)行 icon_128.png: 在插件描述中作為插件的Logo main.css: 插件界面元件的樣式表 main.js: 插件中可以使用的js函數(shù) 2. 文件說(shuō)明 manifest.json 為整個(gè)插件的主控文件，基本功能描述如下： 01 { 02 "name": "urlcmt", 03 "version": "1.0", 04 "description": "網(wǎng)頁(yè)評(píng)論 Comment the web !", 05 "default_locale": "zh_CN", 06 "browser_action": { 07 "default_icon": "icon.png", 08 "popup": "popup.html" 09 }, 10 "icons": { 11 "128": "icon_128.png" 12 }, 13 "permissions": [ 14 "tabs", 15 "http://api.gdfans.net/" 16 ] 17 } 其中： 第2行: 所有代碼思想的核心，它就是插件的名稱！ 第3行: 插件版本，發(fā)布插件時(shí)會(huì)生成一串密文，那時(shí)會(huì)用到 第4行: 描述信息，會(huì)顯示在插件屬性里 第5行: 默認(rèn)編碼為中文 第7行: 指定插件圖標(biāo)的路徑 第8行: 指定 popup.html 文件的路徑 第11行: 指定 128 像素大小的圖標(biāo)的路徑 第14行: 此權(quán)限支持讀取標(biāo)簽（tab）中的信息 第15行: 此權(quán)限支持向 http://api.gdfans.net/ 發(fā)送 Ajax 請(qǐng)求 popop.html 為整個(gè)插件的界面，代碼如下： 01 02 03 04 06 07 08

09

10 17

18

19 這里注意： 第1行: 加上這個(gè)以后，顯示插件界面時(shí)，不會(huì)在底部出現(xiàn)一大片空白區(qū)域 其余都和普通 web 頁(yè)面開(kāi)發(fā)相同，空的 div 供 Ajax 填充從服務(wù)端獲取的數(shù)據(jù) 3. 實(shí)現(xiàn)功能 – 插件初始化 有了 manifest.json 和 popup.html，就可以實(shí)現(xiàn)最基本的 hello world 的功能了，接下來(lái)需要為插件增加其它功能，這些功能可以用 Javascript & Ajax 實(shí)現(xiàn)，對(duì)此項(xiàng)技術(shù)不太熟悉的同學(xué)，請(qǐng) 點(diǎn)擊這里 查閱 w3c school 里的教程。 這些 Javascript & Ajax 代碼可以寫(xiě)在 main.js 中，因?yàn)椴粌H popup.html 要用到，后續(xù)要介紹的 background.html 中也要用到，所以為了重用起見(jiàn)，還是放在單獨(dú)的文件里比較好。main.js 中可以包含一個(gè) init() 函數(shù)，用以進(jìn)行插件的初始化工作 1 function init() 2 { 3 // 隱藏編寫(xiě)評(píng)論的表單，以增大頁(yè)面的可用區(qū)域 4 hide_submit_form(); 5 // 從服務(wù)端獲取當(dāng)前網(wǎng)頁(yè)的評(píng)論數(shù)據(jù)，并顯示在界面上 6 refresh_cmt_cnt(1); 7 }; 然后在 popup.html 的 body 標(biāo)簽中，加上 1 即可。 4. 實(shí)現(xiàn)功能 – 調(diào)用 Chrome API Chrome為插件提供了可以通過(guò) Javascript 調(diào)用的 API，在插件的 Js 代碼可以直接使用，例如想獲取當(dāng)前標(biāo)簽中的 URL 地址，并向服務(wù)端發(fā)送 Ajax 請(qǐng)求獲取這個(gè) URL 對(duì)應(yīng)的評(píng)論信息，可以這么寫(xiě)： 01 function refresh_cmt_cnt(page_no) 02 { 03 // 創(chuàng)建 Ajax 請(qǐng)求對(duì)象 04 var xhr = new XMLHttpRequest(); 05 06 // 使用Chrome提供的tab接口獲取當(dāng)前選中的tab的信息 07 chrome.tabs.getSelected(null, function(tab) { 08 // 當(dāng) getSelected 函數(shù)執(zhí)行成功以后會(huì)執(zhí)行到這里 09 var cmt_cnt_obj = document.getElementById("cmt_cnt"); 10 11 // 構(gòu)造 POST 數(shù)據(jù)，可以通過(guò) tab.url 來(lái)獲取標(biāo)簽的 URL 地址 12 // encodeURIComponent 函數(shù)用來(lái)轉(zhuǎn)義特殊字符以免發(fā)生沖突 13 // 在服務(wù)端可以用 PHP 函數(shù) urldecode 再轉(zhuǎn)義回來(lái) 14 var post_data = 'cmd=1505&alt=json&url=' + 15 encodeURIComponent(tab.url) + 16 '&page_size=5&page_no=' + page_no; 17 18 // 指定提交的目標(biāo)地址 19 xhr.open("POST", "http://api.gdfans.net/", 20 true); 21 xhr.setRequestHeader("Content-Type", 22 "application/x-www-form-urlencoded"); 23 24 xhr.onreadystatechange = function() { 25 if (xhr.readyState == 4) { 26 // 當(dāng) Ajax 請(qǐng)求接收完所有返回?cái)?shù)據(jù)時(shí)會(huì)執(zhí)行到這里 27 // 因?yàn)榉?wù)端返回的數(shù)據(jù)為 json 格式，因此使用前需要解析以下 28 var resp = JSON.parse(xhr.responseText); 29 if (! resp) { 30 show_popmsg(null, '獲取數(shù)據(jù)失敗', 3); 31 return false; 32 } 33 34 // 解析完成以后就可以讀取返回的數(shù)據(jù)了 35 if (resp.result == 1501) { 36 clear_popmsg(); 37 return false; 38 } 39 40 // 將數(shù)據(jù)顯示在頁(yè)面上 41 for (var key in resp.data) { 42 htmltxt += resp.data[key]['cmt'] + ', '; 43 } 44 45 cmt_cnt_obj.innerHTML = htmltxt + "/n"; 46 } 47 } 48 49 // 發(fā)送 Ajax 請(qǐng)求，Ajax 執(zhí)行成功以后會(huì)調(diào)用上面介紹的代碼 50 xhr.send(post_data); 51 }); 52 53 return true; 54 } 至此一個(gè)可以從服務(wù)端獲取 URL 評(píng)論數(shù)據(jù)的簡(jiǎn)單插件就制作完成了，只要你熟悉 Web 開(kāi)發(fā)，開(kāi)發(fā) Chrome 插件就是小菜一碟～ 好了，休息一會(huì)，接下來(lái)的文章再繼續(xù)分享其它內(nèi)容 ^-^

總結(jié)

以上是生活随笔為你收集整理的Chrome插件开发之一: 搭建基本结构的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。