轉載：http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html
手把手教你開發chrome擴展一：開發Chrome Extenstion其實很簡單
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擴展的基礎知識，並構建了基礎的html，這一節我們將就html DOM添加部分添加腳本，即腳本在我們的popup頁面中進行的操作，頁面所產生的變化。
正常情況下數據處理加載完成狀態，這些數據是從本地數據讀取的。
點擊“添加新項”，出現輸入框，輸入文字后回車提交數據：
添加完成后將數據存儲，同時添加DOM元素：
考慮到功能最簡化處理，點擊已標為完成的任務，將提示“刪除或重置為未完成”：
以上功能為最核心功能，可以在此基礎上進行擴展，比如任務分組，修改任務，任務提醒，網絡同步數據等等。
下面開始相應的腳本內容。
為了避免全局變量，使用匿名函數方式，所有事件處理及數據綁定均在此函數中進行，同時定義與jQuery中的$()類似的函數：
(
function
(){
var
$=
function
(id){
return
document.getElementById(id);}
})();
|
建立Tasks對象，定義show()函數和hide()函數，同時存儲幾個常用的DOM對象。
var
Tasks = {
show:
function
(obj){
obj.className=
''
;
return
this
;
},
hide:
function
(obj){
obj.className=
'hide'
;
return
this
;
},
//存儲dom
$addItemDiv:$(
'addItemDiv'
),
$addItemInput:$(
'addItemInput'
),
$txtTaskTitle:$(
'txtTaskTitle'
),
$taskItemList:$(
'taskItemList'
)
}
|
其中show()函數和hide()函數均使用了鏈式調用，每次執行此函數均會返回對象本身，這樣對象就可以使用形如類似jQuery書寫方式來使用此函數。
然后注冊事件：
//.....
//初始化
init:
function
(){
/*注冊事件*/
//打開添加文本框
Tasks.$addItemDiv.addEventListener(
'click'
,
function
(){
Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);
Tasks.$txtTaskTitle.focus();
},
true
);
//回車添加
Tasks.$txtTaskTitle.addEventListener(
'keyup'
,
function
(ev){
var
ev=ev || window.event;
if
(ev.keyCode==13){
//TODO:寫入本地數據
Tasks.AppendHtml(task);
Tasks.$txtTaskTitle.value=
''
;
Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
}
ev.preventDefault();
},
true
);
//取消
Tasks.$txtTaskTitle.addEventListener(
'blur'
,
function
(){
Tasks.$txtTaskTitle.value=
''
;
Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);
},
true
);
//TODO:初始化數據，加載本地數據，生成html
},
//....
|
其中待完成部分為我們下一節將重點計到的html5的本地存儲功能。再定義數據操作部分，先寫上空白函數：
//....
//增加
Add:
function
(){
//TODO
},
//修改
Edit:
function
(){
//TODO
},
//刪除
Del:
function
(){
//TODO
},
//...
|
還需要初始化此函數使其執行並讓匿名函數執行：
(
function
(){
var
Tasks = {
//***
}
Tasks.init();
})();
|
好吧，以下就是本節中所要提到的全部代碼：
代碼中尚未實現的部分，我們將會在下節詳細講解其實現。
HTML5中的localStorage
localStorage與cookie類似，它是存儲在客戶端瀏覽器中的數據，它與cookie不同的一點是它沒有時間限制。localStorage屬於html5中的新特性，在瀏覽器支持localStorage統計中，Chrome4+、Firefox3.5+、IE8+、IE7兼容模式、Safari4+、Opera10.5+都是支持localStorage的。以下代碼可以用於檢測你的瀏覽器是否支持localStorage：
if
(window.localStorage){
alert(
'你的瀏覽器支持localStorage!'
);
}
else
{
alert(
'瀏覽器不支持localStorage!'
);
}
|
localStorage是以key/value方式來進行存儲的，並且value只能是字符串形式，如果你要使用其他數據類型，需要進行相應的轉換。設置和獲取localStorage方法是使用localStorage.key，或localStorage[key]的形式，如：
localStorage.myName=
'walkingp'
;
localStorage[
'mySite'
]=
'http://www.cnblogs.com/walkingp'
;
alert(
'name:'
+ localStorage.myName +
'\rsite:'
+ localStorage[
'mySite'
]);
|
修改其值就是重新設置相應的localStorage項取值。移除其值可以將其值設為null。
localStorage[
'mySite'
]=
null
;
|
也可以使用localStorage自帶方法getItem()、setItem()和removeItem()來進行相應的獲取、設置和移除localStorage項。
localStorage.setItem(
'age'
,
'24'
);
var
age=localStorage.getItem(
'age'
);
alert(
'age:'
+ age);
//age:24
localStorage.removeItem(
'age'
);
age=localStorage.getItem(
'age'
);
alert(
'age? '
+ age);
//age? null
|
可以使用clear()方法來清空所有localStorage。
對於不同域的localStorage，如本地和a.com，兩者不影響對方。
關於localStorage本地存儲大小，有人測試結果是其他瀏覽器為5M，Firefox沒有作限制。而cookie一般只有幾K，可見localStorage非常適合做稍大一些的數據存儲，當然對於Chrome等擴展開發是非常合適的。
瀏覽器中的localStorage管理工具
Chrome和Safari均有自己的本地localStorage查看和管理工具，Firefox擁有第三方插件可以管理localStorage，Chrome中位於開發人員工具中的Resources左側的Databases（可能稍早一點的版本位於單獨出來的工具欄）。我們上面的localStorage在Chrome查看如下，利用這個工具可以修改或者刪除相應項。
Safari中需要先在“偏好設置”、“高級”中將“在菜單中顯示開發選項”勾選。
開始存儲我們的localStorage
以上是我們需要了解的關於localStorage的知識，接下來就是把這個知識應用到我們Chrome擴展中。我們的數據存儲分為兩個部分，一是每項task需要存儲的內容，它是以JSON的形式來存儲的，形式如下：
task1:{
"id"
:1,
"task_item"
:
"新任務"
,
"add_time"
:
"2011-04-04T03:20:34.879Z"
,
"is_finished"
:
false
}
|
task1表示key項，后台的JSON表示value項。意義很簡單明了，其中is_finished表示當前任務是否已完成。當更新任務狀態時就是將此項取值進行相應的更改。
還要放一個指向當前任務的數據，讓它充當指針的作用，這樣在添加新項時就不需要查詢已有task項的id了。
'Tasks:index'
:1
|
下面是我們代碼的具體實現，首先開始初始化數據：
var
Tasks = {
//指針
index:window.localStorage.getItem(
'Tasks:index'
),
//初始化
init:
function
(){
if
(!Tasks.index){
window.localStorage.setItem(
'Tasks:index'
,Tasks.index=0);
}
//初始化數據
if
(window.localStorage.length-1){
var
task_list=[];
var
key;
for
(
var
i=0,len=window.localStorage.length;i<len;i++){
key=window.localStorage.key(i);
if
(/task:\d+/.test(key)){
task_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
for
(
var
i=0,len=task_list.length;i<len;i++){
Tasks.AppendHtml(task_list[i]);
}
}
},
//***
}
|
然后是分別是增加項Add()、修改項Edit()和刪除項Del()的方法：
//增加
Add:
function
(task){
//更新指針
window.localStorage.setItem(
'Tasks:index'
, ++Tasks.index);
task.id=Tasks.index;
window.localStorage.setItem(
"task:"
+ Tasks.index, JSON.stringify(task));
},
//修改
Edit:
function
(task){
window.localStorage.setItem(
"task:"
+ task.id, JSON.stringify(task));
},
//刪除
Del:
function
(task){
window.localStorage.removeItem(
"task:"
+ task.id);
},
//***
|
其中的JSON.stringify是JSON將Javascript數據結構轉換為JSON文本的方法，它與eval()為互操作。詳情可見http://json.org/js.html 。
這樣我們就將一個簡單的Chrome擴展完成了，演示效果圖如下：
當然它現在的功能還不夠強大，我們還可以對它進行繼續擴展，比如任務排序、任務分組、網絡存儲、定時提醒等。
系列文章至此暫時結束，全部代碼包括生成后.crx文件已經打包，下載請點擊此處。可能已有代碼有一些處理不完善的地方，歡迎大家一一指出，共同進步！