三个Chrome拓展——HttpPost

周二花了点时间做了三个chrome拓展,叫HttpPost,顾名思义是用来测试http的post请求。

先直接看功能

图片 1

插件与展开

在说那几个做的长河前,先证实怎么样是Chrome插件、Chrome拓展

1.支付语言分化
拓展:HTML + Javascript
插件:理论上得以用任何一种变更二进制程序的语言,比如 C/C++

2.意义上分别
进展:通过调用Chrome提供的Chrome API扩大浏览器功效的一种组件
插件:调用Webkit内核NPAPI来扩展内核功用的一种组件

3.层次分歧
进行: 浏览器应用层
插件:浏览器的底部

但并不是说两者之间没有提到,

Chrome 扩充自笔者也协理包罗 Plug-in 模块,那有的能够选用 C/C++
等语言开发。比如 web QQ 的截图扩张,正是用了那项功用。 

借使把浏览器比作操作系统,扩充就好比工具类应用程序,插件则好比驱动程序。(有些贴说的)

未来开班说做的历程

图片 2

末段达成正是以上的公文

那之中最根本的是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">
                请求方式:
                <label>Get</label><input name="method" type="radio" value="GET" />
                <label>Post</label><input name="method" type="radio" value="POST" />
            </div>
            <div class="">
                请求地址:
                <input name="url" type="text" />
            </div>
            <div class="">
                请求参数:
                <textarea name="data" class="reqData"></textarea>
            </div>
            <div class="">
                响应数据:
                <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插件,可是当下没什么须求,如若我们有哪些好想法就报告笔者。