Chrome插件是令人驚訝的簡單，一旦你弄懂它的工作和實現原理。它是由一部分HTML,一部分Js，然后混合了一個叫做manifest.json的Json文件組合而成的整體。這意味着你可以使用你最擅長的js框架去實現它。
如果你還是一個Chrome插件的新手並且想嘗試寫一個的話，下面的文章將會帶領大家並且嘗試讓大家理解Chrome插件的工作機制。這篇文章將會講述每一塊架構，以及相互之間的聯系和插件的一般化形式。
架構
Chrome插件中的文件大體上可以分成2部分：Chrome插件中確確實實存在的文件，並且是應用程序級別的,如上圖的Chrome Extension Scripts以及注入到每個網頁Dom當中的文件（如Content Scripts 或者Injected Scripts）.這些文件都被放在manifest.json當中，Chrome內部會自動識別不同個文件的作用。
在任何時候，popup和background都只有一份，相比較起來，如果你有多個Tab(這里的Tab指的是Chrome當中的選項卡，也就是一個窗口頁面),那么Content Scripts和 Injected Scripts會運行在每一個Tab當中，也就是可以跨選項卡。當然，你可以指定往哪個Tab當中去注入Scripts,也就是說，注入操作是可選擇的。
下面是一些它們如何工作的細節：
Manifest.json
- 這個Json文件是把backgrounds, popups, content scripts 和injected scripts 放在一起，並以結構化的方式書寫。
- 設置擴展，如Permission。
- 設置擴展的基本信息。
Background
- Javascript文件總是運行在后台（在老版本的Chrome當中，background是html文件並且嵌入了javascript）.
- 沒有顯示界面。
- 有Chrome應用程序級別命令的訪問權限。
- 有使用所有Chrome API的權限
Popup
- 點擊插件圖標會顯示出Html和Javascirpt.
- 也擁有應用程序級別的權限（和background一樣）
- 只有當Chrome插件的圖標點擊的時候才觸發。
- 對所有的pop-up Chrome API有使用權限。
Content Scripts
- 擁有一部分Api的使用權限（比如從backgorund監聽消息）
- 對於頁面Dom有完整的訪問權限，但是對於任何window級別的對象沒有訪問權限（比如全局變量），對於frame也沒有訪問權限；這是因為安全限制。
- Content scripts運行在介於插件和頁面之間，全局的window對象是和頁面/插件全局命名空間完全不同的。
Injected Scripts
- 和Contente Scripts 一樣，只擁有部分Api的使用權限
- 注入當前Tab的網頁當中，並不與插件進行通信。
關聯關系
他們之間的聯系只要你弄懂了整體的架構，我相信就會很明了。
在應用程序級別的部分是可以有互相訪問的權限的。比如Popup文件能用chrome.extension.getBackgroundPage()訪問background里面的東西，這就好像Backbone 視圖可以訪問他們的Model和Collection。
Content Scripts是存在於每個獨立的Dom頁面，和background和popup用message的方式進行通信交流。特別的，它可以使用chrome.tabs.sendMessage和chrome.runtime.onMessage.addListener去向對方發送消息。這和Backbone 的事件系統很像.
Injected Scripts和Content Scripts的不同在於它不能監聽或者發送消息給其他的Chrome插件部分。
結構
組織你的Chrome插件，能更好的讓你分清楚不同的文件的不同作用。不同的項目的組織結構都可以是相似的，下面列舉了一種組織形式，大家可以參考一下。
Manifest.json把所有的需要的文件都放在一起了，需要注意的一點是文件是按順序被編譯的，所以被依賴的文件往往是放在實際的script文件之前的，下面的代碼中，jquery.js實在content scripts中的recorder.js和player.js之前的。
{ "manifest_version": 2, # 插件基本信息 "name": "MyExtension", "description": "MyExtension", "version": "1.0.0", # popup彈出窗文件位置 "browser_action": { "default_icon": "img/icon.png", "default_popup": "popups/popup.html" }, # 設置 content scripts 以及什么時候注入什么類型的頁面 "content_scripts": [{ "matches": ["http://*/*","https://*/*"], "css":["styles/styles.css"], "js": [ "bower_components/jquery/dist/jquery.min.js", "content-scripts/recorder.js", "content-scripts/player.js", ] }], # 設置background的scripts "background": { "scripts": [ "bower_components/jquery/dist/jquery.min.js", "bg/background.js" ] }, # 腳本的權限 "permissions": [ "<all_urls>", "tabs", "storage", "unlimitedStorage" ] }
動手做一個Chrome插件
說了再多，不做也是沒用的。我們先新建一個Manifest.json文件，復制如下代碼：
{ "manifest_version": 2, "name": "GTmetrix Analyzer Plugin", "description": "This extension will analyze a page using GTmetrix", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }
其中有幾點需要注意，browser_action 這個指定了點擊插件的時候，彈出的頁面以及 插件的圖標。Permission 就是指定了哪些URL對於這個插件是有用的，比如你可以輸入特定的域名，那么只有在這個域名下，這個插件才有用。
下面我們來新建一個popup.html頁面，代碼如下。
<!doctype html>
<html>
<head>
<title>GTmetrix Analyzer</title>
<script src="popup.js"></script>
</head>
<body>
<h1>GTmetrix Analyzer</h1>
<button id="checkPage">Check this page now!</button>
</body>
</html>
大家可能注意到了我其實使用了一個popus.js的文件，這個其實是為了實現點擊checkPage時候的效果所必須的腳本，下面我們新建一個popup.js的文件。
ocument.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {
chrome.tabs.getSelected(null, function(tab) {
d = document;
var f = d.createElement('form');
f.action = 'http://gtmetrix.com/analyze.html?bm';
f.method = 'post';
var i = d.createElement('input');
i.type = 'hidden';
i.name = 'url';
i.value = tab.url;
f.appendChild(i);
d.body.appendChild(f);
f.submit();
});
}, false);
}, false);
細心的人不難發現，上面的代碼就是向某個網站發一個post請求,checkPage其實是注冊了click事件的，一旦按鈕被點擊了，我們就會獲取到當前活動Tab並且執行一些js代碼。
那么怎么測試我們的插件呢？在Chrome地址欄輸入chrome://extensions，打開開發者模式，然后點擊加載已解壓的擴展程序，選擇相對應的目錄就OK了，如果你的插件修改過，別忘了點一下重新加載(Ctrl+R)按鈕。
最終效果如下：
總結
因為Chrome插件涉及的知識點很多，所以一次也講不完，以后如果有時間，我會把我學到的東西和大家分享，另外這個插件也是我這2天學的，因為公司要做一個信息自動刷新的功能，所以才想到了Chrome插件，不過很可惜，競賽完了，我並沒得獎，也小小吐槽下吧。