一个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就可以完成 ...
随机推荐
- Appium环境抢建
原文:Appium环境抢建(for web browser test)Android SDKAppium安装 nodejs安装 Appium配置手机下载&运行测试项目Appium是Androi ...
- 电商大促准备流程v2
1 概述 对于电商企业而言,每年都会有几次大的促销活动,像双十一.店庆等,对于第一次参加这个活动的新手,难免会有些没有头绪,因而将自己参加双十一.双十二活动中的过程心得进行下总结,一方面供以后工作中继 ...
- google chrome set
"D:\Program Files\Google\Chrome\Application\chrome_bk.exe" --start-maximized --user-data-d ...
- asp.net 客户端上传文件全路径获取方法
asp.net 获取客户端上传文件全路径方法: eg:F:\test\1.doc 基于浏览器安全问题,浏览器将屏蔽获取客户端文件全路径的方法,只能获取到文件的文件名,如果需要获取全路径则需要另想其他 ...
- windows下mysql远程访问慢
在my.conf中加入 skip-name-resolve
- 正确理解静态Static关键字
与其他语言不通,C#没有全局变量和全局函数的感念,C#的所有字段和方法都出现在一个类的上下文中,在C#中与全局字段或函数等价的就是静态字段或方法.“全局字段或方法”与“C#的静态字段或方法”没有功能上 ...
- Java--解决java compiler level does not match the version of the installed java project facet错误
从网上下载了个项目,导入eclipse时发现如下错误: 检查后发现原来是JDK版本不一致的问题,项目的默认JDK配置是1.5,而自己电脑上是1.7. 需要修改两个地方的配置,如下图所示: 修改一: 修 ...
- TypeScript札记：初体验
1.简介 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript是一种 ...
- [IR] Probabilistic Model
If user has told us some relevant and some irrelevant documents, then we can proceed to build a prob ...
- 邮箱mail 发送类 ASP.NET C#
没有牛B的设计模式,代码精练精练实用,功能齐全,调用简单 ..全全完完为码农考虑 MailSmtp ms = new MailSmtp("smtp.qq.com","12 ...