`
king_tt
  • 浏览: 2112795 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Chrome插件开发入门

 
阅读更多

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

分享到：
| Visual Studio 常用快捷键
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics