手把手教你開發chrome擴展一：開發Chrome Extenstion其實很簡單
- 手把手教你開發chrome擴展一：開發Chrome Extenstion其實很簡單
- 手把手教你開發Chrome擴展二：為html添加行為
- 手把手教你開發Chrome擴展三：關於本地存儲數據
Chrome的更新速度可以說前無古人，現在我每天開機的第一件事就是打開Chrome檢查是不是有了新版本。界面清爽、操作人性化、網絡備份資料和快速的啟動速度令我愛不釋手，還有它擁有眾多的擴展程序，相對於firefox的插件來說，數量上和質量上稍顯不足，但相信chrome將會很快在擴展上超越firefox，firefox上內存占用上實在不令人滿意，也許我使用firefox的一個原因就是因為firebug，不過相信chrome平臺的類firebug插件也會很快出現。
Chrome的擴展開發十分簡單，我們只需要掌握web開發的htm+CSS+Javascript，就能很快開發出自己的擴展。
你需要了解的內容
在開發前首先要掌握一些基礎知識。
1、Chrome擴展文件
Chrome擴展文件以.crx為後綴名，在Google Chrome擴展官方網站下載擴展時，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的規定將一個快捷方式放在Chrome工具欄上。
2、Browser Actions（擴展圖標）
把Browser Actions翻譯成擴展圖標不是很準確，但它的功能就是把你的應用顯示在Chrome工具欄上。我們在上面看到一個文件manifest.json，就是使用這個文件來把相應的圖標和其他參數註冊到Browser Actions。比如下圖中就是EverNote的擴展圖標。
3、Page Actions（地址欄圖標）
如果你熟悉一些Chrome插件的話，你一定會發現有些擴展的圖標不是顯示在地址欄的右邊，而是顯示在地址內部右方，這就是Page Actions地址欄圖標。
可以看出上面中有三個Page Actions，圖中我標出的是Chrome添加書簽，現在你就會發現其實這個也是Chrome的擴展，只不是它是直接內置在Chrome的。
Page Actions與Browser Actions的區別就是Page Actions不是隨時都是顯示的，必須在特定的頁面中這個功能才能使用。因此在開發中註意：如果不是全部頁面中都能使用的功能請使用Page Actions方式。
4、popup彈出窗口
popup屬於Browser Actions，當點擊圖標時出現這個窗口，可以在裏面放置任何html元素，它的寬度是自適應的。當然，這個彈出窗口不會被Chrome攔截的:)
如下圖中是evernote的popup窗口：
5、Background Pages後臺頁面
這個窗口不會顯示，它是擴展程序的後臺服務，它會一直保持運行。比如在一些需要數據保存程序中，如果當前用戶關閉popup，就需要Background Pages來進行相應的操作。
自己動手做一個
我們以一個簡單的任務管理程序來一步步講解。
上圖是界面實現，我們首先完成界面的顯示部分，首先建立一個新文件夾，以擴展應用的名稱為標題，我們這裏的應用叫做MyTaskList。然後把找一個圖標文件，放到文件夾中，也可直接右鍵下載我的這個圖標：
圖標文件不要小於19px*19px，但最好也不要超過這個尺寸，雖然大圖它會自適應，但會使得應用文件變大。然後完成和未完成狀態的兩個圖標放到資源文件中，可以建立任意文件夾放進去，因為CSS文件把定義它們的路徑。
建立manifest.json來定義我們程序配置：
{
"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代表應用程序名，version代表版本號，description代表功能描述。這些在安裝擴展後就能看到，見下圖：
browser_action代表擴展圖標段顯示，它會定義圖標地址、標題（也就是鼠標懸停提示）和默認的popup頁面。我們這裏定義的popup頁面為popup.html。
接下來開始定義popup.html顯示，它不需要使用<html>、<head>和<body>標簽，可以直接寫上樣式、腳本和html。我們的popup.html源碼為：
<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">新任務</span>
</div>
<div class="taskItem">
<label class="off"></label><span class="taskTitle">已完成任務</span>
</div>
</div>
|
打開預覽，樣子就已經出來了：
這樣我們文件就已經建立完成，文件列表如下：
現在就可以先嘗試把它打包裝到自己的Chrome裏。
首先打開Chrome-工具-擴展程序，展開開發人員模式，打到“打包擴展程序”按鈕：
點擊“打包擴展程序…”，彈出打包選擇文件窗口，在擴展程序根目標中找到我們建立的文件夾，私有密碼文件第一次不用選擇：
點擊確定，它會在根文件夾同一級生成MyTaskList.crx和MyTaskList.pem，MyTaskList.pem是程序簽名文件，以新版本的開發中還需要這個文件，不要刪除它。把MyTaskList.crx拖進Chrome窗體內，就會把這個應用MyTaskList安裝在Chrome裏。
我們的這個簡單的模型就能看到效果了，下一節我們就會完善其中的代碼。
手把手教你開發chrome擴展一：開發Chrome Extenstion其實很簡單