摘要：了解擴(kuò)展程序開發(fā)本文大量借鑒圖靈電子書擴(kuò)展及應(yīng)用開發(fā)首發(fā)版首先，我嘗試來用簡單幾句話描述一下擴(kuò)展程序擴(kuò)展主要用于對瀏覽器功能的增強(qiáng)，它強(qiáng)調(diào)與瀏覽器相結(jié)合。提供了接口，允許擴(kuò)展對用戶的歷史進(jìn)行管理。

本文大量借鑒圖靈電子書-Chrome擴(kuò)展及應(yīng)用開發(fā)（首發(fā)版）

首先，我嘗試來用簡單幾句話描述一下Chrome擴(kuò)展程序：

Chrome擴(kuò)展主要用于對瀏覽器功能的增強(qiáng)，它強(qiáng)調(diào)與瀏覽器相結(jié)合。比如Chrome擴(kuò)展可以在瀏覽器的工具欄和地址欄中顯示圖標(biāo)，它可以更改用戶當(dāng)前瀏覽的網(wǎng)頁中的內(nèi)容，也可以更改瀏覽器代理服務(wù)器的設(shè)置等等。

Chrome擴(kuò)展是一系列文件的集合，這些文件包括HTML文件、CSS樣式文件、JavaScript腳本文件、圖片等靜態(tài)文件以及manifest.json。清單文件信息

擴(kuò)展被安裝后，Chrome就會讀取擴(kuò)展中的manifest.json文件。這個文件的文件名固定為manifest.json，內(nèi)容是按照一定格式描述的擴(kuò)展相關(guān)信息，如擴(kuò)展名稱、版本、更新地址、請求的權(quán)限、擴(kuò)展的UI界面入口等等。這樣Chrome就可以知道在瀏覽器中如何呈現(xiàn)這個擴(kuò)展，以及這個擴(kuò)展如何同用戶進(jìn)行交互。

通過Chrome擴(kuò)展我們可以對用戶當(dāng)前瀏覽的頁面進(jìn)行操作，實(shí)際上就是對用戶當(dāng)前瀏覽頁面的DOM進(jìn)行操作。通過Manifest中的content_scripts屬性可以指定將哪些腳本何時注入到哪些頁面中，當(dāng)用戶訪問這些頁面后，相應(yīng)腳本即可自動運(yùn)行，從而對頁面DOM進(jìn)行操作。

值得一提的是，Google允許Chrome擴(kuò)展應(yīng)用不必受限于跨域限制。跨域指的是JavaScript通過XMLHttpRequest請求數(shù)據(jù)時，調(diào)用JavaScript的頁面所在的域和被請求頁面的域不一致。對于網(wǎng)站來說，瀏覽器出于安全考慮是不允許跨域。這個規(guī)則如果同樣限制Chrome擴(kuò)展應(yīng)用，就會使其能力大打折扣，所以Google允許Chrome擴(kuò)展應(yīng)用不必受限于跨域限制。但出于安全考慮，需要在Manifest的permissions屬性中聲明需要跨域的權(quán)限。

通過Chrome擴(kuò)展我們可以對用戶當(dāng)前瀏覽的頁面進(jìn)行操作，實(shí)際上就是對用戶當(dāng)前瀏覽頁面的DOM進(jìn)行操作。通過Manifest中的content_scripts屬性可以指定將哪些腳本何時注入到哪些頁面中，當(dāng)用戶訪問這些頁面后，相應(yīng)腳本即可自動運(yùn)行，從而對頁面DOM進(jìn)行操作。

content_scripts很像Userscript，它就是將指定的腳本文件插入到符合規(guī)則的特定頁面中，從而使插入的腳本可以對頁面的DOM進(jìn)行操作。

有時我們希望擴(kuò)展不僅在用戶主動發(fā)起時（如開啟特定頁面或點(diǎn)擊擴(kuò)展圖標(biāo)等）才運(yùn)行，而是希望擴(kuò)展自動運(yùn)行并常駐后臺來實(shí)現(xiàn)一些特定的功能，比如實(shí)時提示未讀郵件數(shù)量、后臺播放音樂等等。

