您的位置：首页 > 其它

Chrome插件开发入门

2013-12-11 19:10 344 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航