經常在pc瀏覽網站時想要用手機來打開
如果登錄了qq和微信直接復制就可以打開了
要是沒有登錄，而且網站地址很長，那就麻煩了
於是有個想法，如果有個瀏覽器插件可以直接將當前頁的url生成二維碼，如何手機直接掃碼打開就方便多了
百度了一下，找到了360翻譯的谷歌瀏覽器插件開發文檔http://open.chrome.360.cn/extension_dev/overview.html
項目目錄如下：
主要的就是清單文件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 }
插件的功能如下：
在瀏覽器的右上角顯示插件圖標
當地圖標時顯示當前網頁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 });
點擊插件圖標就會加載popup.html
獲取當前網站url，生成二維碼，渲染頁面
