因為平時上網都用chrome，但總感覺除了速度快，簡潔以外總還有地方滿足不了我的需要，然后找插件…后來發現，插件雖然海量但找個稱心如意的也不是件容易的事兒，用在找插件的時間都能自己寫一個了，於是，今年夏天開始的閑暇時間也寫了幾個，然后在應用中心斷斷續續發布了，這些插件原本是給自己用的，但也有幾個用戶專門找我提出了他們的需求。
從開始的不懂到現在三兩下就能玩兒一個，走了點遠路，今天在這里寫下從開發到發布的簡單流程，都是很簡單的知識
一個可用的插件至少包括一個manifest.json和一個js文件
manifest.json
每個插件都有個manifest.json文件，此文件相當於C里的main()，文件結構是典型的json對象：
1 { 2 "name": "應用名字", 3 "description":"應用的描述，以后發布到商城里，看到名字后第二看到的信息", 4 "version": "1.0", 5 "background": { "scripts": ["list.js","background.js"] },//后台運行的文件，比如相應插件消息的函數所在的文件等 6 "permissions": [ 7 "tabs", "bookmarks","http://*/*","https://*/*" //插件運行“位置”，tab頁、書簽頁、網頁等 8 ], 9 "browser_action": { 10 "name": "Click to change the icon's color", 11 "default_title": "指向插件圖標時顯示的提示信息，可以有換行轉義字符如\n—————————————\n第一行\n·第二行\n·第三行" 12 }, 13 "icons": {"16": "icon16.png", "48": "icon48.png", "128": "icon128.png"},//配置插件各處顯示的圖標，其中包括在插件管理頁面、應用商城中顯示的圖標等 14 "options_page": "options.html", //配置頁面，無選項頁面時不用設置 15 "manifest_version": 2, //這個必須是2，其他值在導致插件不支持新版本chrome瀏覽器 16 "web_accessible_resources":["greenrain.png","test.css","icon100.png"],//插件運行時，想在頁面使用或引用的資源文件必須在此處標明一下，否則chrome不允許訪問 17 "content_scripts": [ 18 {//插件開始運行時立即導入的文件在此設置，必要的js文件在此處添加設置 19 "matches": ["http://*/*","https://*/*"], 20 "css": ["test.css"], 21 "js": ["jquery-1.7.2.min.js","xxxx.js"] 22 } 23 ] 24 }
本文件有一點需要注意：那就是，千萬記得本文件不要加注釋……正式發布時候沒有提示的，只是提示不成功，郁悶（//和/**/都不行，上邊的代碼有注釋是為了說明功能。）不要加注釋啊不要加注釋啊……
xxxx.js
需要執行的頁面操作在本文件中完成，典型的包括dom操作、消息請求等
1 (function () 2 { 3 var profile = [],test=10; 4 alert("插件正在運行"); 5 chrome.extension.sendRequest({ method: "getProfile" ,number:test}, function (response) 6 {//發起請求，獲取基本配置 7 if (response.data != undefined && response.data != "") 8 { 9 alert("插件收到消息"); 10 } 11 } 12 })();
background.js
通常用於處理接收消息、操作插件運行數據、瀏覽器行為調用等，比如圖標顯示、提醒。
1 (function () 2 { 3 chrome.browserAction.setIcon({ path: "img/icon0.png" });//圖標 4 })(); 5 var min = 0, max = 10, current=0; 6 function updateIcon(number) 7 { 8 chrome.browserAction.setIcon({ path: "icon" + current + ".png" });//切換圖標 9 10 if(number){ 11 if (number == 0) number = ""; 12 chrome.browserAction.setBadgeText({ text: String(number) });//更新圖標提示文字 13 } 14 else{ 15 chrome.browserAction.setBadgeText({ text: String(current) });//提示透明度文字 16 } 17 18 chrome.tabs.executeScript(null, { code: "document.getElementById('testDom').style.opacity = " + parseInt(current) / 10 + ";" });//點擊圖標即時執行腳本調整透明度 19 20 current++; 21 if (current > max) 22 { 23 current = min; 24 } 25 } 26 chrome.browserAction.onClicked.addListener(updateIcon);//添加監聽事件 27 chrome.extension.onRequest.addListener(function (request, sender, sendResponse) 28 {//返回請求數據 29 if (request.method == "getProfile") 30 { 31 var counter = request.number; 32 updateIcon(counter); 33 sendResponse({"test":"result"}); 34 } 35 });
注：以上代碼說明用，可能有錯
配置頁面
通常是設置用戶保存的數據，有人用cookie，我比較喜歡用localstorage儲存，反正不用考慮瀏覽器兼容問題等。
關於發布
chrome應用商店發布應用不收費已經是過去式，現在要想發布個插件得先拿5美刀好處費給谷歌，“此路是我開，此樹是我栽，要想……”，誰讓咱在人家的路上走呢，乖乖交錢才行。不過有個問題需要提醒一下：付賬時候大陸是不能直接付款的，選擇國家要選擇中國香港，信用卡也不是全支持，我只知道用招行付款成功。發布了之后當然希望用戶越來越多，但是發現推廣這個活兒還真不會。
以下是我做的幾個插件，同為碼農的你也可能會有用，也順便打個小廣告;-)
第一個插件：“網頁記單詞”
上網時間一多就有點后悔的感覺，然后就想把平時上網的時間用來背幾個單詞，找了很久沒找到合適的插件，得，自己動手，於是乎第一個插件誕生。單擊插件圖標調整透明度，單詞從屏幕上一條一條閃過，對鼠標設置了有影無形，不耽誤操作，提供的單詞表滿足不了需要時還可以自己配置，英法德意日、提醒什么的各種東西隨便塞。
第二個插件：“聚光燈”
這是在完成第一個插件余溫未散的情況下完成的，這個插件可以讓用戶專心致志讀網頁上的某一部分，用鼠標拾取dom，其余的用遮罩蓋住，想看其他地方隨便一點就能復原，還加了快捷鍵和視頻高亮，在應用商店里有個“關燈看視頻”用戶已經達到了幾十W！我發現我這個比他那個好用的多，但是不會推廣，用戶沒幾個……這個插件同時提供了中英文版本。
還能這樣：
第三個插件：“屏蔽微博廣告”
昨天剛剛完成的一個。近段時間發現現在再上新浪微博沒有以前舒心了，很喜歡的用戶都特么在發各種廣告、推薦關注，本來是來散散心，結果弄了個心煩意亂，一下午搞定，用起來還不錯，對於廣告微博的識別率還是相當高的。用上了就發現那幾個“全球XXX”真惡心，各種廣告，有的甚至全部都是，取消關注。
最后希望本文對你有用。