popup.js

Chrome 扩大自个儿也帮助包括 Plug-in 模块,那部分能够行使 C/C++
等语言开发。比如 web QQ 的截图扩张,正是用了那项作用。 

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

末尾成功便是以上的公文

{    
    "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"
    }
}

当今伊始说做的长河

3.层次差异
进展: 浏览器应用层
插件:浏览器的最底层

体制就不放出来了。

就讲下

2.效应上有别
展开:通过调用Chrome提供的Chrome API扩充浏览器成效的一种组件
插件:调用Webkit内核NPAPI来扩张内核功用的一种组件

1.开发语言不一样
拓展:HTML + Javascript
插件:理论上能够用别的一种变更二进制造进度序的言语,比如 C/C++

permissions,注明那么些进行的所须要的权杖,”http://\*/","https://\*/",表明能访问http,https的域名,不会出现跨域问题。

以此正是作用图里的HTML

那里面最要紧的是manifest.json这一个文件

PS:本来想直接把源码放上来,不过好像没有上传财富地点。

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

popup.html

先直接看作用

图片 1

那跟一般的javascript没怎么界别,不过上边包车型客车特色是全部都以用原生的JS。

插件与拓展

<!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>

那边就不讲当中属性的含义,本身质量的名称已经很理解了。

browser_action:表明名的是进展的连串,拓展有三连串型page_action, browser_action,
app

在说那几个做的长河前,先表明什么是Chrome插件、Chrome拓展

(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);
        }
    }
})();

图片 2

做Chrome拓展是11分简单的,只供给HTML+Javascript就行了,下次做多个Chrome插件,然而当下没什么须求,假诺我们有如何好想法就告诉小编。

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

总结

相关文章

网站地图xml地图