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

浏览数：20 / 时间：2015年06月09日

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

需要引用的文件：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);
	 	});

});

结果:

技术分享