前言：
最近有個課程項目，由於對插件開發很感興趣，所以花了較大的功夫去研究chrome extension開發。最近一陣，讀文檔、別人的總結、示例代碼不在少數，怕以后自己忘了，所以還是趁熱打鐵寫下來。由於本人理解能力有限，對於一些現象給出的解釋可能不全面或者有偏差，歡迎大家指正！
寫博客的經歷不是很豐富，在此請允許一個小有心得的菜鳥談談chrome插件開發的一些知識，希望能對和我一樣菜鳥級別起步的人提供便利！
先來講講如何創建屬於自己的chrome插件！我假設讀者和我一樣，會一點點js的語法，能夠看得懂jQuery語句。注釋中的內容可以無視！
（實在不會，可以看看 http://www.w3school.com.cn/ 一個絕佳的自學的網站,碰到不懂的時候我也會經常查查這個網站）
=========================華麗麗的切割線================================================
進入正題:
首先，我們需要manifest.json文件來聲明我要寫的插件的相關信息。可以把manifest.json理解成插件的入口，即chrome需要通過manifest.json來理解你的插件要 引用哪些文件、需要哪些權限、插件圖標等信息。ok，那就先來寫manifest.json文件吧：
/*以我新手上陣寫的插件為例：cyber_watcher，名字看起來挺87的，其實就是追蹤用戶（也就是瀏覽器使用者=>我自己）登陸過的網址，並且根據域名進行計數。說白了，就是統計一下自己的上網習慣。*/
{ "manifest_version": 2, "name": "cyber watcher", "version": "0.0.1", "background": { "scripts": ["jquery.min.js", "background.js"] }, "browser_action": { "default_icon": "ico.png", "default_title": "cyber watcher", "default_popup": "popup/popup.html" }, "permissions" : ["tabs","http://*/*"], "content_scripts":[{ "matches":["http://*/*"], "js":["jquery.min.js", "watcher.js"], "run_at":"document_end" }] }
“manifest_version”現在都是第二個版本了，現在都需要適應新的規范，所以照着寫就可以了（第一個版本我也只是在別人的插件代碼中看到過，主要是一些manifest變量命名的方法和語法不同）；“name”就是你的插件的名稱啦~在需要擴展程序顯示名稱的時候顯示出來的文字；“version”是版本號；“background”定義后台的一些特性，比如可以為后台（后台有什么作用？先留個疑問吧！）添加腳本；“browser_action”設置擴展欄的信息，也就是為你的插件在擴展欄里面添加一個圖標（ico.png），鼠標懸浮的時候顯示插件名稱（cyber watcher），鼠標點擊的時候顯示一個彈出頁面（popup.html）；其實還有一個“page_action”，設置的是地址欄的信息，其中地址欄的圖標可以控制它是否顯現。
/*btw：擴展欄？地址欄？如下圖所示-摘自chrome開發手冊*/
/*藍色小格子 就是地址欄的圖標，黃色小格子 就是擴展欄（目測也叫工具欄）的圖標。如果你的插件只是針對於某些特定的網站，建議設置成page_action，只在登陸特定網站的時候才顯示插件圖標。btw：為你的插件找個19*19px的圖標吧~*/
/*順便吐槽一下：我就讀的學校有個大神寫了chrome選課插件，只適用於我校的選課系統，不過他居然把圖標設置在擴展欄，想到我居然發現該大神設計不合理的地方，還是有點小開心的呢！ */
"permission"設置插件的權限，其中"tabs"允許插件訪問標簽頁，后面的網址允許插件向這些網址發送ajax請求（同時還獲取了其他權限，不過對於小插件一般用不到），“http://*/*”星號是通配符，表示的就是所有http請求的頁面！“content_scripts”就是你向指定的頁面注入的js代碼，其中頁面由match指定，run_at指定的是這段js載入的時機。
注意：寫manifest.json非常痛苦的一件事情就是區分 “[” 和 “{”。在js中，“[”用於定義數組，“{”用於定義對象。基於這種理解，我們再看content_scripts屬性的構成：由於一個插件可以針對不止一個網頁/網站，content_scripts中就應該定義你所有需要導入js的頁面的導入信息，因此是一個數組，最外面是一個“[”。而數組中的每一個元素是一個對象，對象中的每個屬性對應了content_scripts的一條導入信息。其中，“js”屬性對應需要導入哪些js文件，而導入的js文件不止一個，因此又是一個數組。數組的對象之間用逗號分開，對象的屬性之間用逗號分開。不知道這樣解釋之后，看manifest.json會不會更加清晰呢？
manifest.json寫好之后，其中引用過的文件一定要被創建（比如popup.html），否則會報錯。
========================又來華麗麗的分割線===============================================
配置方法：
一個插件需要的基本東西幾乎具備了。那插件如何運行呢？
1.打開chrome右上角擴展欄里面，”三條杠“=>"工具"=>"擴展程序"，進入到chrome的插件管理頁面（這個頁面很重要，調試必要，要，要，切克鬧）；
2.選擇“載入正在開發的程序”，然后選定你插件存放的文件目錄（即包含了manifest.json的目錄），即可；
/*如果你的插件有代碼更改，需要點擊 重新加載 才能更新插件哦~*/
/*啊咧咧？“打包擴展程序”有什么用？chrome的插件格式是“.crx”后綴的，打包的話就是生成.crx文件，你如果想要把你的插件給別人用的話，可以把.crx文件發給他，然后他直接把.crx拖入到剛才說的插件管理頁面，就成功安裝了你的插件了！*/
-------------------------------------------------------------
--------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
至此，一個插件就配置好了！在寫一個實用的插件之前，我們可以先來做點簡單的測試項目：
比如我可以在把manifest中的content_scripts寫成：
"content_scripts":[{ "matches":["http://www.baidu.com/*"], "js":["test.js"] }]
在test.js中寫：
var div = document.createElement("div"); var body = document.getElementsByTagName("body")[0]; div.innerHTML = "Hello,World!"; div.style.position = "fixed";/*固定定位*/ div.style.left = "100px"; div.style.top = "100px"; /*顯示在距離窗口左邊100px，頂部100px的位置*/ div.style.color = "red"; /*字體顏色紅色*/ div.style.fontSize = "50px";/*字體大小50px*/ body.appendChild(div);
/*新手寫的代碼，沒有用jQuery，大神們見笑了*/
然后把manifest寫好，按照之前的方法配置一遍，/*記得找個好看的圖片作為你的插件圖標哦！*/ 如果你已經配置過了，就點擊“重新加載”。
登陸 百度，看看是不是在左上角顯示了一個大大的“hello,world”呢？
如果你寫了popup.html文件，那么你點擊右上角自己的插件圖標，看看彈出的是不是你寫的頁面？
/*什么？沒有出現預期的效果？兩種可能：1.你的代碼寫錯了 2.你一定是在逗我*/
/*代碼錯了？我怎么知道？
1.打開插件管理頁面，看看有沒有報錯信息，有的話一般都是出現在manifest.json的語法錯誤上，建議直接copy別人的manifest.json，然后進行修改。
2.打開控制台，看看有沒有什么報錯信息。chrome的話F12就可以快速啟動console了。*/
====================最后的華麗麗的分割線=================================================
參考閱讀：
以上內容，含部分言論，可參見我讀過的一篇博客：
[1] http://www.cnblogs.com/guogangj/p/3235703.html 谷歌chrome自然而然找到的博客，寫得很好，剛開始起步寫插件可以下載他的作品參考（我就是這么做的），我的總結，很大部分是對他的總結的再總結（摻雜了一點點我個人的理解方式）
順便貼下我寫的插件代碼（王婆賣瓜，見笑了！TAT）：
[2] watcher.zip 追蹤自己上網的記錄的一個小插件，多一份代碼，多一份參考吧...
[3] http://developer.chrome.com/extensions/getstarted chrome插件開發手冊上給的樣例，全英文的，不過挺好懂的，寫的也比較簡單，不過絕對是參考范本！