Chrome 插件——二维码生成笔记
原来用了几个生成二维码的插件,总是遇见各种问题……最后索性自己弄一个,这里顺便记录一下。
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 二维码生成器有长度限制,哎。今天试了一下这个网址:
报错如下:
现在还没有找到配置的地方,还是其他的,以后再弄个好的。非常抱歉!!!
Chrome 插件——二维码生成笔记的更多相关文章
- Chrome浏览器二维码生成插件
猛击就可以使用啦->>>猛击使用 源码如下: 源码打包 源码: jquery-2.1.3.min.js jquery.qrcode.min.js https://gith ...
- HTML-DEV-ToolLink(常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具,支持在线搜索和Chrome插件。)
HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- 二维码生成插件qrious及网站扫码登录的一些理解
什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- wex5 实战 二维码生成,扫描,蓝牙打印
给人设计了一个小模块,要求是,把一个单号生成二维码,实现扫描查询单号具体信息,并能通过蓝牙把二维码打印出来.功能实现并不复杂,今天一口气把它搞定.来看效果. 一 效果演示: 二.二维码生成 1 在 ...
- JavaScript二维码生成——qrcode.js
在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...
- Windows phone 8 二维码生成与扫描
1. 二维码的生成 二维码生成用到了一个第三方的插件(zxing.wp8.0) 根据指定的信息,生成对应的二维码. 代码很简单: bool falg=tbk.Text==""?fa ...
- thinkphp5 二维码生成
1.下载二维码插件Phpqrcode,地址 https://sourceforge.net/projects/phpqrcode/files/,把下载的文件夹放到\thinkphp\vendor下 2 ...
随机推荐
- Java 2018 面试
1.Java的引用有什么作用?传递的是什么? Java的引用可以用来操作对象,传递的是对象的地址 2.引用分为几种?他们的区别是什么?弱引用用在什么地方? 分四种:强引用 . 软引用 . 弱引用 . ...
- SSL/TLS握手过程
----------------------------------专栏导航----------------------------------HTTPS协议详解(一):HTTPS基础知识 HTTPS ...
- 精选 TOP45 值得学习的Python项目
精选 TOP45 值得学习的Python项目 [导读]热门资源博客 Mybridge AI 比较了 18000 个关于 Python 的项目,并从中精选出 45 个最具竞争力的项目.我们进行了翻译,在 ...
- [Swift]LeetCode436. 寻找右区间 | Find Right Interval
Given a set of intervals, for each of the interval i, check if there exists an interval j whose star ...
- [Swift]LeetCode771. 宝石与石头 | Jewels and Stones
You're given strings J representing the types of stones that are jewels, and S representing the ston ...
- SpringCloud微服务架构
1.Eureka承载大规模系统每天千万级访问的原理 1).首先每个服务的eureka client组件默认30秒发送一个请求到eureka server拉取最近有变化的服务信息: 2).eureka还 ...
- git push每次提交都要输入用户名的解决方案
前言 最近把代码从csdn转移到gitee后,每一次git push都需要输入用户名和密码,比较麻烦,那有没有一个办法可以去掉这个步骤呢? 原因 每次都需要输入用户名和密码是因为你采用的是https方 ...
- setData方法修改data中对象或数组的属性值(小程序开发)
今日在开发小程序地图的过程中,遇到一个问题,困扰了我一会 业务如下: 困扰点: 我不知道如何修改data中数组包含的对象是如何修改的:期初的想法还是想共享上面的数据,想的太简单了 正确的解决步骤: 直 ...
- Spring介绍
Spring介绍 Spring的核心是一个轻量级(Lightweight)的容器(Container),它是实现IoC(Inversion of Control)容器和非入侵性(No intrusiv ...
- Python—day10 函数的参数分类
一.实参与形参 1.形参:定义函数,在括号内声明的变量名,用来接受外界传来的值 def fn(形参们): pass def fn(a,b,c):# 形参就是考虑实参的值, ...