chrome插件开发-----------将网址转化成二维码website2QRcode

微信自带的浏览器无法输入链接,只能通过扫描二维码实现,但是有时候看到一个有趣的网站,想分享,还得先去将链接转化成二维码的网站,先转成二维码,再扫描,有点麻烦。所以写了一个插件,直接生成二维码。

     需要引用的文件:jquery.qrcode.js(将文字转化成二维码)和jquery

   用的是Browser Actions实现,用户点击图标,在popup.html中显示二维码,代码如下:

manifest.json:

{  
  "name": "WebSite2QRcode",  
  "version": "1.0",  
  "description": "将网址转化成二维码",  
  "browser_action": {  
    "default_icon": "icon.png" ,
    "default_title": "QRcode",
    "default_popup": "popup.html"
  } ,
  "permissions": [
        "tabs", 
        "http://*/*", 
        "https://*/*", 
        "notifications"
      ],
    
   "manifest_version": 2  
} 
popup.html:

<!DOCTYPE html>
<html>
<head>
<title>Website2QRcode</title>

<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>

<body>
<p id="website">
	http://blog.csdn.net/iloster
</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 = "网址: " + tabUrl;
	 		 title.textContent = "标题: " + tabTitle;
	 		 //生成二维码
    		jQuery('#QRcode').qrcode(tabUrl);
	 	});

});
结果:

技术分享


有什么好的链接,直接扫描分享就好了

源码地址:https://github.com/iloster/WebSite2QRcode

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。