一个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就可以完成 ...
随机推荐
- Python初学者需要注意的问题
一.注意你的Python版本 Python官方网站为http://www.python.org/,当前最新版本为3.4.0 alpha,稳定版本为3.3.2,在3.0版本时,Python的语法改动较大 ...
- IIS7 php wordpress 中文url 标签tag中文URL404解决方法
新建重写规则: <rule name="ChineseURL" stopProcessing="true"> <match url=" ...
- jquery自定义类似$.ajax()的方法
热腾腾的代码: <script type="text/javascript"> $.extend({ testgogo: function (options) { va ...
- Appium环境抢建
原文:Appium环境抢建(for web browser test)Android SDKAppium安装 nodejs安装 Appium配置手机下载&运行测试项目Appium是Androi ...
- 彻底理解JAVA动态代理
代理设计模式 定义:为其他对象提供一种代理以控制对这个对象的访问. 代理模式的结构如下图所示. 动态代理使用 java动态代理机制以巧妙的方式实现了代理模式的设计理念. 代理模式示例代码 public ...
- SQL Server 问题 1 - SQL Server encountered error 0x80070422/0x8007042d
今天执行SQL Server 2014的full-text search 查询操作:select * from table where contains(summary, 'smith') 报出如下错 ...
- 动态密码卡TOTP算法
TOTP NET实现:http://googleauthcsharp.codeplex.com/ 引用:http://www.cnblogs.com/wangxin201492/p/5030943.h ...
- [CS231n-CNN] Linear classification II, Higher-level representations, image features, Optimization, stochastic gradient descent
课程主页:http://cs231n.stanford.edu/ loss function: -Multiclass SVM loss: 表示实际应该属于的类别的score.因此,可以发现,如果实际 ...
- C#基础总结之一变量常量-if嵌套语句-witch结构-类型转换
//Console.WriteLine("Hello World"); //打印显示 //Console.ReadLine(); //接收输入的值 //Console.ReadKe ...
- EditorWindow简单双击效果
Editor模式下的控件没有提供直接检测双击的消息,但可以简单模拟出双击检测的效果,代码如下所示: private double clickTime = 0f; ... if (GUILayout.B ...