编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

一个小Chrome拓展HttpPost

作者:海角在眼前  发布日期:2013-12-11 21:55:30
  • 收藏本文    我要投稿
  • 周末花了点时间做了一个chrome拓展,叫HttpPost,顾名思义是用来测试http的post请求。

    先直接看效果

    data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1211/20131211200730150.png

    插件与拓展

    在说这个做的过程前,先说明什么是Chrome插件、Chrome拓展

    1.开发语言区别
    拓展:HTML + Javascript
    插件:理论上可以用任何一种生成二进制程序的语言,比如 C/C++


    2.功能上区别
    拓展:通过调用Chrome提供的Chrome API扩展浏览器功能的一种组件
    插件:调用Webkit内核NPAPI来扩展内核功能的一种组件

    3.层次区别
    拓展: 浏览器应用层
    插件:浏览器的底层

    但并不是说两者之间没有关系,

    Chrome 扩展本身也支持包含 Plug-in 模块,这部分可以使用 C/C++ 等语言开发。比如 web QQ 的截图扩展,就是用了这项功能。 

    如果把浏览器比作操作系统,扩展就好比工具类应用程序,插件则好比驱动程序。(某个贴说的)

    现在开始说做的过程

    data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1211/20131211200730151.png

    最终完成就是以上的文件

    这里面最重要的是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插件,不过目前没什么需求,如果大家有什么好想法就告诉我。

延伸阅读:

Tag标签:一个  Chrome  拓展  
  • 专题推荐