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

源码如下：

源码打包

源码：

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浏览器二维码生成插件的更多相关文章

  1. jquery二维码生成插件_二维码生成器

    jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar

  2. 二维码生成插件qrious及网站扫码登录的一些理解

    什么是二维码 ​ 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...

  3. 二维码生成插件qrious

    1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...

  4. 基于jquery二维码生成插件qrcode

    1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...

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

    插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...

  6. js 二维码生成 插件

    <div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...

  7. 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO

    1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...

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

    原来用了几个生成二维码的插件,总是遇见各种问题……最后索性自己弄一个,这里顺便记录一下. Chrome 插件很开放!!!你只要拿到了crx文件,然后把文件的后缀名改为zip,就可以解压了,最后一切的一 ...

  9. HTML-DEV-ToolLink（常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具，支持在线搜索和Chrome插件。）

    HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...

随机推荐

  1. [测试] Firemonkey Android 照相自订分辨率测试

    在 Delphi 10 Seattle 提供了照相及相册自订分辨率的功能,请见官方网站教学: http://docwiki.embarcadero.com/RADStudio/Seattle/en/T ...

  2. PHP旧系统基于命名空间重构经验

    命名空间其实只是一个形式,最终目的是重构代码,但这个过程想要一蹴而就是不可能的. 一开始给了一个伪命题:基于ThinkPHP的重构(不要问为什么).经过一段的实践,发现这是一个大错特错的思维方式,其中 ...

  3. Get,Post请求中文乱码问题有效解决方法

    本文主要介绍如何有效解决web请求中的乱码问题,其实解决方法有很多种,不同的请求类型解决方法也不相同. 本文只介绍最方便的一种: 1.先修改jsp中的编码方式 2.针对Post方式提交的请求如果出现乱 ...

  4. 值栈（Structs2）

    1. 关于值栈: 1). 登陆 时, ${userName} 读取 userName 值, 实际上该属性并不在 request 等域对象中, 而是从值栈中获取的. 2). ValueStack: I. ...

  5. [moka同学笔记]Yii2 自定义class、自定义全局函数(摘录)

    1.在app\components下新建MyComponent.PHP namespace app\components; use Yii; use yii\base\Component; use y ...

  6. python学习笔记12 ----线程、进程

    进程和线程的概念 进程和线程是操作系统中两个很重要的概念,对于一般的程序,可能有若干个进程,每一个进程有若干个同时执行的线程.进程是资源管理的最小单位,线程是程序执行的最小单位(线程可共享同一进程里的 ...

  7. PHP中使用redis执行lua脚本示例

    摸索了一下在PHP中如何使用redis执行lua脚本,写了一个脚本如下,供以后参考 <?php $redis = new Redis(); #实例化redis类 $redis->conne ...

  8. C#读取Excel文件：通过OleDb连接，把excel文件作为数据源来读取

    转载于:http://developer.51cto.com/art/200908/142392.htm C#读取Excel文件可以通过直接读取和OleDb连接,把excel文件作为数据源来读取:   ...

  9. Git分支（本地）

    1.Git保存的不是文件的差异或者变化量,而只是一系列文件快照(File Snapshot):   2.暂存操作会对每一个文件计算校验和(SHA-1哈希字符串),然后把当前版本的文件快照保存到Git仓 ...

  10. scrollify.js 鼠标滚动

    在线实例 实例演示 使用方法 <! doctype html> <html> <head> <script> $(function() { $.scro ...