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

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

蔚落 2024-02-19 22:06 55阅读 0赞

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

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70

代码截图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1

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访问的网站
  ]
}

<!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>

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);
  });
});