摘要：了解擴展程序開發本文大量借鑒圖靈電子書擴展及應用開發首發版首先，我嘗試來用簡單幾句話描述一下擴展程序擴展主要用于對瀏覽器功能的增強，它強調與瀏覽器相結合。提供了接口，允許擴展對用戶的歷史進行管理。

本文大量借鑒圖靈電子書-Chrome擴展及應用開發（首發版）

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

Chrome擴展主要用于對瀏覽器功能的增強，它強調與瀏覽器相結合。比如Chrome擴展可以在瀏覽器的工具欄和地址欄中顯示圖標，它可以更改用戶當前瀏覽的網頁中的內容，也可以更改瀏覽器代理服務器的設置等等。

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

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

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

值得一提的是，Google允許Chrome擴展應用不必受限于跨域限制?？缬蛑傅氖荍avaScript通過XMLHttpRequest請求數據時，調用JavaScript的頁面所在的域和被請求頁面的域不一致。對于網站來說，瀏覽器出于安全考慮是不允許跨域。這個規則如果同樣限制Chrome擴展應用，就會使其能力大打折扣，所以Google允許Chrome擴展應用不必受限于跨域限制。但出于安全考慮，需要在Manifest的permissions屬性中聲明需要跨域的權限。

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

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

有時我們希望擴展不僅在用戶主動發起時（如開啟特定頁面或點擊擴展圖標等）才運行，而是希望擴展自動運行并常駐后臺來實現一些特定的功能，比如實時提示未讀郵件數量、后臺播放音樂等等。

Chrome允許擴展應用在后臺常駐一個頁面以實現這樣的功能。在一些典型的擴展中，UI頁面，如popup頁面或者options頁面，在需要更新一些狀態時，會向后臺頁面請求數據，而當后臺頁面檢測到狀態發生改變時，也會通知UI界面刷新。后臺頁面與UI頁面可以相互通信.

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

"options_page": "options.html"

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

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

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

runtime.sendMessage完整的方法為：

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

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

runtime.onMessage完整的方法為：

chrome.runtime.onMessage.addListener(callback)

此處的callback為必選參數，為回調函數。callback接收到的參數有三個，分別是message、sender和sendResponse，即消息內容、消息發送者相關信息和相應函數。其中sender對象包含4個屬性，分別是tab、id、url和tlsChannelId，tab是發起消息的標簽

1.圖標

"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頁面的設計更像是瀏覽器的一部分，但popup頁面并不適用于所有情況。由于其在關閉后，就相當于用戶關閉了相應的標簽頁。當用戶再次打開這個頁面時，所有的DOM和js空間變量都將被重新創建。

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

設計一個更好的滾動條樣式。

考慮屏蔽右鍵菜單。

使用外部引用的腳本。

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

不要在popup頁面的js空間變量中保存數據。

3.標題和badge

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

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

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

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

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

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

要將擴展加入到右鍵菜單中，首先要在Manifest的permissions域中聲明contextMenus權限。

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

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

"permissions": [
    "notifications"
]

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

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

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

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

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

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

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

1.書簽

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

"permissions": [
    "bookmarks"
]

2.Cookies

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

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

3.歷史

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

要使用history接口，需要在Manifest中聲明history權限：

"permissions": [
    "history"
]

4.管理擴展與應用

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

要使用management接口，需要在Manifest中聲明management權限：

"permissions": [
    "management"
]

5.標簽

Chrome通過tabs方法提供了管理標簽的方法與監聽標簽行為的事件，大多數方法與事件是無需聲明特殊權限的，但有關標簽的url、title和favIconUrl的操作（包括讀?。?，都需要聲明tabs權限。

"permissions": [
    "tabs"
]

6.Override Pages

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

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

"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數組,
    body: POST的數據
}

2.網絡請求

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

要對網絡請求進行操作，需要在Manifest中聲明webRequest權限以及相關被操作的URL。如需要阻止網絡請求，需要聲明webRequestBlocking權限。

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

3.代理

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

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

"permissions": [
    "proxy"
]

4.系統信息

Chrome提供了獲取系統CPU、內存和存儲設備的信息。