Chrome允許擴(kuò)展應(yīng)用在后臺常駐一個頁面以實(shí)現(xiàn)這樣的功能。在一些典型的擴(kuò)展中，UI頁面，如popup頁面或者options頁面，在需要更新一些狀態(tài)時，會向后臺頁面請求數(shù)據(jù)，而當(dāng)后臺頁面檢測到狀態(tài)發(fā)生改變時，也會通知UI界面刷新。后臺頁面與UI頁面可以相互通信.

在Manifest中指定background域可以使擴(kuò)展常駐后臺。background可以包含三種屬性，分別是scripts、page和persistent。如果指定了scripts屬性，則Chrome會在擴(kuò)展啟動時自動創(chuàng)建一個包含所有指定腳本的頁面；如果指定了page屬性，則Chrome會將指定的HTML文件作為后臺頁面運(yùn)行。通常我們只需要使用scripts屬性即可，除非在后臺頁面中需要構(gòu)建特殊的HTML——但一般情況下后臺頁面的HTML我們是看不到的。persistent屬性定義了常駐后臺的方式——當(dāng)其值為true時，表示擴(kuò)展將一直在后臺運(yùn)行，無論其是否正在工作；當(dāng)其值為false時，表示擴(kuò)展在后臺按需運(yùn)行，這就是Chrome后來提出的Event Page。Event Page可以有效減小擴(kuò)展對內(nèi)存的消耗，如非必要，請將persistent設(shè)置為false。persistent的默認(rèn)值為true。

"options_page": "options.html"

一般來說做一些選擇設(shè)置然后本地localstorage的工作

Chrome提供了4個有關(guān)擴(kuò)展頁面間相互通信的接口，分別是runtime.sendMessage、runtime.onMessage、runtime.connect和runtime.onConnect。

請注意，Chrome提供的大部分API是不支持在content_scripts中運(yùn)行的，但runtime.sendMessage和runtime.onMessage可以在content_scripts中運(yùn)行，所以擴(kuò)展的其他頁面也可以同content_scripts相互通信。

runtime.sendMessage完整的方法為：

chrome.runtime.sendMessage(extensionId, message, options, callback)

其中extensionId為所發(fā)送消息的目標(biāo)擴(kuò)展，如果不指定這個值，則默認(rèn)為發(fā)起此消息的擴(kuò)展本身；message為要發(fā)送的內(nèi)容，類型隨意，內(nèi)容隨意，比如可以是"Hello"，也可以是{action: "play"}、2013和["Jim", "Tom", "Kate"]等等；

runtime.onMessage完整的方法為：

chrome.runtime.onMessage.addListener(callback)

此處的callback為必選參數(shù)，為回調(diào)函數(shù)。callback接收到的參數(shù)有三個，分別是message、sender和sendResponse，即消息內(nèi)容、消息發(fā)送者相關(guān)信息和相應(yīng)函數(shù)。其中sender對象包含4個屬性，分別是tab、id、url和tlsChannelId，tab是發(fā)起消息的標(biāo)簽

1.圖標(biāo)

"browser_action": {
    "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
    }
}

chrome.browserAction.setIcon(details, callback) // details的類型為對象，可以包含三個屬性，分別是imageData、path和tabId。

2.Popup頁面

Popup頁面提供了一個簡單便捷的UI接口。新窗口會使用戶反感，而popup頁面的設(shè)計更像是瀏覽器的一部分，但popup頁面并不適用于所有情況。由于其在關(guān)閉后，就相當(dāng)于用戶關(guān)閉了相應(yīng)的標(biāo)簽頁。當(dāng)用戶再次打開這個頁面時，所有的DOM和js空間變量都將被重新創(chuàng)建。

使用帶有滾動條的DIV容器。

設(shè)計一個更好的滾動條樣式。

考慮屏蔽右鍵菜單。

使用外部引用的腳本。

