您的位置：首页 > 其它

我的 Chrome extensions 之 二维码分享

2014-03-11 20:40 155 查看
我经常有这么一个情况，在电脑上找到一些比较好的资源，但是我又马上要离开，所以想把当前链接弄到手机上面。
最开始是通过工具传，又要打开又要连接，特别麻烦，后来想到了通过二维码打开链接。不管是下载游戏，还是浏览网站，只需要一点，一扫就搞定。

实际上这个扩展在很早前就做了，使用了很长时间，超级爽。



首先配置manifest

{
"name": "Share current page as QR",
"manifest_version": 2,
"icons":
{
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"version": "1.0",
"description": "Share current page as QR",
"background": { "scripts": ["background.js"] },
"page_action" :
{
"default_icon" : "icon.png",
"default_title" : "Share"
},
"permissions" : [
"tabs","http://chart.apis.google.com/*"
]
}


background.js

function qr(tabId) {
chrome.tabs.get(tabId, function (tab) {
if (tab.url.indexOf("http") >= 0) {
chrome.pageAction.show(tabId);
chrome.pageAction.setPopup({ tabId: tabId, popup: "popup.html?u=" + tab.url })
}
})
}

chrome.tabs.onSelectionChanged.addListener(function (tabId) {
qr(tabId)
});
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
qr(tabId);
});


popup.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Share as QR</title>
</head>
<body style='width: 600; height: 500;'>
<div id="u" style='width: 200; height: 200; text-align: center; line-height: 200px;'>
loading...
</div>
<script src="content_script.js" type="text/javascript"></script>
</body>
</html>


content_script.js

function getQueryStringByName(name) {
var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
if (result == null || result.length < 1) {
return "";
}
return result[1];
}
var u = getQueryStringByName("u");
document.getElementById("u").innerHTML = "<img src='https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=" + u + "'/>";


其实就是在点击这个分离按钮时，弹出一个popup页面。而这个页面通过Google的api生成了当前页面的二维码，这样通过移动设备扫描时，就能扫描到网址，然后打开这个链接。

下载请移步
下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  chrome 二维码 移动设备 扩展 extensions
相关文章推荐
新的分享
章节导航