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

最新推荐文章于 2024-08-01 15:43:40 发布

smart_dream

最新推荐文章于 2024-08-01 15:43:40 发布

阅读量1.2k

点赞数

分类专栏： Chrome插件

本文链接：https://blog.csdn.net/xiaoxiong_jiaxin/article/details/99638745

版权

Chrome插件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

效果图：

代码截图：

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

});