最近看到公司同事經常寫chrome擴展，來提高生成效率，回想想自己以前也寫過chrome擴展，但是由於不經常寫，也沒做積累也都忘記了，現在重新回顧一下。
一、chrome擴展基本概念
chrome擴展應用其實是壓縮在一起的一組文件，包括HTML，CSS，Javascript腳本，圖片文件，還有其它任何需要的文件。 應用（擴展）本質上來說就是web頁面，它們可以使用所有的瀏覽器提供的API，從XMLHttpRequest到JSON到HTML5全都有。
應用（擴展）可以與Web頁面交互，或者通過content script或cross-origin XMLHttpRequests與服務器交互。應用（擴展）還可以訪問瀏覽器提供的內部功能，例如標簽或書簽等。
應用（擴展）的界面：
很多應用（不包括WebApp）會以browser action或page action的形式在瀏覽器界面上展現出來。每個應用（擴展）最多可以有一個browser action或page action。當應用（擴展）的圖標是否顯示出來是取決於單個的頁面時，應當選擇page action；當其它情況時可以選擇browser action。
比較全的
//這個json是用來給chrome讀取的，json左右兩邊都要加"" { "app": { "background": { "scripts": ["background.js"] } }, "manifest_version": 2, "name": "My Extension", "version": "versionString", "default_locale": "en", "description": "A plain text description", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "browser_action": { "default_icon": { "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title": "Extension Title", "default_popup": "popup.html" }, "page_action": { "default_icon": { "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title": "Extension Title", "default_popup": "popup.html" }, //需要數據保存程序中，如果當前用戶關閉popup，就需要Background Pages來進行相應的操作 "background": { "scripts": ["background.js"] }, //需要和網頁交互，那么他就需要一個內容腳本(Content scripts)，內容腳本常由JavaScript編寫，會在網頁載入完成后調用 "content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] } ],
//選項頁面 "options_page": "options.html", //跨域權限許可，權限 "permissions": [ "*://www.google.com/*" ], //web可訪問資源 "web_accessible_resources": [ "images/*.png" ] }
二、chrome擴展開發需要掌握的基礎知識
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來進行相應的操作。
6、chrome擴展所包含的文件
每個應用（擴展）都應該包含下面的文件：
- 一個manifest文件
- 一個或多個html文件（除非這個應用是一個皮膚）
- 可選的一個或多個javascript文件
- 可選的任何需要的其他文件，例如圖片
在開發應用（擴展）時，需要把這些文件都放到同一個目錄下。發布應用（擴展）時，這個目錄全部打包到一個應用（擴展）名是.crx的壓縮文件中。如果使用Chrome Developer Dashboard,上傳應用（擴展），可以自動生成.crx文件。
三、chrome擴展示例
目錄結構：
manifest.json文件
{ // 必須的字段 "name": "My Chrome Extension", "version": "1.0", "manifest_version": 2, // 建議提供的字段 "description": "MY SELF CHROME EXTENSION", "icons": { "48": "images/1.png" , "16" : "images/1.png" }, // "default_locale": "en", 指定這個擴展保的缺省字符串的子目錄：_lcoales。如果擴展有_locales目錄，這個字段是必須的。如果沒有_locales目錄，這個字段是必須不存在的。 // 多選一，或者都不提供 "browser_action": { "default_icon": "images/1.png" , "default_title": "My Chrome Extension", "default_popup": "index.html" } }
index.html文件：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <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> </head> <body> <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> </body> </html>
我們將文件加拖拽到chrome擴展中就會看到：
是不是很簡單，一個簡單的小例子就這樣完成了。
四、打包chrome擴展程序
在瀏覽器窗口輸入chrome://extensions/，或者菜單 ->設置 ->擴展程序，會看到有兩個菜單“加載正在開發的擴展程序”和“打包擴展程序”
我們點擊打包擴展程序：
就會看到生成了兩個文件：mychrome.pem 和 mychrome.crx， mychrome.crx解壓就可以看到元素的目錄，那么我們可以把mychrome.crx擴展上傳到chrome應用商店。
五、chrome擴展API簡介
在我們寫chrome擴展時，經常要與瀏覽器進行數據交互，下面簡單介紹幾個常用的擴展API(實例:http://blog.csdn.net/ciml/article/details/5638112 http://blog.csdn.net/ciml/article/details/5700719):
chrome.tabs.create()：調用該api將打開一個新的標簽頁。
chrome.windows.getCurrent(function callback)：該函數是獲取當前窗口，其參數是一個回調函數，在回調函數中將傳遞一個windows對象，通過該對象可以獲取窗口的基本信息，在我們的例子中主要是利用了窗口id。
chrome.tabs.getAllInWindow(integer windowId, function callback)：該接口是獲取某個窗口的所有tab頁，其第一個參數是窗口id，第二個參數是一個回調函數，在回調函數中將傳回一個tabs數組對象，數組包含了當前窗口所打開的所有tab標簽頁對象。通過數組條目獲取單個tab對象的基本信息，我們用到了tab的id和url屬性。通過url判斷，我們只將消息發送給了我們掛接了內容腳本的google首頁。
chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)：該函數從擴展頁發送消息給內容腳本，第一個參數是內容腳本所在的tab id，第二參數是消息內容，為json格式。第三為可選響應回調函數參數。
chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...}):
該接口用於掛接消息處理函數，在內容腳本和擴展頁中都一樣。收到的消息就是sendRequest發出的json格式消息。
chrome.extension.sendRequest(string extensionId, any request, function responseCallback)：從內容腳本發送消息給擴展頁。第一個參數是擴展的id，為可選參數，默認表示發送給當前擴展。第二個參數為json格式消息對象，第三個參數是可選響應回調函數參數。
消息傳遞: http://open.chrome.360.cn/html/dev_messaging.html
https://crxdoc-zh.appspot.com/apps/api_index
六、上傳chrome擴展到chrome商店
進入地址https://chrome.google.com/webstore/developer/dashboard，需要5刀，注冊才能發布。
資料來源：