一个Chrome拓展——HttpPost
周末花了点时间做了一个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插件，不过目前没什么需求，如果大家有什么好想法就告诉我。
一个Chrome拓展——HttpPost的更多相关文章
- chrome拓展开发实战：页面脚本的拦截注入
原文请访问个人博客:chrome拓展开发实战:页面脚本的拦截注入 目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过requirejs进行统一管理, ...
- chrome拓展开发实战
chrome拓展开发实战:页面脚本的拦截注入 时间 2015-07-24 11:15:00 博客园精华区 原文 http://www.cnblogs.com/horve/p/4672890.htm ...
- [翻译]在Windows版或MacOS版的Microsoft Edge上安装一个谷歌浏览器拓展
原文:Install a Chrome Web Store extension on Microsoft Edge for Windows and MacOS 拓展阅读:What to expect ...
- 【包教包会】Chrome拓展开发实践
首发于微信公众号<前端成长记>,写于 2019.10.18 导读 有句老话说的好,好记性不如烂笔头.人生中,总有那么些东西你愿去执笔写下. 本文旨在把整个开发的过程和遇到的问题及解决方案记 ...
- 动手做第一个Chrome插件
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...
- 我的第一个chrome扩展（1）——读样例，实现时钟
学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest ...
- 如何通过写一个chrome扩展启动本地程序
@(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...
- 记录一个chrome 65渲染的bug
前段时间发现一个chrome 65+的BUG(chrome已更新到66,BUG仍然存在),一个元素同时使用了以下样式(失去焦点和css3的Z轴平移0deg),渲染异常 /*bug style*/ fi ...
- 如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
随机推荐
- 转战farbox
好久没更新博客了,感觉在博客园这种技术为主的博客里面写太多东西写得太杂了,平时的阅读体验非常糟糕,我一直都是一个喜欢记录的人,以前经常有在笔记本上写日记的习惯,但是自从用了网上博客之后,好像就再也没有 ...
- 几种图片下载lib对比
- JSON跨域请求
原理:首先客户机会注册一个callback,在发送跨域请求之前,会在url后附带注册的callback参数(如:callback1982342322),随后服务器拿到了callback参数,获取数据后 ...
- java攻城狮之路(Android篇)--BroadcastReceiver&Service
四大组件:activity 显示. contentProvider 对外暴露自己的数据给其他的应用程序.BroadcastReceiver 广播接收者,必须指定要接收的广播类型.必须明确的指定acti ...
- MVVMlight框架应用：Data Binding、Command
常用Wpf开发中我们在ViewModel中实现INotifyPropertyChanged接口,通过触发PropertyChanged事件达到通知UI更改的目的:在MVVMLight框架里,这里我们定 ...
- IDL中histogram的应用
前面一段时间在使用Histogram时一直是不能更好的理解其中的奥秘,通过阅读帮助以及查看相应的文档,终于理解了其中的玄机,很多时候是因为在学习的时候英文不知道翻译成什么样的内容比较合理,这样就给后面 ...
- 二叉查找树(二)之 C++的实现
概要 上一章介绍了"二叉查找树的相关理论知识,并通过C语言实现了二叉查找树".这一章给出二叉查找树的C++版本.这里不再对树的相关概念进行介绍,若遇到不明白的概念,可以在上一章查找 ...
- [IR] Information Extraction
阶段性总结 Boolean retrieval 单词搜索 [Qword1 and Qword2] O(x+y) [Qword1 and Qword2]- 改进: Gallo ...
- 4、总结：基于Oracle Logminer数据同步
最近开发Oracle数据同步功能,做了些调研和验证,这个工作过去有段时间,怕时间长了忘记,故用博客共享出来.在这系列中共写了三篇文章,第一篇是写LogMiner配置及使用,第二篇是测试了LogMine ...
- js关于对象键值为数字型时输出的对象自动排序问题的解决方法
一.对象键值为数字型时输出的对象自动排序问题如: var objs = { "1603":{id:"1603"}, "1702" ...