Chrome浏览器二维码生成插件

时间：2015-06-03 23:19:35 阅读：244 评论：0 收藏：0 [点我收藏+]

标签：

猛击就可以使用啦-》》》猛击使用

源码如下：

源码打包

源码：

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;  
}

Chrome浏览器二维码生成插件

标签：

原文地址：http://www.cnblogs.com/xcr1234/p/4550240.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行