<a href="http://www.ituring.com.cn/article/60134">轉載：圖靈社群 : 閱讀 : 1.2 我的第一個Chrome擴充</a>
<a href="http://www.cnblogs.com/article/vote/60134"> </a>
我發現很多講解程式設計的書籍在前面會很詳細地講述相關的預備知識，而大多數讀者更希望馬上跟着上手進行實踐。沒錯，人們總是對基礎知識很排斥，這也就是為什麼在教育行業開始推崇自頂向下的教材設計方案了，先讓讀者看到一個更接近表面的東西，之後再慢慢深入講其内在原理和基礎。是以我決定在還沒有向大家講什麼的時候直接先帶大家寫一個Demo程式，這樣不僅可以讓大家在實踐中對基礎知識掌握得更加牢固，也調動了大家的積極性。
Chrome擴充的啟動入口可以在浏覽器的工具欄中和位址欄中，使用者單擊後激活擴充進行下一步的操作，也可以幹脆沒有圖示在背景靜默地運作。比如微網誌的擴充，可以設計成将圖示顯示在工具欄中，使用者點選後打開一個界面顯示使用者微網誌的時間軸；RSS訂閱器擴充可以設計成将圖示顯示在位址欄中，當使用者點選後訂閱位址欄中目前顯示的URL；自動使用Google SSL連結的擴充可以不顯示圖示，隻是在背景默默地監視，當使用者通路了非SSL的Google連結後自動改為SSL連結即可。
Chrome擴充圖示在浏覽器中的位置
我們準備寫一款顯示使用者計算機目前時間的擴充，這應該比Hello World有趣得多。我們的設計思路是這個擴充在浏覽器的工具欄中顯示一個時鐘的圖示，當使用者點選這個圖示時顯示一個界面實時顯示計算機的時間。
首先我們建立一個名為my_clock的檔案夾，在此檔案夾中建立一個名為manifest.json的檔案，檔案内容如下：
上面這段内容有些我們可以一眼看出在定義什麼，比如name定義了擴充的名稱，version定義了擴充的版本，description定義了擴充的描述，icons定義了插件相關圖示檔案的位置。version這個域值最多可以是由三個圓點分為四段的版本号，每段隻能是數字，每段數字不能大于65535且不能以0開頭（可以是0，但不可以是0123），版本号段左側為高位，比如1.0.0.2版本比1.0.0.1版本更高。每次更新擴充時，新的版本号必須比之前的版本号高。
下面的browser_action定義了擴充的圖示放置于Chrome浏覽器的工具欄中，browser_action的default_icon屬性定義了相應圖示檔案的位置，default_title定義了當使用者滑鼠懸停于擴充圖示上所顯示的文字，default_popup則定義了當使用者單擊擴充圖示時所顯示頁面的檔案位置。
接下來我們開始編寫popup.html。
如果你曾經編寫過網頁，你會發現上面這個頁面省略了很多内容，比如<title>标簽，因為對于Chrome擴充來說，很多平時對網頁有意義的内容是無意義的，是以我們可以隻挑需要的寫，當然你全寫出來也不會有什麼問題。
上面的這個頁面首先定義了全局元素的margin和padding為0，這樣我們可以更加自由地控制元素的外觀。在編寫網頁時body标簽的尺寸我們往往不會專門給定，但對于Chrome擴充有時這是必要的，比如此例中我們需要告訴Chrome當使用者單擊擴充圖示後展示一個多大的界面。
之後我們在body标簽中定義了一個id為clock_div的div容器，這個容器我準備用于顯示使用者的目前時間。這樣我們就把HTML的布局寫好了，接下來我們就需要引入Javascript動态處理資料并動态顯示了。值得注意的是Chrome不允許将Javascript直接通過<script>标簽内嵌入HTML文檔，是以我們需要外部引入的方式引用寫好的js檔案。當然inline script也是被禁止的，是以所有元素的事件都需要使用Javascript代碼專門進行綁定，如果你沒有使用一個擁有強大選擇器的庫的話（如jQuery），最好給需要綁定事件的元素配置設定一個id以便進行操作。
下面我們開始編寫my_clock.js檔案。
在my_clock.js檔案中我們定義了一個my_clock函數用于顯示時間，這個函數包含了一個el參數，這個參數為顯示時間的容器，由于在HTML文檔中我們設計在id為clock_div的div容器中顯示時間，是以調用my_clock函數時我們傳入了這個容器，這個容器在js檔案中用變量clock_div表示。之後my_clock函數1000毫秒之後又會再次調用自身，這樣id為clock_div的div容器中顯示的時間就會被更新。
至此這個擴充我們就編寫完畢了，當然别忘了将圖示檔案也放入相應的檔案夾中。
擴充的檔案結構
下面我們就需要将這個擴充載入Chrome中運作了。依次點選
-工具-擴充程式打開擴充程式頁面（也可以直接在位址欄中輸入chrome://extensions進入），勾選右上角的開發者模式，點選加載正在開發的擴充程式，選擇我們編寫的擴充所在的檔案夾，就可以在浏覽器工具欄中看到我們的擴充了。
将擴充載入到Chrome中
當滑鼠點選擴充圖示後，一個顯示時鐘的界面就會出現了。
時鐘擴充的運作界面
<a></a>
本文轉自beautifulzzzz部落格園部落格，原文連結：http://www.cnblogs.com/zjutlitao/articles/3470409.html，如需轉載請自行聯系原作者