谷歌瀏覽器插件，當前網頁地址的二維碼

時間 2019-11-18

標籤谷歌瀏覽器插件當前網頁地址二維欄目 Chrome 简体版

原文原文鏈接

常常在pc瀏覽網站時想要用手機來打開html

若是登陸了qq和微信直接複製就能夠打開了jquery

要是沒有登陸，並且網站地址很長，那就麻煩了chrome

因而有個想法，若是有個瀏覽器插件能夠直接將當前頁的url生成二維碼，如何手機直接掃碼打開就方便多了json

百度了一下，找到了360翻譯的谷歌瀏覽器插件開發文檔http://open.chrome.360.cn/extension_dev/overview.htmlcanvas

項目目錄以下：瀏覽器

主要的就是清單文件manifest.json的配置微信

 1 {
 2     "name":"NPAQC",
 3     "version":"1.0",
 4     "manifest_version": 2,
 5     "description":"當前頁面地址二維碼",
 6     // 圖標
 7     "icons":{
 8         "16":"image/icon.png",
 9         "48":"image/icon.png",
10         "128":"image/icon.png"
11     },
12 
13     // 權限
14     "permissions": [
15         "background",
16         "tabs"
17     ],
18 
19     // 常駐後臺腳本
20     "background":{
21         "script":[
22             "js/background.js"
23         ]
24     },
25     
26     // 右上角圖標屬性
27     "browser_action":{
28         "default_icon": "image/icon.png",
29         "default_title": "第一個Chrome插件",
30         "default_popup": "popup.html"
31     }
32 }

插件的功能以下：網站

在瀏覽器的右上角顯示插件圖標ui

當地圖標時顯示當前網頁url的二維碼，掃碼打開當前網站url

主要配置browser_action

它規定了右上角顯示的圖片和點擊圖標所打開的頁面以及鼠標懸浮時顯示的標題

當點擊圖標時打開popup.html

打開頁面會自動適應，能夠看作是彈窗

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         body{width: 200px;height: 220px;}
10         #title{height: 20px;font-size: 18px;}
11         #qrCode{width: 200px;height: 200px;}
12         #qrCode *{width: 100%;height: 100%;}
13     </style>
14 </head>
15 <body>
16     <h1 id="title">當前頁面二維碼</h1>
17     <hr>
18     <div id="qrCode"></div>
19 <script src="js/jquery-3.3.1.min.js"></script>
20 <script src="js/jquery.qrcode.min.js"></script>
21 <script src="js/popup.js"></script>
22 </body>
23 </html>

這個頁面很簡單

顯示一個標題和二維碼圖片

加載了3個js文件

js/jquery-3.3.1.min.js和 js/jquery.qrcode.min.js用來生成二維碼

js/popup.js是邏輯代碼，瀏覽器插件頁面中是不能寫js腳本的，因此只能經過加載js文件的方式來實現

popup.js內容以下：

 1 // 獲取頁面相關信息
 2 chrome.tabs.getSelected(null, function (tab) {
 3     // 打印頁面地址
 4     console.log(tab.url);
 5     // 生成二維碼
 6     jQuery('#qrCode').qrcode({
 7         render: "canvas", //也能夠替換爲table
 8         foreground: "#000",
 9         background: "#FFF",
10         width: 200,
11         height: 200,
12         text: tab.url
13     });
14 });