Chrome插件開發之一:

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

搭建基本結構 作者：cmdbuf 發布時間：2010年05月28日 發表評論 (6) 4閱讀評論

歡迎喜愛Chrome的谷友進入Chrome插件開發的世界！ 你很幸運，因為Chrome插件開發是如此簡單，你不需要明白什么是ActiveX，不需要知道什么叫COM，嗯，讓他們一邊涼快去吧，這里只有HTML & Javascript，這里是互聯網的世界！ 首先，會英文的同學請瀏覽一下官方開發文檔～： http://code.google.com/chrome/extensions/getstarted.html 本系列博文主要分享開發重點，具體細節不一一贅述（PS：若無法訪問，請f-a-n, q-i-a-n-g……） 1. 文件列表 本文引用項目 urlcmt 作為開發示例（urlcmt是一個可以對任意網頁進行評論的Chrome插件，你可以 下載源代碼，或 安裝此插件），為了讓插件正常工作，至少需要這幾個文件： 它們的作用分別是： icon.png: 插件工具欄圖標 manifest.json: 控制整個插件行為的配置文件 popup.html: 點擊插件圖標后彈出的窗口，是插件的主界面 如果希望插件具有更加合理的結構和功能，則還可以有以下文件： 他們的作用分別是： imgs: 存放插件界面圖片 background.html: 在此運行的代碼不會因為popup.html窗口消失而停止運行 icon_128.png: 在插件描述中作為插件的Logo main.css: 插件界面元件的樣式表 main.js: 插件中可以使用的js函數 2. 文件說明 manifest.json 為整個插件的主控文件，基本功能描述如下： 01 { 02 "name": "urlcmt", 03 "version": "1.0", 04 "description": "網頁評論 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行: 插件版本，發布插件時會生成一串密文，那時會用到 第4行: 描述信息，會顯示在插件屬性里 第5行: 默認編碼為中文 第7行: 指定插件圖標的路徑 第8行: 指定 popup.html 文件的路徑 第11行: 指定 128 像素大小的圖標的路徑 第14行: 此權限支持讀取標簽（tab）中的信息 第15行: 此權限支持向 http://api.gdfans.net/ 發送 Ajax 請求 popop.html 為整個插件的界面，代碼如下： 01 02 03 04 06 07 08

09

10 17

18

19 這里注意： 第1行: 加上這個以后，顯示插件界面時，不會在底部出現一大片空白區域 其余都和普通 web 頁面開發相同，空的 div 供 Ajax 填充從服務端獲取的數據 3. 實現功能 – 插件初始化 有了 manifest.json 和 popup.html，就可以實現最基本的 hello world 的功能了，接下來需要為插件增加其它功能，這些功能可以用 Javascript & Ajax 實現，對此項技術不太熟悉的同學，請 點擊這里 查閱 w3c school 里的教程。 這些 Javascript & Ajax 代碼可以寫在 main.js 中，因為不僅 popup.html 要用到，后續要介紹的 background.html 中也要用到，所以為了重用起見，還是放在單獨的文件里比較好。main.js 中可以包含一個 init() 函數，用以進行插件的初始化工作 1 function init() 2 { 3 // 隱藏編寫評論的表單，以增大頁面的可用區域 4 hide_submit_form(); 5 // 從服務端獲取當前網頁的評論數據，并顯示在界面上 6 refresh_cmt_cnt(1); 7 }; 然后在 popup.html 的 body 標簽中，加上 1 即可。 4. 實現功能 – 調用 Chrome API Chrome為插件提供了可以通過 Javascript 調用的 API，在插件的 Js 代碼可以直接使用，例如想獲取當前標簽中的 URL 地址，并向服務端發送 Ajax 請求獲取這個 URL 對應的評論信息，可以這么寫： 01 function refresh_cmt_cnt(page_no) 02 { 03 // 創建 Ajax 請求對象 04 var xhr = new XMLHttpRequest(); 05 06 // 使用Chrome提供的tab接口獲取當前選中的tab的信息 07 chrome.tabs.getSelected(null, function(tab) { 08 // 當 getSelected 函數執行成功以后會執行到這里 09 var cmt_cnt_obj = document.getElementById("cmt_cnt"); 10 11 // 構造 POST 數據，可以通過 tab.url 來獲取標簽的 URL 地址 12 // encodeURIComponent 函數用來轉義特殊字符以免發生沖突 13 // 在服務端可以用 PHP 函數 urldecode 再轉義回來 14 var post_data = 'cmd=1505&alt=json&url=' + 15 encodeURIComponent(tab.url) + 16 '&page_size=5&page_no=' + page_no; 17 18 // 指定提交的目標地址 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 // 當 Ajax 請求接收完所有返回數據時會執行到這里 27 // 因為服務端返回的數據為 json 格式，因此使用前需要解析以下 28 var resp = JSON.parse(xhr.responseText); 29 if (! resp) { 30 show_popmsg(null, '獲取數據失敗', 3); 31 return false; 32 } 33 34 // 解析完成以后就可以讀取返回的數據了 35 if (resp.result == 1501) { 36 clear_popmsg(); 37 return false; 38 } 39 40 // 將數據顯示在頁面上 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 // 發送 Ajax 請求，Ajax 執行成功以后會調用上面介紹的代碼 50 xhr.send(post_data); 51 }); 52 53 return true; 54 } 至此一個可以從服務端獲取 URL 評論數據的簡單插件就制作完成了，只要你熟悉 Web 開發，開發 Chrome 插件就是小菜一碟～ 好了，休息一會，接下來的文章再繼續分享其它內容 ^-^

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。