Chrome浏览器二维码生成插件
猛击就可以使用啦-》》》猛击使用
源码如下：
源码：
jquery-2.1.3.min.js
jquery.qrcode.min.js
https://github.com/jeromeetienne/jquery-qrcode
spectrum.css
spectrum.js
https://github.com/bgrins/spectrum
manifest.json
{
"manifest_version": 2,
"name": "二维码生成"
,
"version": "2.0"
,
"description": "直接生成当前网页的二维码，方便穿越到手机！"
,
"icons":
{
"16": "16.png"
,
"48": "48.png"
,
"128": "128.png"
},
"options_page": "options.html"
,
"permissions":
[
"tabs"
],
"browser_action":
{
"default_icon": "48.png"
,
"default_popup": "popup.html"
}
}
options.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项</title>
<script src="jquery-2.1.3.min.js"></script> <script src='spectrum.js'></script>
<link rel='styleSheet' href="spectrum.css" /> </head> <body>
<div style="text-align:center;font-size:18px">
<p><img src="set.png"> <span style="font-size:32px"> 设置</span></p>
<p></p>
<p>设置您的二维码尺寸</p>
<p>
<label for="qrsize"></label>
<select name="qrsize" id="qrsize">
<option value="48">48*48</option>
<option value="96">96*96</option>
<option value="120" selected="selected">120*120</option>
<option value="144">144*144</option>
<option value="180">180*180</option>
</select>
</p>
<p>
<input name="qrshow" type="checkbox" id="qrshow" value="1" checked="CHECKED" />
显示二维码下方的“自定义生成”功能</p>
<p></p>
<p></p>
<p>颜色：</p>
<p>前景色：<input type="text" id="fore"/> 背景色:<input type="text" id="back"/> </p>
<p>前景色应该比背景色更深。</p>
<p></p>
<p><span style="color:red">本页设置将自动保存</span></p> </p>
</div>
</body> <script src="options.js"></script> </html>
options.js
$(function(){
var qrfore= localStorage["qrfore"];
var qrback= localStorage["qrback"];
$("#fore").spectrum({
color: (qrfore?qrfore:"#000"),
change: function(color) {
save_options();
}
});
$("#back").spectrum({
color: (qrback?qrback:"#FFF"),
change: function(color) {
save_options();
}
});
$("#qrsize").change(function(){
save_options();
});
$("#qrshow").click(function(){
save_options();
});
});
function save_options() {
var select = document.getElementById("qrsize");
var qr_size = select.children[select.selectedIndex].value;
localStorage["qr_size"] = qr_size;
var qrshow = document.getElementById("qrshow");
if(qrshow.checked==true){
localStorage["qrshow"] = "t";
}
else
{
localStorage["qrshow"] = "f";
}
var qrfore=$("#fore").spectrum("get").toHexString();
var qrback=$("#back").spectrum("get").toHexString();
localStorage["qrfore"] = qrfore;
localStorage["qrback"] = qrback;
}
function restore_options() {
var qrshow = document.getElementById("qrshow");
if( localStorage["qrshow"]=="f")
{
qrshow.checked=false;
}
else
{
qrshow.checked=true;
}
var qr_size = localStorage["qr_size"];
if (!qr_size) {
return;
}
var select = document.getElementById("qrsize");
for (var i = 0; i < select.children.length; i++) {
var child = select.children[i];
if (child.value == qr_size) {
child.selected = "true";
break;
}
}
}
document.addEventListener('DOMContentLoaded', restore_options);
popup.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
<script src="popup.js"></script> </head>
<body>
<p><div id="qrcode"></div> </p>
<p></p> <p><input type="text" id="getval" size="10"></p>
<p></p>
<button id="send">生成</button> <a href="options.html" target="_blank" style="font-size:18px">设置</a> </body> </html>
popup.js
$(function(){
//$(document).ready(function(){})可以简写成$(function(){});
if( localStorage["qrshow"]=="f") {
$("#getval").hide();
$("#send").hide();
}
$("#send").click(function() {
$("#qrcode").empty() ;
qr($("#getval").val());
}) ;
});
chrome.tabs.getSelected(null,function(tab){
qr(tab.url);
});
function qr(text) {
var text=utf16to8(text);
var qrsize = localStorage["qr_size"];
var qrfore= localStorage["qrfore"];
var qrback= localStorage["qrback"];
var size;
if(!qrsize) {
size = 120;
}
else {
size=parseInt(qrsize);
}
$("#qrcode").qrcode({
width : size,
height:size,
text: text,
foreground: (qrfore?qrfore:"#000"),
background: (qrback?qrback:"#FFF"),
});
$("#getval").css("width",size);
}
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
Chrome浏览器二维码生成插件的更多相关文章
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- 二维码生成插件qrious及网站扫码登录的一些理解
什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- js 二维码生成 插件
<div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...
- 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
- Chrome 插件——二维码生成笔记
原来用了几个生成二维码的插件,总是遇见各种问题……最后索性自己弄一个,这里顺便记录一下. Chrome 插件很开放!!!你只要拿到了crx文件,然后把文件的后缀名改为zip,就可以解压了,最后一切的一 ...
- HTML-DEV-ToolLink（常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具，支持在线搜索和Chrome插件。）
HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...
随机推荐
- iOS阶段学习第21天笔记(ARC内存管理-Copy-代理)
iOS学习(OC语言)知识点整理 一.OC 中的ARC内存管理 1)ARC中释放对象的内存原则:看这个对象有没有强引用指向它 2)strong:强引用,默认情况下的引用都是强引用 3) weak:弱引 ...
- MEF入门之不求甚解，但力求简单能讲明白(二)
在上一篇文章中,我们已经学到了很基本的MEF概念和使用方法. 但我们导出的是一个object类型的实例,只能用来tostring,没有引用部件类库,也不能用里面的成员方法. 本篇,我们逐渐往简单的文件 ...
- Angular 2 要来了，Wijmo 已准备好迎接
Angular 是一款优秀的前端JS框架,已被用于Google的多款产品中,其核心特点是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等.6年过去了,Angular 迎来了2.0版本. ...
- CRC编码
一.循环冗余码校验英文名称为Cyclical Redundancy Check,简称CRC. 它是利用除法及余数的原理来作错误侦测(Error Detecting)的.实际应用时,发送装置计算出CRC ...
- C语言Scanf函数
C语言的scanf函数 一.变量的内存分析 (一)字节与地址 ①. 内存以字节为单位 每个字节都有自己的内存地址,根据地址就可以找到该字节.整个内存相当于一整个酒店,而酒店以房间为单位,在这里每个房间 ...
- JSESSIONID与SESSION
用spring security的时候遇到了一个很诡异的问题: 已经登录的用户,而且没有标记remember-me,在重启服务器之后还会显示已经登录状态 这就严重啦,这样子如果要在session中储存 ...
- Hello.js – Web 服务授权的 JavaScript SDK
Hello.js 是一个客户端的 Javascript SDK,用于实现 OAuth2 认证(或者基于 OAuth 代理实现的 OAuth1)的 Web 服务和查询 REST API. HelloJS ...
- 经典网页设计：20个华丽的 iPhone 应用程序演示网站
一个物品销售很好,重要的原因之一是它的包装,因为这是最重要的细节,可以把一个人转变成购买者.一个好的包装设计和良好的表现比产品本身更重要,因此被分配了大量的金钱和资源,以创造伟大的东西. 因此,为了销 ...
- 【HTML5】HTML5本地数据库（Web Sql Database）
Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...
- FeatureLayer，FeatureDataset，FeatureClass，Feature的概念
刚学AE,其中很多概念都模糊不清.经过一段时间的摸索总结,对FeatureLayer,FeatureDataset,FeatureClass,Feature几个概念有了一点认识.拿出来分享一下,有错误 ...