一个Chrome拓展——HttpPost
周末花了点时间做了一个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插件，不过目前没什么需求，如果大家有什么好想法就告诉我。
