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

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

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

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

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

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

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

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

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

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

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

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

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

"options_page": "options.html"

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

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

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

runtime.sendMessage完整的方法為：

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

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

runtime.onMessage完整的方法為：

chrome.runtime.onMessage.addListener(callback)

此處的callback為必選參數(shù)，為回調(diào)函數(shù)。callback接收到的參數(shù)有三個(gè)，分別是message、sender和sendResponse，即消息內(nèi)容、消息發(fā)送者相關(guān)信息和相應(yīng)函數(shù)。其中sender對(duì)象包含4個(gè)屬性，分別是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的類(lèi)型為對(duì)象，可以包含三個(gè)屬性，分別是imageData、path和tabId。

2.Popup頁(yè)面

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

使用帶有滾動(dòng)條的DIV容器。

設(shè)計(jì)一個(gè)更好的滾動(dòng)條樣式。

考慮屏蔽右鍵菜單。

使用外部引用的腳本。

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

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

3.標(biāo)題和badge

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

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

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

Badge相當(dāng)于APP未讀消息數(shù)的小氣泡。目前只能夠通過(guò)JavaScript設(shè)定顯示的內(nèi)容，同時(shí)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)頁(yè)中點(diǎn)擊鼠標(biāo)右鍵后，會(huì)喚出一個(gè)菜單，在上面有復(fù)制、粘貼和翻譯等選項(xiàng)，為用戶提供快捷便利的功能。Chrome也將這里開(kāi)放給了開(kāi)發(fā)者，也就是說(shuō)我們可以把自己所編寫(xiě)的擴(kuò)展功能放到右鍵菜單中。

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

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

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

"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();

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

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

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

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

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

1.書(shū)簽

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

"permissions": [
    "bookmarks"
]

2.Cookies

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

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

3.歷史

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

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

"permissions": [
    "history"
]

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

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

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

"permissions": [
    "management"
]

5.標(biāo)簽

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

"permissions": [
    "tabs"
]

6.Override Pages

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

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

"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: 請(qǐng)求方式（POST或GET），
    headers: 自定義header數(shù)組,
    body: POST的數(shù)據(jù)
}

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

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

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

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

3.代理

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

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

"permissions": [
    "proxy"
]

4.系統(tǒng)信息

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