周末花了點時間做了一個chrome拓展，叫HttpPost，顧名思義是用來測試http的post請求。
先直接看效果
插件與拓展
在說這個做的過程前，先說明什么是Chrome插件、Chrome拓展
1.開發語言區別
拓展：HTML + Javascript
插件：理論上可以用任何一種生成二進制程序的語言，比如 C/C++
2.功能上區別
拓展：通過調用Chrome提供的Chrome API擴展瀏覽器功能的一種組件
插件：調用Webkit內核NPAPI來擴展內核功能的一種組件
3.層次區別
拓展： 瀏覽器應用層
插件：瀏覽器的底層
但並不是說兩者之間沒有關系，
Chrome 擴展本身也支持包含 Plug-in 模塊，這部分可以使用 C/C++ 等語言開發。比如 web QQ 的截圖擴展，就是用了這項功能。
如果把瀏覽器比作操作系統，擴展就好比工具類應用程序，插件則好比驅動程序。（某個貼說的）
現在開始說做的過程
最終完成就是以上的文件
這里面最重要的是manifest.json這個文件
{ "name": "HttpPost", "version": "1.0.0", "manifest_version": 2, "description": "此插件能夠讓你更簡單測試HttpPost請求", "icons": { "128": "httppost_128.png", "48": "httppost_48.png", "16": "httppost_16.png" }, "permissions": [ "http://*/", "https://*/" ], "browser_action": { "default_icon": "httppost.png", "default_popup": "popup.html" } }
這里就不講里面屬性的意義，本身屬性的名稱已經很明顯了。
就講下
permissions，表明這個拓展的所需要的權限，"http://*/","https://*/"，表明能訪問http,https的域名，不會出現跨域問題。
browser_action：表明名的是拓展的類型，拓展有三種類型page_action, browser_action, app
popup.html
這個就是效果圖里的HTML
<!doctype html> <html> <head> <title>HttpPost Test</title> <link rel="stylesheet" type="text/css" href="layout.css" /> <script type="text/javascript" src="popup.js"></script> </head> <body> <div class="container"> <div class="reqMethod"> <span>請求方式：</span> <label>Get</label><input name="method" type="radio" value="GET" /> <label>Post</label><input name="method" type="radio" value="POST" /> </div> <div class=""> <span>請求地址：</span> <input name="url" type="text" /> </div> <div class=""> <span>請求參數：</span> <textarea name="data" class="reqData"></textarea> </div> <div class=""> <span>響應數據：</span> <textarea name="responseData"></textarea> </div> <div class=""><button type="button" id="go" class="">GO!</button></div> <div style="clear:both"></div> </div> </body> </html>
popup.js
這跟普通的javascript沒什么區別，但是下面的特點是全部都是用原生的JS。
(function(){ document.addEventListener('DOMContentLoaded', function () { Event.beginRequest(); Event.bindRadio(); }); var DataManage = { getRequestData : function(){ var result = { method : document.querySelector("input[name=method]:checked").value, url : document.querySelector("input[name=url]").value, data : document.querySelector("textarea[name=data]").value }; return result; }, setResponseData : function(res){ document.querySelector("textarea[name=responseData]").value = res.responseText; } } var Ajax = { req : function (params, callback) { var req = Ajax.getRequest(callback); req.open(params.method, params.url, true); req.send(params.data); }, getRequest : function (callback) { var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState != 4) return; if (req.status == 200) { callback(req); } else { alert("請求失敗:" + req.statusText); } return true; }; return req; } }; var Event = { beginRequest : function(){ var goBtn = document.querySelector("#go"); goBtn.addEventListener('click', function(){ var result = DataManage.getRequestData(); Ajax.req(result, function(res){ DataManage.setResponseData(res); }); }, false); }, bindRadio : function(){ var labels = document.querySelectorAll(".reqMethod label"); labels[0].addEventListener('click', function(){ document.querySelector("input[value=GET]").checked = true; }, false); labels[1].addEventListener('click', function(){ document.querySelector("input[value=POST]").checked = true; }, false); } } })();
樣式就不放出來了。
PS:本來想直接把源碼放上來，但是好像沒有上傳資源地方。
總結
做Chrome拓展是非常簡單的，只需要HTML+Javascript就行了，下次做一個Chrome插件，不過目前沒什么需求，如果大家有什么好想法就告訴我。