參考網頁：http://www.ituring.com.cn/article/60134
我們準備編寫一款顯示用戶計算機當前時間的擴展，這應該比Hello World有趣得多。設計思路是在瀏覽器的工具欄中顯示一個時鐘的圖標，當用戶點擊這個圖標時顯示一個實時顯示計算機時間的界面。
首先新建一個名爲my_clock的文件夾，在此文件夾中新建一個名爲manifest.json的文件，內容如下：
{
"manifest_version": 2,
"name": "我的時鐘",
"version": "1.0",
"description": "我的第一個Chrome擴展",
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "我的時鐘",
"default_popup": "popup.html"
}
}
上面這段內容有些我們可以一眼看出在定義什麼，比如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。
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 42px;
text-align: center;
}
</style>
</head>
<body>
<div id="clock_div"></div>
<script src="js/my_clock.js"></script>
</body>
</html>
如果你曾經編寫過網頁，會發現上面這個頁面省略了很多內容，比如<title>標籤。因爲對於Chrome擴展來說，很多對網頁有意義的內容是無意義的，所以我們可以只挑需要的寫，當然你全寫出來也不會有什麼問題。
之後我們在body標籤中定義了一個id爲clock_div的div容器，用這個容器來顯示當前的時間，這樣我們就把HTML的佈局寫好了。接下來我們就需要引入JavaScript處理數據並動態顯示了。值得注意的是Chrome不允許將JavaScript直接通過<script>標籤內嵌入HTML文檔，所以我們需要通過外部引入的方式引用js文件。當然inline script也是被禁止的，所以所有元素的事件都需要使用JavaScript代碼進行綁定，如果你沒有使用一個擁有強大選擇器的庫（如jQuery），最好給需要綁定事件的元素分配一個id以便進行操作。
下面來編寫my_clock.js文件。
function my_clock(el){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=m>=10?m:('0'+m);
s=s>=10?s:('0'+s);
el.innerHTML = h+":"+m+":"+s;
setTimeout(function(){my_clock(el)}, 1000);
}
var clock_div = document.getElementById('clock_div');
my_clock(clock_div);
在my_clock.js文件中我們定義了一個my_clock函數用於顯示時間，這個函數包含了一個el參數，這個參數爲顯示時間的容器，由於在HTML文檔中我們設計在id爲clock_div的div容器中顯示時間，所以調用my_clock函數時我們傳入了這個容器，在js文件中用變量clock_div表示。之後my_clock函數1000毫秒之後又會再次調用自身，這樣clock_div中顯示的時間就會被更新。
至此這個擴展就編寫完畢了，當然別忘了將圖標文件也放入相應的文件夾中。
下面我們就需要將這個擴展載入Chrome中運行了。依次點擊“”-“工具”-“擴展程序”打開擴展程序頁面（也可以直接在地址欄中輸入chrome://extensions進入），勾選右上角的“開發者模式”，點擊“加載正在開發的擴展程序”，選擇擴展所在的文件夾，就可以在瀏覽器工具欄中看到我們的擴展了。
當鼠標點擊擴展圖標後，一個顯示時鐘的界面就出現了。
