Chrome扩展学习Demo(三)：将浏览器地址栏的网址转换为二维码

场景：将当前地址栏网址转换为二维码

效果图：

代码截图：

manifest.json

{"manifest_version": 2,"name": "将浏览器地址栏网址转换为二维码","version": "1.0","description": "将浏览器地址栏网址转换为二维码","icons": {"48": "icon.png"},"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"},"permissions": ["http://*/*", // 可以通过executeScript或者insertCSS访问的网站"https://*/*"// 可以通过executeScript或者insertCSS访问的网站]
}

popup.html

<!DOCTYPE html>
<html>
<head><title>Website turn to QRcode</title><script src="jquery-2.1.3.min.js"></script><script src="jquery.qrcode.min.js"></script><script src="popup.js"></script>
</head><body>
<p id="website">http://blog.csdn.net/xiaoxiong_jiaxin</p>
<p id="title"></p>
<div id="QRcode"></div>
</body>
</html>

popup.js

function getCurrentTabUrl(callback) {//获取当前标签的网址和标题chrome.tabs.getSelected(function (tab) {var tabUrl = tab.url;var tabTitle = tab.title;callback(tabUrl, tabTitle);});
}//监听点击时间
document.addEventListener('DOMContentLoaded', function () {getCurrentTabUrl(function (tabUrl, tabTitle) {var website = document.getElementById('website');var title = document.getElementById('title');website.textContent = "URL: " + tabUrl;title.textContent = "TITLE: " + tabTitle;//生成二维码jQuery('#QRcode').qrcode(tabUrl);});});

Chrome扩展学习Demo(三)：将浏览器地址栏的网址转换为二维码相关推荐

H5+在浏览器中打开相机扫描二维码
刚开始提出要在手机浏览器中的HTML页面做扫描是有点懵的,一顿百度后搜到两种方法: 方案一,浏览器中打开相机navigator.mediaDevices.getUserMedia 自带浏览器不支持该属 ...
Chrome浏览器地址栏配置二维码自动生成工具
打开Chrome浏览器新开一个窗口地址栏输入 chrome://flags/ 搜索qr code 下拉框选择Enable选项重启浏览器即可点击需要生成二维码的网页地址栏出现如下图标点击小图标 ...
QReader：Chrome 浏览器上的二维码阅读器
在 Chrome 上利用扩展生成二维码不稀奇, QR Code Generator 这个扩展就可以实现,并且这样的扩展在 Chrome Web Store 随便一搜都能出现一大堆.但是,直接在 Chr ...
ThinkPHP框架整合phpqrcode生成二维码DEMO
ThinkPHP框架发展到今天功能已经变得是非常强大了,但是ThinkPHP框架中没有二维码相关的库,因此我们可以通过整合phpqrcode来完成生成二维码的功能.想使用phpqrcode首先就要把p ...
Android ZXing二维码、条形码的生成，扫一扫demo
目录导语一.ZXing简介二.ZXing方法类源码 BarcodeFormat:条形码格式类 EncodeHintType:编码显示风格三.ZXing使用实战小案例生成二维码生成条形码四 ...
K210学习笔记（十）——二维码识别
前言 MAIX BIT(K210)和openmv在传统视觉处理这个方面代码是通用的,掌握K210的色块识别和二维码识别其实也掌握了openmv对应的用法. 一.二维码是什么? 二维码 (2-dimen ...
Android 二维码生成和识别（附Demo源码）
Posted on 2013-08-25 23:15 泡泡糖阅读( 20424) 评论( 7) 编辑收藏今天讲一下目前移动领域很常用的技术--二维码.现在大街小巷.各大网站都有二维码的踪迹,不管 ...
tp用phpqrcode制作二维码，可在浏览器下载二维码
composer require endroid/qr-code 下载扩展 GitHub - love1314-ball/phpqrcode 下载后放在vendor文件中就行了(名字要正确) 可以将二 ...
halcon例程学习一维码、二维码识别
1.一维条码一维条码:由一组规则排列的条.空以及对应的字符组成的标记,"条"指对光线反射率较低的部分,"空"指对光线反射率较高的部分,这些条和空组成的数据表达 ...

Chrome扩展学习Demo(三)：将浏览器地址栏的网址转换为二维码

manifest.json

popup.html

popup.js

Chrome扩展学习Demo(三)：将浏览器地址栏的网址转换为二维码相关推荐

最新文章

热门文章