本文章引自 ：http://gdfans.net/?p=14&cpage=1#comment-695
歡迎喜愛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外掛程式，你可以 下載原始碼，或 安裝此外掛程式），為了讓外掛程式正常工作，至少需要這幾個檔案：
它們的作用分別是：
如果希望外掛程式具有更加合理的結構和功能，則還可以有以下檔案：
他們的作用分別是：
manifest.json 為整個外掛程式的主控檔案，準系統描述如下：
{<br /> "name": "urlcmt",<br /> "version": "1.0",<br /> "description": "網頁評論 Comment the web !",<br /> "default_locale": "zh_CN",<br /> "browser_action": {<br /> "default_icon": "icon.png",<br /> "popup": "popup.html"<br /> },<br /> "icons": {<br /> "128": "icon_128.png"<br /> },<br /> "permissions": [<br /> "tabs",<br /> "http://api.gdfans.net/"<br /> ]<br />}<br />其中：
popop.html 為整個外掛程式的介面，代碼如下：
<!DOCTYPE html><br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /><link rel="stylesheet" href="main.css" mce_href="main.css" /><br /><mce:script type="text/javascript" src="./url.js" mce_src="url.js"></mce:script><br /><mce:script type="text/javascript" src="./main.js" mce_src="main.js"></mce:script><br /><body onload="init()"><br /> <div id="pop_msg" class="align_center colo_aaa valign_center"></div><br /> <div class="submit_form align_center"><br /> <form id="cmt_submit_form" onsubmit="submit_cmt();return false;" action="#" method="POST"><br /> <textarea rows="1" cols="6" id="cnt" class="align_left" onfocus="show_submit_form();" maxlength="200">這裡注意：
有了 manifest.json 和 popup.html，就可以實現最基本的 hello world 的功能了，接下來需要為外掛程式增加其它功能，這些功能可以用 Javascript & Ajax 實現，對此項技術不太熟悉的同學，請 點擊這裡 查閱 w3c school 裡的教程。
這些 Javascript & Ajax 代碼可以寫在 main.js 中，因為不僅 popup.html 要用到，後續要介紹的 background.html 中也要用到，所以為了重用起見，還是放在單獨的檔案裡比較好。main.js 中可以包含一個 init() 函數，用以進行外掛程式的初始化工作
function init()<br />{<br /> // 隱藏編寫評論的表單，以增大頁面的可用性區域域<br /> hide_submit_form();<br /> // 從服務端擷取當前網頁的評論資料，並顯示在介面上<br /> refresh_cmt_cnt(1);<br />};<br />然後在 popup.html 的 body 標籤中，加上
<body onload="init()">即可。
4. 實現功能 – 調用 Chrome APIChrome為外掛程式提供了可以通過 Javascript 調用的 API，在外掛程式的 Js 代碼可以直接使用，例如想擷取當前標籤中的 URL 地址，並向服務端發送 Ajax 請求擷取這個 URL 對應的評論資訊，可以這麼寫：
function refresh_cmt_cnt(page_no)<br />{<br /> // 建立 Ajax 請求對象<br /> var xhr = new XMLHttpRequest();<br /> // 使用Chrome提供的tab介面擷取當前選中的tab的資訊<br /> chrome.tabs.getSelected(null, function(tab) {<br /> // 當 getSelected 函數執行成功以後會執行到這裡<br /> var cmt_cnt_obj = document.getElementById("cmt_cnt");<br /> // 構造 POST 資料，可以通過 tab.url 來擷取標籤的 URL 地址<br /> // encodeURIComponent 函數用來轉義特殊字元以免發生衝突<br /> // 在服務端可以用 PHP 函數 urldecode 再轉義回來<br /> var post_data = 'cmd=1505&alt=json&url=' +<br /> encodeURIComponent(tab.url) +<br /> '&page_size=5&page_no=' + page_no;<br /> // 指定提交的目標地址<br /> xhr.open("POST", "http://api.gdfans.net/",<br /> true);<br /> xhr.setRequestHeader("Content-Type",<br /> "application/x-www-form-urlencoded");<br /> xhr.onreadystatechange = function() {<br /> if (xhr.readyState == 4) {<br /> // 當 Ajax 請求接收完所有返回資料時會執行到這裡<br /> // 因為服務端返回的資料為 json 格式，因此使用前需要解析以下<br /> var resp = JSON.parse(xhr.responseText);<br /> if (! resp) {<br /> show_popmsg(null, '擷取資料失敗', 3);<br /> return false;<br /> }<br /> // 解析完成以後就可以讀取返回的資料了<br /> if (resp.result == 1501) {<br /> clear_popmsg();<br /> return false;<br /> }<br /> // 將資料顯示在頁面上<br /> for (var key in resp.data) {<br /> htmltxt += resp.data[key]['cmt'] + ', ';<br /> }<br /> cmt_cnt_obj.innerHTML = htmltxt + "/n";<br /> }<br /> }<br /> // 發送 Ajax 請求，Ajax 執行成功以後會調用上面介紹的代碼<br /> xhr.send(post_data);<br /> });<br /> return true;<br />}<br />至此一個可以從服務端擷取 URL 評論資料的簡單外掛程式就製作完成了，只要你熟悉 Web 開發，開發 Chrome 外掛程式就是小菜一碟～
好了，休息一會，接下來的文章再繼續分享其它內容 ^-^
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
