場景：將當前地址欄網址轉換爲二維碼
效果圖：
代碼截圖：
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);
});
});