歡迎喜愛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 爲整個插件的主控文件，基本功能描述如下：
04 |
"description": "網頁評論 Comment the web !", |
05 |
"default_locale": "zh_CN", |
07 |
"default_icon": "icon.png", |
15 |
"http://api.gdfans.net/" |
其中：
- 第2行: 所有代碼思想的核心，它就是插件的名稱！
- 第3行: 插件版本，發佈插件時會生成一串密文，那時會用到
- 第4行: 描述信息，會顯示在插件屬性裏
- 第5行: 默認編碼爲中文
- 第7行: 指定插件圖標的路徑
- 第8行: 指定 popup.html 文件的路徑
- 第11行: 指定 128 像素大小的圖標的路徑
- 第14行: 此權限支持讀取標籤（tab）中的信息
- 第15行: 此權限支持向 http://api.gdfans.net/ 發送 Ajax 請求
popop.html 爲整個插件的界面，代碼如下：
02 |
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" /> |
03 |
<link rel="stylesheet" href="main.css" /> |
04 |
<script type="text/javascript" src="./url.js"></script> |
05 |
<script type="text/javascript" src="./main.js"></script> |
07 |
<body onload="init()"> |
08 |
<div id="pop_msg" class="align_center
colo_aaa valign_center"></div> |
09 |
<div class="submit_form align_center"> |
10 |
<form id="cmt_submit_form" onsubmit="submit_cmt();return
false;" action="#" method="POST"> |
11 |
<textarea rows="1" cols="6" id="cnt" class="align_left"onfocus="show_submit_form();" maxlength="200"></textarea> |
13 |
<div class="align_right"> |
14 |
<input type="submit" id="sbmt" value="submit"> |
18 |
<div id="cmt_cnt"></div> |
這裏注意：
- 第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() 函數，用以進行插件的初始化工作
然後在 popup.html 的 body 標籤中，加上
即可。
4. 實現功能 – 調用 Chrome API
Chrome爲插件提供了可以通過 Javascript 調用的 API，在插件的 Js 代碼可以直接使用，例如想獲取當前標籤中的 URL 地址，並向服務端發送 Ajax 請求獲取這個 URL 對應的評論信息，可以這麼寫：
01 |
function refresh_cmt_cnt(page_no) |
04 |
var xhr = new XMLHttpRequest(); |
07 |
chrome.tabs.getSelected(null, function(tab) { |
09 |
var cmt_cnt_obj = document.getElementById("cmt_cnt"); |
14 |
var post_data = 'cmd=1505&alt=json&url=' + |
15 |
encodeURIComponent(tab.url) + |
16 |
'&page_size=5&page_no=' + page_no; |
21 |
xhr.setRequestHeader("Content-Type", |
22 |
"application/x-www-form-urlencoded"); |
24 |
xhr.onreadystatechange = function() { |
25 |
if (xhr.readyState == 4) { |
28 |
var resp = JSON.parse(xhr.responseText); |
30 |
show_popmsg(null, '獲取數據失敗', 3); |
35 |
if (resp.result == 1501) { |
41 |
for (var key in resp.data) { |
42 |
htmltxt += resp.data[key]['cmt'] + ', '; |
45 |
cmt_cnt_obj.innerHTML = htmltxt + "/n"; |
至此一個可以從服務端獲取 URL 評論數據的簡單插件就製作完成了，只要你熟悉 Web 開發，開發 Chrome 插件就是小菜一碟～
