Chrome浏览器二维码生成插件

时间:2024-01-18 16:57:08

Chrome浏览器二维码生成插件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">&nbsp;设置</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"/> &nbsp; 背景色:<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;
}