值得注意的是Chrome不允許將JavaScript代碼段直接內(nèi)嵌入HTML文檔，所以我們需要通過外部引入的方式引用JS文件。當(dāng)然inline-script也是被禁止的，所以所有元素的事件都需要使用JavaScript代碼進(jìn)行綁定。

不要在popup頁面的js空間變量中保存數(shù)據(jù)。

3.標(biāo)題和badge

將鼠標(biāo)移至擴(kuò)展圖標(biāo)上，片刻后所顯示的文字就是擴(kuò)展的標(biāo)題。標(biāo)題不僅僅只是給出擴(kuò)展的名稱，有時它能為用戶提供更多的信息。比如一款聊天客戶端的標(biāo)題，可以動態(tài)地顯示當(dāng)前登錄的帳戶信息，如號碼和登錄狀態(tài)等。所以如果能合理使用好擴(kuò)展的標(biāo)題，會給用戶帶來更好的體驗(yàn)。

"browser_action": {
    "default_title": "Extension Title"
}

chrome.browserAction.setTitle({title: "This is a new title"});

Badge相當(dāng)于APP未讀消息數(shù)的小氣泡。目前只能夠通過JavaScript設(shè)定顯示的內(nèi)容，同時Chrome還提供了更改badge背景的方法。如果不定義badge的背景顏色，默認(rèn)將使用紅色。badge目前還不支持更改文字的顏色——始終是白色，所以應(yīng)避免使用淺顏色作為背景。

chrome.browserAction.setBadgeBackgroundColor({color: "#0000FF"});
chrome.browserAction.setBadgeBackgroundColor({color: [0, 255, 0, 128]});
chrome.browserAction.setBadgeText({text: "Dog"});

當(dāng)用戶在網(wǎng)頁中點(diǎn)擊鼠標(biāo)右鍵后，會喚出一個菜單，在上面有復(fù)制、粘貼和翻譯等選項(xiàng)，為用戶提供快捷便利的功能。Chrome也將這里開放給了開發(fā)者，也就是說我們可以把自己所編寫的擴(kuò)展功能放到右鍵菜單中。

要將擴(kuò)展加入到右鍵菜單中，首先要在Manifest的permissions域中聲明contextMenus權(quán)限。

"permissions": [
    "contextMenus"
]
"icons": {
    "16": "icon16.png"
}

之前的章節(jié)提到過利用標(biāo)題和badge向用戶提供有限的信息，那么如果需要向用戶提供更加豐富的信息怎么辦呢？Chrome提供了桌面提醒功能，這個功能可以為用戶提供更加豐富的信息。

"permissions": [
    "notifications"
]

創(chuàng)建桌面提醒非常容易，只需指定標(biāo)題、內(nèi)容和圖片即可。下面的代碼生成了標(biāo)題為“Notification Demo”，內(nèi)容為“Merry Christmas”，圖片為“icon48.png”的桌面提醒窗口。

var notification = webkitNotifications.createNotification(
    "icon48.png",
    "Notification Demo",
    "Merry Christmas"
);
notification.show();

需要注意的是，對于要在桌面窗口中顯示的圖片，必須在Manifest的web_accessible_resources域中進(jìn)行聲明，否則會出現(xiàn)圖片無法打開的情況：

"web_accessible_resources": [
    "images/*.png"
]

桌面提醒窗口提供了四種事件：ondisplay、onerror、onclose和onclick。

除了用戶主動關(guān)閉桌面提醒窗口外，還可以通過cancel方法自動關(guān)閉。

setTimeout(function(){
    notification.cancel();
},5000);

1.書簽

Chrome為開發(fā)者提供了添加、分類（書簽文件夾）和排序等方法來操作書簽，同時也提供了讀取書簽的方法。
要在擴(kuò)展中操作書簽，需要在Manifest中聲明bookmarks權(quán)限：

"permissions": [
    "bookmarks"
]

2.Cookies

Cookies是瀏覽器記錄在本地的用戶數(shù)據(jù)，如用戶的登錄信息。Chrome為擴(kuò)展提供了Cookies API用以管理Cookies。
要管理Cookies，需要在Manifest中聲明cookies權(quán)限，同時也要聲明所需管理Cookies所在的域：

