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;
}
时间: 2024-10-18 02:34:14

Chrome浏览器二维码生成插件的相关文章

JS二维码生成插件,一键生成二维码

jquery.qrcode是个依赖jquery的二维码生成插件,主要用于连接和文本的二维码生成,有两种生成格式canvas和table格式的,当然canvas不支持低版本浏览器,table有点小bug,但是没啥大问题.建议使用在移动端上. 这儿插件可以扩展开发,本来也是MIT协议的东西,后期我有可能会加点其他的功能,目前考虑的是加logo了,其他的再说. 这个js插件可以点击生成,列表生成都是可以的,写的方法跟JQ是一样的,不懂得可以留言. [github地址:https://github.co

二维码生成插件(jquery.qrcode.js)说明文档

jquery.qrcode.js 是一个纯浏览器用于生成二维码图片的插件,生成的 QRcode 无需下载图片,并且不依赖第三方服务,下面插件使用的是压缩版本,大小不超过4K qrcode.js 是实现二维码数据计算的核心类, jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)默认是canvas,canvas方式还支持右键图片下载 使用方法(jquery.qrcode.min.js)-----轻量级实现方式

二维码生成插件

(vue)二维码生成插件 一.vue-qr二维码插件(Image版) 1. 安装 // 使用node的npm安装 npm install vue-qr --save // 使用yarn安装 yarn add vue-qr 2. 引用项目 <VueQr draggable="false" :correctLevel="3" :dotScale="1" :logoSrc="logo" :margin="15&quo

jquery二维码生成插件jquery.qrcode.js

插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com/jquery-info294 如何使用它 将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> <script type="text/javascrip

Android 生成带Logo的二维码或普通的二维码,后续将会推出一个java exe二维码生成插件

前几天在做微信绑定的时候,利用 Google Zxing 完成了一系列项目需求,可能后续还会更进,做得更人性化,比如自定义二维码,自定义LOGO,单个二维码绑定硬件设备,绕过 官方API限制,达到扫一次绑定公众号的需要 这次就不贴代码了,另外我把生成和保存的代码都注释了,包括二维码内容的填充,保存地址,都有详细的标识,有时间就写一个java swing exe 插件给大家用,跨平台的那种, 就是不管你电脑里有没有装 java 都可以用的插件 这里我就不上代码了,上几个效果图给大家看看生成效果,然

Chrome 插件——二维码生成笔记

原来用了几个生成二维码的插件,总是遇见各种问题--最后索性自己弄一个,这里顺便记录一下. Chrome 插件很开放!!!你只要拿到了ocx文件,然后把文件的后缀名改为zip,就可以解压了,最后一切的一切-- 此次学习参考:http://open.chrome.360.cn/extension_dev/overview.html  ,用到的Javascript二维码生成器为 https://github.com/davidshimjs/qrcodejs 1.先看一下,目录结构 最主要的就是上图打开

在云平台上基于Go语言+Google图表API提供二维码生成应用

二维码能够说已经深深的融入了我们的生活其中.到处可见它的身影:但通常我们都是去扫二维码, 曾经我们分享给朋友一个网址直接把Url发过去,如今我们能够把自己的信息生成二维码再分享给他人. 这里就分享一下基于Go语言+Google图表API提供二维码生成功能的小应用,并演示怎样把它公布到云平台上, 让每一个人都能够通过网络訪问使用它. Google图表API Google在http://chart.apis.google.com 上提供了一个将表单数据自己主动转换为图表的服务. 只是,该服务非常难交

二维码生成工厂

本次主要分享的是3个免费的二维码接口的对接代码和测试得出的注意点及区别,有更好处理方式多多交流,相互促进进步:最近在学习JavsScript的扩展TypeScript,感觉语法糖很甜,大部分与C#更为类似,可能都是微软项目的原因吧,有兴趣的朋友可以多多相互交流下: 以上是个人的看法,下面来正式分享今天的文章吧: . Google的Api二维码生成接口 . 2d-code的Api二维码生成接口 . topscan的Api二维码生成接口 . 使用面向对象+加载程序集创建对象合并以上接口封装成二维码生

安卓实现二维码生成和扫描功能,扫描支持直接拍照扫码和相册图片扫码,还加了照明功能

最近在做二维码的生成和扫描,生成二维码相对而言较为简单,扫描相对复杂,遇到的问题较多,但是在实现二维码的生成和扫描之前最重要的一步 就是讲Zxing包导入,后面的内容大部分是使用包中的内容, 那我就从二维码的生成讲起吧! 二维码生成: 直接贴代码了 1 //要转换的地址或字符串,可以是中文,输入内容生成二维码 2 public Bitmap createQRImage(String string) { 3 try { 4 Hashtable<EncodeHintType, String> hi