猛击就可以使用啦-》》》猛击使用
源码如下：
源码：
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; }