谷歌浏览器插件，当前网页地址的二维码

图月志

2018-06-01

关注关注

经常在pc浏览网站时想要用手机来打开

如果登录了qq和微信直接复制就可以打开了

要是没有登录，而且网站地址很长，那就麻烦了

于是有个想法，如果有个浏览器插件可以直接将当前页的url生成二维码，如何手机直接扫码打开就方便多了

百度了一下，找到了360翻译的谷歌浏览器插件开发文档http://open.chrome.360.cn/extension_dev/overview.html

项目目录如下：

主要的就是清单文件manifest.json的配置

{
     "name":"NPAQC",
     "version":"1.0",
     "manifest_version": 2,
     "description":"当前页面地址二维码",
     // 图标
     "icons":{
         "16":"image/icon.png",
         "48":"image/icon.png",
         "128":"image/icon.png"
     },
 
     // 权限
     "permissions": [
         "background",
         "tabs"
     ],
 
     // 常驻后台脚本
     "background":{
         "script":[
             "js/background.js"
         ]
     },
     
     // 右上角图标属性
     "browser_action":{
         "default_icon": "image/icon.png",
         "default_title": "第一个Chrome插件",
         "default_popup": "popup.html"
     }
 }

插件的功能如下：

在浏览器的右上角显示插件图标

当地图标时显示当前网页url的二维码，扫码打开当前网站

主要配置browser_action

它规定了右上角显示的图片和点击图标所打开的页面以及鼠标悬浮时显示的标题

当点击图标时打开popup.html

打开页面会自动适应，可以看做是弹窗

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
         body{width: 200px;height: 220px;}
         #title{height: 20px;font-size: 18px;}
         #qrCode{width: 200px;height: 200px;}
         #qrCode *{width: 100%;height: 100%;}
     </style>
 </head>
 <body>
     <h1 id="title">当前页面二维码</h1>
     <hr>
     <div id="qrCode"></div>
 <script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/jquery.qrcode.min.js"></script>
 <script src="js/popup.js"></script>
 </body>
 </html>

这个页面很简单

显示一个标题和二维码图片

加载了3个js文件

js/jquery-3.3.1.min.js和js/jquery.qrcode.min.js用来生成二维码

js/popup.js是逻辑代码，浏览器插件页面中是不能写js脚本的，所以只能通过加载js文件的方式来实现

popup.js内容如下：

// 获取页面相关信息
 chrome.tabs.getSelected(null, function (tab) {
     // 打印页面地址
     console.log(tab.url);
     // 生成二维码
     jQuery('#qrCode').qrcode({
         render: "canvas", //也可以替换为table
         foreground: "#000",
         background: "#FFF",
         width: 200,
         height: 200,
         text: tab.url
     });
 });

点击插件图标就会加载popup.html

获取当前网站url，生成二维码，渲染页面