??Chrome的更新速度可以說前無古人辰如，現(xiàn)在我每天開機的第一件事就是打開Chrome檢查是不是有了新版本怎栽。界面清爽颊亮、操作人性化剔宪、網(wǎng)絡備份資料和快速的啟動速度令我愛不釋手拂铡，還有它擁有眾多的擴展程序，相對于firefox的插件來說葱绒，數(shù)量上和質量上稍顯不足感帅，但相信chrome將會很快在擴展上超越firefox，firefox上內存占用上實在不令人滿意地淀，也許我使用firefox的一個原因就是因為firebug失球，不過相信chrome平臺的類firebug插件也會很快出現(xiàn)。
Chrome的擴展開發(fā)十分簡單帮毁，我們只需要掌握web開發(fā)的html+CSS+Javascript实苞，就能很快開發(fā)出自己的擴展豺撑。
你需要了解的內容：
在開發(fā)前首先要掌握一些基礎知識。
<h4 id="step_1">1.Chrome擴展文件</h4>
??Chrome擴展文件以.crx為后綴名黔牵，在Google Chrome擴展官方網(wǎng)站下載擴展時聪轿，Chrome會將.crx文件下載到Chrome的Application Data文件夾的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp荧止，安裝完成或者取消安裝屹电，該文件就會被刪除。.crx實際上是一個壓縮文件跃巡，使用解壓文件打開這個文件就可以看到其中的文件目錄危号，下圖中是擴展的截圖：
因此可以認為，我們實際上就是寫一個Web應用素邪，然后將按照Chrome的規(guī)定將一個快捷方式放在Chrome工具欄上外莲。
<h4 id="step_2">2.Browser Actions（擴展圖標）</h4>
??把Browser Actions翻譯成擴展圖標不是很準確，但它的功能就是把你的應用顯示在Chrome工具欄上兔朦。我們在上面看到一個文件manifest.json偷线，就是使用這個文件來把相應的圖標和其他參數(shù)注冊到Browser Actions。比如下圖中就是EverNote的擴展圖標沽甥。
<h4 id="step_3">3.Page Actions（地址欄圖標）</h4>
??如果你熟悉一些Chrome插件的話声邦，你一定會發(fā)現(xiàn)有些擴展的圖標不是顯示在地址欄的右邊，而是顯示在地址內部右方摆舟，這就是Page Actions地址欄圖標亥曹。
??可以看出上面中有三個Page Actions，圖中我標出的是Chrome添加書簽恨诱，現(xiàn)在你就會發(fā)現(xiàn)其實這個也是Chrome的擴展媳瞪，只不是它是直接內置在Chrome的。
??Page Actions與Browser Actions的區(qū)別就是Page Actions不是隨時都是顯示的照宝，必須在特定的頁面中這個功能才能使用蛇受。因此在開發(fā)中注意：如果不是全部頁面中都能使用的功能請使用Page Actions方式。
<h4 id="step_4">4.popup彈出窗口</h4>
??popup屬于Browser Actions厕鹃，當點擊圖標時出現(xiàn)這個窗口兢仰，可以在里面放置任何html元素，它的寬度是自適應的剂碴。當然把将，這個彈出窗口不會被Chrome攔截的。
<h4 id="step_5">5.Background Pages后臺頁面</h4>
??這個窗口不會顯示汗茄，它是擴展程序的后臺服務秸弛，它會一直保持運行。比如在一些需要數(shù)據(jù)保存程序中，如果當前用戶關閉popup递览，就需要Background Pages來進行相應的操作叼屠。
<h3 id="step_6">實戰(zhàn)講解:</h3>
我們以一個簡單的插件來一步步講解。
上面就是插件的簡單頁面绞铃。
??圖標文件不要小于19px*19px镜雨，但最好也不要超過這個尺寸，雖然大圖它會自適應儿捧，但會使得應用文件變大荚坞。然后完成和未完成狀態(tài)的兩個圖標放到資源文件中，可以建立任意文件夾放進去菲盾，因為CSS文件把定義它們的路徑颓影。
建立manifest.json來定義我們程序配置：
{
"name": "helloChrome",
"version": "0.1.0",
"manifest_version":2,
"description": "this is my demo.",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "helloChrome",
"default_popup": "popup.html"
},
"permissions": [
"http://www.babybus.com/"
]
}
其中name代表應用程序名，version代表版本號懒鉴，description代表功能描述诡挂。這些在安裝擴展后就能看到，見下圖：
??browser_action代表擴展圖標段顯示临谱，它會定義圖標地址璃俗、標題（也就是鼠標懸停提示）和默認的popup頁面。我們這里定義的popup頁面為popup.html悉默。
??接下來開始定義popup.html顯示城豁，它不需要使用<html>、<head>和<body>標簽抄课，可以直接寫上樣式唱星、腳本和html。我們的popup.html源碼為：
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4 style="text-decoration:underline">hello</h4>
<font color=red>hello World</font>
</body>
</html>
這樣我們文件就已經(jīng)建立完成剖膳，文件列表如下：
現(xiàn)在就可以先嘗試把它打包裝到自己的Chrome里魏颓。 首先打開Chrome-工具-擴展程序岭辣，展開開發(fā)人員模式吱晒，打到“打包擴展程序”按鈕：
點擊“打包擴展程序…”，彈出打包選擇文件窗口沦童，在擴展程序根目標中找到我們建立的文件夾仑濒，私有密碼文件第一次不用選擇：
點擊確定，它會在根文件夾同一級生成MyTaskList.crx和MyTaskList.pem偷遗，MyTaskList.pem是程序簽名文件墩瞳，以新版本的開發(fā)中還需要這個文件，不要刪除它氏豌。把MyTaskList.crx拖進Chrome窗體內喉酌，就會把這個應用MyTaskList安裝在Chrome里。
我們的這個簡單的插件就能看到效果了。
