目錄：
如果你對GmailAssist感興趣，可以在chrome商店中搜索“Gmail助手”，或點擊這里直接訪問商店來安裝試用；
如果你對GmailAssist的源碼感興趣，可以在我的GitHub上查看它的源碼。
一個Chrome擴展包括一系列文件，HTML文件、CSS樣式文件、JavaScript腳本、圖片等，以及一個最有特點的manifest.json。
1. manifest.json是啥
它是每個chrome擴展有且只有一個的清單文件，它指明了該擴展的基本信息，如名稱、版本、需要的權限等等，格式是json。
JSON
JSON是一種獨立於語言和平台的數據格式，JSON對象就是一種格式化的靜態的數據，接下來的chrome擴展中各模塊之間交換信息就是用這種格式。傳送時就是作為簡單的字符串來傳，js在收到json數據的時候可以看成對象來解析，其中可以有層次。其實不僅chrome擴展模塊之間的數據交流可以用這種格式，跨應用跨平台的數據交流也可以用這種格式，因為它的數據冗余度很小，並且可讀性很好，也容易解析（在我前面的介紹中“JSON”和“json”都有，因為這個大小寫是無所謂的，指的都是同一個東西）。下面的manifest.json就可以作為一個例子。
而*.json格式的文件，其內容就是一個json對象。manifest.json就是用這樣一種格式化的方法來指明了一個chrome擴展的基本信息。
manifest.json
直接舉例來說吧，GmailAssist的manifest.json的部分內容如下：
{ "manifest_version": 2, "name": "Gmail郵箱附件處理助手", "version": "1.9", "default_locale": "en", "description": "查詢郵箱內全部附件，支持批量下載，支持批量添加至最新的草稿。要開始使用，在登錄Gmail后，點擊地址欄右端圖標，選擇“授權”即可。", "icons": { "48": "images/icon48.png", "128": "images/icon128.png" }, "short_name": "GmailAssist", "page_action": { "default_icon": { "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title" : "__MSG_extName__", "default_popup": "popup.html" }, "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [ { "js": ["oauth2/oauth2_inject.js"], "matches": [ "http://www.google.com/robots.txt*"], "run_at": "document_start" }, {...} ], ... }
首先，作為我們理解json格式的例子，上面這段被'{'和'}'括起來的，就是一個json對象。說白了一個json對象就是一個結構體，其中有各個字段，不同字段之間用逗號隔開，最后一個字段后面不需要逗號。每個字段都是“key:value”這樣的形式，每個“key”就可以理解為這個結構體的一個屬性，一個具體的屬性必然有一個具體的值。（不同於C語言的struct，這里你不需要提前聲明一個結構體內有哪些屬性，也不需要為每個屬性指定其類型，如C語言的int、char等，其類型會在js中解析時自動判斷。而類似於C語言中struct的聲明的“內容模板”，是不需要你操心的，僅就manifest.json而言，chrome已經定義好了一套“模板”，你在寫你的manifest時，按chrome要求的規范來就可以）
json對象中可以包含多個並列的字段（屬性），每個屬性的值可以是這幾種類型中的一個：字符串、數字、對象、數組、布爾和null。字符串就是一串字符直接拿雙引號("")括起來（比如例子中的name屬性的值"Gmail郵箱附件處理助手"），數字就是不帶引號（如例子中manifest_version的值2），數組就是用'['、']'括起來的一個或多個元素（這個元素就可以是上面說的字符串、數字、對象、數組等中的一個，當然了，一個數組內的元素們必須是同種類型），布爾就是true、false（不加引號）。每種類型都可以在上面的例子中找到對應的實例。
你的擴展程序在發布和安裝的時候，chrome商店和chrome都會檢查manifest.json，從中獲取必要的信息，並且檢查你寫的是否合法（例如，如果你的popup.html中有內嵌的js腳本，而你的"content_security_policy"字段是空，你在試圖讓chrome加載你的擴展程序時，它就會提示錯誤。這些現在不懂沒關系，目前還不重要，有個大概的印象就行，到后面自然會明白）。所謂的必要信息，不僅是一些給人看的信息（如擴展的名稱、簡稱、簡介等），還有給瀏覽器看的信息（如content_script、page_action等字段），后者通知了chrome你的程序的入口等程序運行相關的信息。
具體來說有幾個常用字段：
有三個屬性是必須的：name, version, manifest_version。
1、"name": 你的擴展程序的名稱；
字符串，可以包括中文。這里補充說一點，manifest.json需要按UTF-8編碼格式來保存，否則在加載到瀏覽器中時會報錯。
2、"version": 指你的擴展程序的版本號；
字符串，注意雖然版本號一般都是一串數，但它應該是用字符串來表示，而不是數字，所以別忘了引號。版本號最多可以是用3個.分隔的4個數，比如"1.0.0.16"。
3、"manifest_version": 指定清單文件格式的版本（數字）；
在Chrome18之后（在chrome中打開chrome://help即可查看當前你的chrome版本），應該都是2，所以直接寫2即可。
其他常用字段，我這里只介紹GmailAssist中涉及的，完整的介紹可以參考google官方的文檔。另外多說一點，容易百度到，360有一份漢化的chrome擴展開發文檔，但我記得這份文檔並不太完整，而且翻譯質量不是太高，讀着比較費勁。為了方便，還是去看google官方的文檔吧，畢竟技術人員寫的文檔，沒什么難懂的長難句的，很好讀，而且翻譯總難免有一些不確切的地方，看官方的文檔還是比較保險。（再多說一句，可能新手在翻牆上還會有障礙，推薦一個傻瓜式的小工具，藍燈（Lantern），效果非常好自行百度下載吧）
"default_locale": 這個是指定你的擴展的默認顯示的語言，涉及國際化內容，后面會介紹；
"description": 你的擴展的描述，它是顯示在chrome應用商店中和chrome擴展頁面的，如下圖。（其中，商店中顯示的應該是你在manifest中通過default_locale指定的默認語言，我這里指定的是英文）
（補充：設置瀏覽器語言可以通過：1.打開chrome的設置頁；2.往下拉找到“顯示高級設置...”，點它；3.再往下拉找到“語言”-“語言和輸入設置”，點它；4.點左下角的添加，選擇你要的語言並確定；5.在左側列表中點你要的語言，在右側點“以這種語言顯示Google Chrome”；6.重啟Chrome）
"description"中還有"icons"字段，它指定你的擴展程序的圖標，數字表明分辨率（如128表示圖片分辨率為128*128像素）。
"short_name"：你的擴展的簡稱，這個可有可無。
"page_action": 與之平級的還有另一個字段"browser_action"，你的manifest中最多出現二者之一。直觀地來說，這倆屬性分別指明你的擴展在特定網頁中才能用，還是打開瀏覽器后一直能用。更直觀的就是，你的擴展的圖標出現的位置不同，如下圖。
圖中是地址欄的最右端，顯然地址欄里外各有幾個圖標。地址欄里的對應的就是指定了page_action的擴展（如GmailAssist），地址欄外的對應的就是指定了browser_action了的。開發時，根據你的需要決定用哪個，並在manifest中指定page_action或browser_action即可。因為GmailAssist是針對Gmail的，所以應該讓它在用戶在瀏覽Gmail郵箱時可用，其他時候就直接匿了就行，因此咱們選擇page_action。（browser_action和page_action是差不多的，具體細節可以看谷歌的文檔）
注意到page_action中有幾個字段：
"default_icon"指定你的擴展在地址欄中顯示的圖標，和前面的description中的icons類似，數字指明分辨率。與description中的icons不同之處在於，后者是指定了在chrome的擴展管理頁面（chrome://extension）等處顯示的圖標，而前者是僅僅指地址欄內的圖標。Chrome默認選擇19像素的圖片，對retina屏顯示38像素的。這幾個圖標不是所有的分辨率都需要各自指定一張圖片，但為了保證顯示效果，最好是把我這里涉及的幾種大小都准備一張圖片。如果你不指定自己的圖標，也是可以的，chrome會顯示一個默認圖標。如果你需要圖標動態變化，可以參考setIcon（https://developer.chrome.com/extensions/browserAction#method-setIcon）或badge（和setIcon在同一個頁面中介紹的）。
"default_title" 是當你鼠標懸停在地址欄中的圖標上時，顯示的說明文字。
"default_popup" 是你點擊擴展圖標時，在圖標下面彈出的小窗口，如下圖是GmailAssist的popup頁面。
下面將要提到的幾個屬性，這里只是暫時進行概念的簡單介紹，估計新手很難一下子理解，沒關系，有個印象就行，后面我會分別具體說明。
"background": 你的擴展如果需要什么在后台持續運行的部分，就可以通過這個字段來指出。不僅是js，你還可以指定一個自己編寫的html，像這樣：
"background": { "page": "background.html", "scripts": ["background.js"], "persistent": false }
如果僅僅指定js，chrome會自己生成一個html來在后台跑你指定的腳本；當然如果指定了你自己寫的html，它也不會顯示出來。
"persistent"值默認為true。為true時，你在background字段中指出的js腳本（注意格式是數組，因而可以有多個腳本）將持續運行在后台，而若persistent為false，則這些腳本將只在事件活動時運行，事件不活動時就會釋放其占有的內存等資源。
"content_scripts": 這個屬性的內容是一個對象數組，數組內每個對象都指明一系列js腳本及其將要注入的頁面（支持通配符*），以及注入時機（可以為"document_start"、"document_end" 或 "document_idle"，默認為 "document_idle"）。
說明一下，這里的腳本是注入到你要操作DOM的頁面的，但這個注入，並不同於在頁面中直接寫一條引入外部腳本語句。直接在頁面中引入的多個js之間是共享命名空間的，但content_script與它們之間是獨立的，content_script和頁面原有js僅共享頁面的DOM元素。在GmailAssist開發初期，這個地方給我帶來了一些麻煩，后面我會細說。
暫時介紹這么多字段，這些可以說是最常用的，其他的還有一些很常用，如"permission"等，GmailAssist中涉及的，我會在后面慢慢介紹；而GmailAssist中未涉及的，請參考谷歌的文檔。
2. 國際化（多語言支持）相關的文件
在支持多語言的擴展中，除了開頭提到的HTML、CSS、js等文件，還會有一個文件夾"_locales"，其結構如圖：
其中有en, zh兩個文件夾，表明GmailAssist分別有英文、中文兩個版本。兩個文件夾下各有一個文件，叫"messages.json"（兩個文件夾中的文件都是這個名字），其中格式化地記錄着你的插件將要用到的不同語言版本的各個字符串，例如：細心的話，你可能注意到在上面的manifest.json中"page_action"字段下有個"default_title"，其值為"__MSG_extName__"。前面說過，這個字段說明了你鼠標放在圖標上會浮出的文字。這個部分就是用了國際化（i18n）的處理，針對不同的語言，這個浮出的文字將顯示不同的內容。具體到這個例子上，在_locales->zh文件夾下的messages.json中，就有這樣一段：
{ "extName":{ "message":"Gmail附件助手" }, ... }
同樣的，在_locales->en文件夾下的messages.json中，有這樣一段：
{ "extName":{ "message":"Gmail Attachment Manager" }, ... }
注意到"extName"就正對應着"__MSG_extName__"，在插件運行時，chrome就會把"__MSG_extName__"，根據當前用戶瀏覽器設置的語言，去插件中_locales文件夾下去找當前語言對應的messages.json，並從中找到"extName"對應的字段，把這個字段中的message屬性的值取出，替換掉"__MSG_extName__"。
因此，在zh文件夾中的messages.json，在en文件夾中有一個所有字段key值相同但value值不同的副本。當然，也不要求所有的messages.json都有完整的各個字段名，當chrome去當前語言對應的文件中找不到需要的message內容時，它就會去默認語言的文件夾中找。例如，如果有對應zh-CN（簡體中文）的一份messages.json，又有一份zh的，還有一份en的；當前用戶瀏覽器的語言設置為zh-CN，插件manifest中聲明的默認語言為en；但zh-CN和zh中的json文件里都沒有"extName"字段，那么chrome在查找時會遵循zh-CN，zh，en這樣的順序，找到為止。
messages.json中每個key都可以有另一個字段——"description"，用於說明這個key的含義，這個字段是針對翻譯人員的，如果你打算自己翻譯，就可以不寫這個字段。另外，chrome還要求，在manifest.json中聲明default_locale字段，和在插件中設置_locales文件夾（即采用國際化）是充要的關系，即有一個就得有另一個，沒有這個就不能有那個。
國際化相關的內容，這里沒有介紹完，還有一部分放在后面講腳本時再介紹。
3. 其他的文件
還有一些 *.html，*.css，*.js，都是寫網頁必然會接觸的。復雜的高級特性可以暫時不去深入理解，但基本的語法是很容易掌握的，w3cschool的教程足夠詳盡，如果你是新手，完全可以花點時間先去學習一下這三者內容中基本的東西。
一個擴展的大體文件結構就是這樣，下一篇介紹chrome擴展中的腳本是如何運行及通信的。
最后附上兩個鏈接：
http://www.ituring.com.cn/minibook/950，這本書在我剛接觸chrome extension的時候提供了非常大的幫助，講解非常清晰，並且配有許多小例子幫助理解。
https://crxdoc-zh.appspot.com/extensions/getstarted，這是網上的個人翻譯的chrome擴展及應用開發文檔，我個人認為翻譯質量比360那個文檔要高，但我仍然建議你參考谷歌官方的英文文檔，而只把這個作為輔助。