Chrome的更新速度可以說前無古人，現(xiàn)在我每天開機(jī)的第一件事就是打開Chrome檢查是不是有了新版本。界面清爽、操作人性化、網(wǎng)絡(luò)備份資料和快速的啟動速度令我愛不釋手，還有它擁有眾多的擴(kuò)展程序，相對于firefox的插件來說，數(shù)量上和質(zhì)量上稍顯不足，但相信chrome將會很快在擴(kuò)展上超越firefox，firefox上內(nèi)存占用上實在不令人滿意，也許我使用firefox的一個原因就是因為firebug，不過相信chrome平臺的類firebug插件也會很快出現(xiàn)。
Chrome的擴(kuò)展開發(fā)十分簡單，我們只需要掌握web開發(fā)的htm+CSS+Javascript，就能很快開發(fā)出自己的擴(kuò)展。
你需要了解的內(nèi)容
在開發(fā)前首先要掌握一些基礎(chǔ)知識。
1、Chrome擴(kuò)展文件
Chrome擴(kuò)展文件以.crx為后綴名，在Google Chrome擴(kuò)展官方網(wǎng)站下載擴(kuò)展時，Chrome會將.crx文件下載到Chrome的Application Data文件夾的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安裝完成或者取消安裝，該文件就會被刪除。.crx實際上是一個壓縮文件，使用解壓文件打開這個文件就可以看到其中的文件目錄，下圖中是“關(guān)燈看視頻”擴(kuò)展的截圖：
因此可以認(rèn)為，我們實際上就是寫一個Web應(yīng)用，然后將按照Chrome的規(guī)定將一個快捷方式放在Chrome工具欄上。
2、Browser Actions（擴(kuò)展圖標(biāo)）
把Browser Actions翻譯成擴(kuò)展圖標(biāo)不是很準(zhǔn)確，但它的功能就是把你的應(yīng)用顯示在Chrome工具欄上。我們在上面看到一個文件manifest.json，就是使用這個文件來把相應(yīng)的圖標(biāo)和其他參數(shù)注冊到Browser Actions。比如下圖中就是EverNote的擴(kuò)展圖標(biāo)。
3、Page Actions（地址欄圖標(biāo)）
如果你熟悉一些Chrome插件的話，你一定會發(fā)現(xiàn)有些擴(kuò)展的圖標(biāo)不是顯示在地址欄的右邊，而是顯示在地址內(nèi)部右方，這就是Page Actions地址欄圖標(biāo)。
可以看出上面中有三個Page Actions，圖中我標(biāo)出的是Chrome添加書簽，現(xiàn)在你就會發(fā)現(xiàn)其實這個也是Chrome的擴(kuò)展，只不是它是直接內(nèi)置在Chrome的。
Page Actions與Browser Actions的區(qū)別就是Page Actions不是隨時都是顯示的，必須在特定的頁面中這個功能才能使用。因此在開發(fā)中注意：如果不是全部頁面中都能使用的功能請使用Page Actions方式。
4、popup彈出窗口
popup屬于Browser Actions，當(dāng)點擊圖標(biāo)時出現(xiàn)這個窗口，可以在里面放置任何html元素，它的寬度是自適應(yīng)的。當(dāng)然，這個彈出窗口不會被Chrome攔截的:)
如下圖中是evernote的popup窗口：
5、Background Pages后臺頁面
這個窗口不會顯示，它是擴(kuò)展程序的后臺服務(wù)，它會一直保持運行。比如在一些需要數(shù)據(jù)保存程序中，如果當(dāng)前用戶關(guān)閉popup，就需要Background Pages來進(jìn)行相應(yīng)的操作。
自己動手做一個
我們以一個簡單的任務(wù)管理程序來一步步講解。
上圖是界面實現(xiàn)，我們首先完成界面的顯示部分，首先建立一個新文件夾，以擴(kuò)展應(yīng)用的名稱為標(biāo)題，我們這里的應(yīng)用叫做MyTaskList。然后把打到圖標(biāo)文件，放到文件夾中，也可直接右鍵下載我的這個圖標(biāo)：
圖標(biāo)文件不要小于19px*19px，但最好也不要超過這個尺寸，雖然大圖它會自適應(yīng)，但會使得應(yīng)用文件變大。然后完成和未完成狀態(tài)的兩個圖標(biāo)放到資源文件中，可以建立任意文件夾放進(jìn)去，因為CSS文件把定義它們的路徑。
建立manifest.json來定義我們程序配置：
view sourceprint?
| { |
| "name": "MyTaskList", |
| "version": "0.9.0", |
| "description": "Management my everyday's task lists.", |
| "browser_action": { |
| "default_icon": "icon.png" , |
| "default_title": "My Task List", |
| "default_popup": "popup.html" |
| } |
| } |
其中name代表應(yīng)用程序名，version代表版本號，description代表功能描述。這些在安裝擴(kuò)展后就能看到，見下圖：
browser_action代表擴(kuò)展圖標(biāo)段顯示，它會定義圖標(biāo)地址、標(biāo)題（也就是鼠標(biāo)懸停提示）和默認(rèn)的popup頁面。我們這里定義的popup頁面為popup.html。
接下來開始定義popup.html顯示，它不需要使用<html>、<head>和<body>標(biāo)簽，可以直接寫上樣式、腳本和html。我們的popup.html源碼為：
view sourceprint?
| <style type="text/css"> |
| *{margin:0;padding:0;} |
| body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;} |
| img{margin:0 4px;} |
| #addItemDiv{color:#ccc;} |
| .hide{display:none;} |
| .show{display:block;} |
| .taskItem{cursor:pointer;} |
| input{width:100%;} |
| label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;} |
| label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;} |
| </style> |
| <div id="newItem" class="gray">添加新項</div> |
| <div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div> |
| <div id="taskItemList"> |
| <div class="taskItem"> |
| <label class="on"></label><span class="taskTitle">新任務(wù)</span> |
| </div> |
| <div class="taskItem"> |
| <label class="off"></label><span class="taskTitle">已完成任務(wù)</span> |
| </div> |
| </div> |
打開預(yù)覽，樣子就已經(jīng)出來了：
這樣我們文件就已經(jīng)建立完成，文件列表如下：
現(xiàn)在就可以先嘗試把它打包裝到自己的Chrome里。
首先打開Chrome-工具-擴(kuò)展程序，展開開發(fā)人員模式，打到“打包擴(kuò)展程序”按鈕：
點擊“打包擴(kuò)展程序…”，彈出打包選擇文件窗口，在擴(kuò)展程序根目標(biāo)中找到我們建立的文件夾，私有密碼文件第一次不用選擇：
點擊確定，它會在根文件夾同一級生成MyTaskList.crx和MyTaskList.pem，MyTaskList.pem是程序簽名文件，以新版本的開發(fā)中還需要這個文件，不要刪除它。把MyTaskList.crx拖進(jìn)Chrome窗體內(nèi)，就會把這個應(yīng)用MyTaskList安裝在Chrome里。
我們的這個簡單的模型就能看到效果了，下一節(jié)我們就會完善其中的代碼。
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
