周末花了点时间做了一个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

                    
                             
     
            
      
                
       请求方式：                
       Get
                       
       Post
                   
      
            
      
                
       请求地址：                
                   
      
            
      
                
       请求参数：                
                   
      
            
      
                
       响应数据：                
                   
      
            
      
       GO!
      
            
      
        
     
    

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插件，不过目前没什么需求，如果大家有什么好想法就告诉我。