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格式化.正则表达式.时间 ...
随机推荐
- C# ~ 数据库连接
C#连接数据库(SQL Server)进行数据的读取和写入,学习之. 1. 数据库连接 服务器:“Data Source=服务器IP; Initial Catalog=数据库; User ID=用户名 ...
- 走进异步世界:EnyimMemcached异步化改造引起的内存泄漏
6月30日我们发布了异步化改造后的博客程序之后,出现了高内存.高CPU.高线程数的不理想情况. 经过一周的追查,终于水落日出——引起不理想情况的根源是我们修改过的EnyimMemcached代码存在内 ...
- Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”
整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...
- LeetCode3:Longest Substring Without Repeating Characters
题目: Given a string, find the length of the longest substring without repeating characters. For examp ...
- Struts 2.3.24源码解析+Struts2拦截参数,处理请求,返回到前台过程详析
Struts2官网:http://struts.apache.org/ 目前最新版本:Struts 2.3.24 Struts1已经完全被淘汰了,而Struts2是借鉴了webwork的设计理念而设计 ...
- ORM实现原理
1.什么是ORM ORM的全称是Object Relational Mapping,即对象关系映射.它的实现思想就是将关系数据库中表的数据映射成为对象,以对象的形式展现,这样开发人员就可以把对数据库的 ...
- Java空白final
Java 1.1允许我们创建"空白final",它们属于一些特殊的字段.尽管被申明为final,但却未得到一个初始值. 无论在哪种情况下,空白final都必须在实际使用前得到正确的 ...
- 熟悉scss
//html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- SQL SERVER常用定义查询
https://msdn.microsoft.com/en-us/library/ms175081.aspx
- LBS数据分析:使用地图展示统计数据——麻点图与麻数图
作为一个LBS的APP,都获得了用户经纬度,也都使用了友盟统计.google ana等等统计分析系统,不过没有地图展示功能,不能进行直观的展示. 友盟统计.google ana等系统是总体数据统计,无 ...