"permissions": [
    "cookies",
    "*://*.google.com"
]
"permissions": [
    "cookies",
    ""
]

3.歷史

歷史用于記錄用戶訪問過頁面的信息。與書簽一樣，歷史也是瀏覽器很早就具有的功能，對用戶來說也是一個很重要的功能。Chrome提供了history接口，允許擴(kuò)展對用戶的歷史進(jìn)行管理。

要使用history接口，需要在Manifest中聲明history權(quán)限：

"permissions": [
    "history"
]

4.管理擴(kuò)展與應(yīng)用

除了通過chrome://extensions/管理Chrome擴(kuò)展和應(yīng)用外，也可以通過Chrome的management接口管理。management接口可以獲取用戶已安裝的擴(kuò)展和應(yīng)用信息，同時還可以卸載和禁用它們。通過management接口可以編寫出智能管理擴(kuò)展和應(yīng)用的程序。

要使用management接口，需要在Manifest中聲明management權(quán)限：

"permissions": [
    "management"
]

5.標(biāo)簽

Chrome通過tabs方法提供了管理標(biāo)簽的方法與監(jiān)聽標(biāo)簽行為的事件，大多數(shù)方法與事件是無需聲明特殊權(quán)限的，但有關(guān)標(biāo)簽的url、title和favIconUrl的操作（包括讀取），都需要聲明tabs權(quán)限。

"permissions": [
    "tabs"
]

6.Override Pages

Chrome不僅提供了管理書簽、歷史和標(biāo)簽的接口，還支持用自定義的頁面替換Chrome相應(yīng)默認(rèn)的頁面，這就是override pages。目前支持替換的頁面包含Chrome的書簽頁面、歷史記錄和新標(biāo)簽頁面。

使用override pages很簡單，只需在Manifest中進(jìn)行聲明即可（一個擴(kuò)展只能替換一個頁面）：

"chrome_url_overrides" : {
    "bookmarks": "bookmarks.html"
}
"chrome_url_overrides" : {
    "history": "history.html"
}
"chrome_url_overrides" : {
    "newtab": "newtab.html"
}

1.下載

"permissions": [
    "downloads"
]
chrome.downloads.download(options, callback);
// options
{
    url: 下載文件的url,
    filename: 保存的文件名,
    conflictAction: 重名文件的處理方式,
    saveAs: 是否彈出另存為窗口,
    method: 請求方式（POST或GET），
    headers: 自定義header數(shù)組,
    body: POST的數(shù)據(jù)
}

2.網(wǎng)絡(luò)請求

Chrome提供了較為完整的方法供擴(kuò)展程序分析、阻斷及更改網(wǎng)絡(luò)請求，同時也提供了一系列較為全面的監(jiān)聽事件以監(jiān)聽整個網(wǎng)絡(luò)請求生命周期的各個階段。

要對網(wǎng)絡(luò)請求進(jìn)行操作，需要在Manifest中聲明webRequest權(quán)限以及相關(guān)被操作的URL。如需要阻止網(wǎng)絡(luò)請求，需要聲明webRequestBlocking權(quán)限。

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://*.google.com/"
]

3.代理

代理可以讓用戶通過代理服務(wù)器瀏覽網(wǎng)絡(luò)資源以達(dá)到匿名訪問等目的。代理的類型有多種，常用的包括http代理和socks代理等。有時我們不希望所有的網(wǎng)絡(luò)資源都通過代理瀏覽，這種情況下通常會使用pac腳本來告訴瀏覽器使用代理訪問的規(guī)則。

Chrome瀏覽器提供了代理設(shè)置管理接口，這樣可以讓擴(kuò)展來做到更加智能的代理設(shè)置。要讓擴(kuò)展使用代理接口，需要聲明proxy權(quán)限：

"permissions": [
    "proxy"
]

4.系統(tǒng)信息

Chrome提供了獲取系統(tǒng)CPU、內(nèi)存和存儲設(shè)備的信息。