一个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就可以完成 ...
随机推荐
- POJ 2785 4 Values whose Sum is 0
4 Values whose Sum is 0 Time Limit: 15000MS Memory Limit: 228000K Total Submissions: 13069 Accep ...
- ionic介绍
ionic介绍 Ionic是一个前端的框架,帮助开发者使用HTML5, CSS3和JavaScript做出原生应用. The beautiful, open source front-end fram ...
- c# 靠谱的bitmap转byte[]
public static byte[] Bitmap2Byte(Bitmap bitmap) { using (MemoryStream stream = new MemoryStream()) { ...
- Access“输入的表达式中含有一个无效日期值”
环境:access2003 + win7 有图有真相: 明显地看到,日期那里显示了“星期X”,问题的根源就在这里... 更改计算机的日期显示设置为不显示星期~ 方法:点击右下角的时钟-点击“更改日期和 ...
- [原]零基础学习在Android进行SDL开发系列文章
[原]零基础学习SDL开发之移植SDL2.0到Android [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图 [原]零基础学习SDL开发之在Android使用SDL2.0显示 ...
- Inkpad中文翻译已合并到官方项目
今天 Steve Sprang 已合并了#100提交请求,Inkpad即将在AppStore上发布简体中文版了! 20天前因一个偶然原因启动翻译的: 当晚(周六)我想对iPad上的矢量绘图软件进行交互 ...
- HANA Studio打开系统显示Secure storage is locked
之前一直用着好好的,今天打开HANA Studio突然发现一个系统都不在了: 提示:‘Secure storage is locked’ 我点旁边的Unlocked没有任何反应,右键也没有功能了.如下 ...
- Android JNI开发生成.h头文件问题
在JNI开发中,首先要将建立的anroid类编译成.h文件,编译用到命令javah,由于第一次用,以前对java的编译过程也不怎么了解,所以走了好多弯路,网络没有对这一步的详细介绍,这里讲一下: 通过 ...
- chrome 插件 vimium 像操作vim一样的操作浏览器
感谢潘德龙同学推荐的插件非常好用整理出来一些常用快捷键记下,顺便分享! x 关闭当前页 GW 跳出浏览器 J 展示左边页签 K展示右边页签 j向下滚动 k向上滚动 /搜索 ?打开帮助 r 刷新当前页 ...
- linux VM复制多个IP配置出错的处理
device eth0 does not seem to be present, delaying initialization (2012-09-13 21:16:38) 转载▼ 标签: 杂谈 ...