原来用了几个生成二维码的插件，总是遇见各种问题……最后索性自己弄一个，这里顺便记录一下。

　　Chrome 插件很开放！！！你只要拿到了crx文件，然后把文件的后缀名改为zip，就可以解压了，最后一切的一切……

　　此次学习参考：http://open.chrome.360.cn/extension_dev/overview.html  ，用到的Javascript二维码生成器为 https://github.com/davidshimjs/qrcodejs

　　1、先看一下，目录结构

　　最主要的就是上图打开的文件：Manifest.json，他是扩展的入口或者说明文件。本扩展用到的一些配置上图中都有说明，就不打字了。

　　注意：最后一行的 "permissions":["tabs"] 需要注意，列出扩展需要的权限，开始没有弄这个东西，取不到url地址…………

　　2、上代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>ddz qrcode</title>

    <style>

        .ddz {

            height: 101px;

            width: 100%;

            background-image: url(./images/ddz.png);

            background-position: center;

            background-repeat: no-repeat;

        }

        #qrcode {

            width: 250px;

            height: 250px;

            margin-top: 15px;

        }

    </style>

    <script src="./lib/qrcode.min.js"></script>

    <script src="popup.js"></script>

</head>

<body>

    <div class="ddz"></div>

    <div id="qrcode"></div>

</body>

</html>

展示二维码的html页面

chrome.tabs.getSelected(null, function(tab) {

    var QRCodeContainer = document.getElementById("qrcode");

    var qrcode = new QRCode(QRCodeContainer, {

        width: QRCodeContainer.clientWidth,

        height: QRCodeContainer.clientHeight

    });

    if (tab.url) {

        qrcode.makeCode(tab.url);

    }

});

对应的JS代码

　　3、测试

　　3.1、在浏览器中输入：chrome://extensions/ 并启用“开发者模式”

　　3.2、点击“加载已解压的扩展程序…” 选择你的“扩展程序目录” 就安装上了。非常方便……

　　3.3 生成二维码测试，如下图

　　4、最后打包成crx，点击“打包扩展程序…”，然后依然选择扩展程序根目录（私有密钥文件可以不选，他会自动生成一个密钥？？？文件），最后“打包扩展程序”就OK了！

　　到此结束。

　　2017-09-29更新：

　　尴尬啊！！！昨天才弄得，今天再用就出错了……该扩展采用的Javascript 二维码生成器有长度限制，哎。今天试了一下这个网址：

　　https://azure.microsoft.com/en-us/blog/serverless-for-all-developers-bringing-azure-functions-to-linux-mac-planet-scale-nosql-real-time-analytics-and-productivity-apps/?utm_source=vs_developer_news&utm_medium=referral

　　报错如下：

　　现在还没有找到配置的地方，还是其他的，以后再弄个好的。非常抱歉！！！

Chrome 插件——二维码生成笔记的更多相关文章

  1. Chrome浏览器二维码生成插件

      猛击就可以使用啦->>>猛击使用   源码如下: 源码打包   源码: jquery-2.1.3.min.js jquery.qrcode.min.js https://gith ...

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

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

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

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

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

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

  5. 二维码生成插件qrious

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

  6. wex5 实战 二维码生成，扫描，蓝牙打印

    给人设计了一个小模块,要求是,把一个单号生成二维码,实现扫描查询单号具体信息,并能通过蓝牙把二维码打印出来.功能实现并不复杂,今天一口气把它搞定.来看效果. 一   效果演示: 二.二维码生成 1 在 ...

  7. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  8. Windows phone 8 二维码生成与扫描

    1. 二维码的生成 二维码生成用到了一个第三方的插件(zxing.wp8.0) 根据指定的信息,生成对应的二维码. 代码很简单: bool falg=tbk.Text==""?fa ...

  9. thinkphp5 二维码生成

    1.下载二维码插件Phpqrcode,地址 https://sourceforge.net/projects/phpqrcode/files/,把下载的文件夹放到\thinkphp\vendor下 2 ...

随机推荐

  1. FCC（ES6写法） Inventory Update

    依照一个存着新进货物的二维数组,更新存着现有库存(在 arr1 中)的二维数组. 如果货物已存在则更新数量 . 如果没有对应货物则把其加入到数组中,更新最新的数量. 返回当前的库存数组,且按货物名称的 ...

  2. C语言面试题分类->回调

    本文主要讲解如果实现回调,特别是在封装接口的时候,回调显得特别重要,我们首先假设有两个程序员在写代码,A程序员写底层驱动接口,B程序员写上层应用程序,然而此时底层驱动接口A有一个数据d需要传输给B,此 ...

  3. High Availability手册(1): 环境

    三台KVM虚拟机 首先我们得有一个pacemaker的环境,需要三台机器,如果没有那么多物理机器,可以用kvm虚拟机 创建一个bridge ovs-vsctl add-br ubuntu_br ifc ...

  4. Android OpenGL ES 开发（五）: OpenGL ES 使用投影和相机视图

    OpenGL ES环境允许你以更接近于你眼睛看到的物理对象的方式来显示你绘制的对象.物理查看的模拟是通过对你所绘制的对象的坐标进行数学变换完成的: Projection - 这个变换是基于他们所显示的 ...

  5. 吴恩达机器学习笔记52-异常检测的问题动机与高斯分布（Problem Motivation of Anomaly Detection& Gaussian Distribution）

    一.问题动机 异常检测(Anomaly detection)问题是机器学习算法的一个常见应用.这种算法的一个有趣之处在于:它虽然主要用于非监督学习问题,但从某些角度看,它又类似于一些监督学习问题. 给 ...

  6. [Swift]LeetCode337. 打家劫舍 III | House Robber III

    The thief has found himself a new place for his thievery again. There is only one entrance to this a ...

  7. Linux 下源码编译FFMEG

    目录 1. 安装依赖关系 2. 源码安装 yasm 3. 源码安装 NASM 4. 源码安装libx264 5. 源码安装x265 6. 源码安装 libmp3lame 7. 源码安装 libopus ...

  8. java客户端与服务端交互通用处理 框架解析

    一.综述 java 客户端与服务端交互过程中,采用NIO通讯是异步的,客户端基本采用同一处理范式,来进行同异步的调用处理. 处理模型有以下几个要素: 1. NIO发送消息后返回的Future 2. 每 ...

  9. Zara带你快速入门WPF(3)---触发器篇

    一.前言 使用触发器,可以动态的改变控件的外观,因为一些事件或属性改变了,把鼠标移动到按钮上,按钮就会改变其外观.通常这些必须写在C#代码中,使用WPF也可以使用XAMl实现,而这只会影响UI. 属性 ...

  10. TypeScript 素描 - 模块、命名空间

    /* 其实前面一些都是废话,因为都和C#类似.从模块开始就需要深入的去理解了 文档反复声明了 内部模块现在称做 命令空间 外部模块称为 模块 模块在其自身的作用域里执行,而不是在全局作用域里,也就是说 ...