Chrome外掛開發（三）
在日常工作中，我們可能經常需要在手機端測試我們所做的頁面，如果每次在手機端測試都手輸網址，網址短的還好，如果長的網址也需要一個字母一個字母去敲，那無疑是一場噩夢，試想我們有一個工具只需要點選一個按鈕就可以將當前網址生成二維碼，而手機端僅僅需要掃一掃就可以開啟我們想要測試的網址，是不是很美好呢？下面我們就自己動手從零開始實現一個生成當前網址二維碼的外掛。在開始編寫之前，我們需要先做一點點知識預備：
1、我們之前在講基礎知識的時候有提到browser_action和page_action這兩個東西，前者是表示這是一個瀏覽器行為，其圖示顯示在位址列右側，而後者表示這是一個頁面行為，其圖示現在在位址列後面，當然在現在的瀏覽器上是看不出來這個區別的，他們兩個不能同時定義，那麼網址二維碼生成是一個瀏覽器行為還是一個頁面行為呢？就其行為而論網址二維碼生成是將頁面的網址生成二維碼，所以毫無疑問它應該是一個頁面行為。
2、我們需要使用到的API：
（1）chrome.pageAction.show 在特定標籤特定行為情況下顯示頁面行為的圖示，與之對應的還有chrome.pageAction.hide，在特定標籤特定行為下隱藏頁面行為的圖示，使用方式：
1 chrome.pageAction.show(tabId); 2 chrome.pageAction.hide(tabId);
（2）chrome.tabs.onUpdated 這是一個回撥函式，我們需要在tab更新的時候選擇是要顯示還是隱藏頁面行為的圖示。
1 chrome.tabs.onUpdated.addListener(function(tabId, info) {
2 chrome.pageAction.show(tabId);
3 });（3）chrome.tabs.getSelected 獲取當前選中的選項卡的明細。由於上面使用了tabs相關API，別忘記需要在manifest.json中申請tabs許可權。
3、網址生成二維碼選擇直接呼叫api，這裡選擇使用聯圖的API：
1 http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=https://www.deanhan.cn
在瞭解了上面的基礎點之後，是時候展示真正的技術了，首先規劃一下目錄結構：
核心檔案manifest.json程式碼：
1 {
2 "name": "二維碼生成器",
3 "version": "1.0",
4 "description": "二維碼生成器",
5 "manifest_version": 2,
6 "icons":
7 {
8 "16": "images/icon-48.png",
9 "48": "images/icon-48.png",
10 "128": "images/icon-48.png"
11 },
12 "permissions": ["tabs", "https://*/*", "http://*/*"],
13 "background":
14 {
15 "scripts": ["js/background.js"]
16 },
17 "page_action":
18 {
19 "default_popup": "popup.html"
20 }
21 }
popup.html的程式碼如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Popup</title> 7 <link rel="stylesheet" href="css/style.css"> 8 </head> 9 10 <body> 11 <div id="contain"> 12 <img src="" alt="" id="qrcode"> 13 </div> 14 <script type="text/javascript" src="js/popup.js"></script> 15 </body> 16 17 </html>
popup.js的程式碼如下：
1 var imgNode = document.getElementById("qrcode"),
2 prefix = "http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=";
3 chrome.tabs.getSelected(function(w) {
4 var url = w.url,
5 img = new Image();
6 img.src = prefix + url;
7 img.onload = function() {
8 imgNode.src = this.src;
9 imgNode.style.display = "block";
10 }
11 })
背景頁background.js的程式碼如下：
1 chrome.tabs.onUpdated.addListener(function(tabId, info) {
2 chrome.pageAction.show(tabId);
3 });
style.css 程式碼如下
1 #contain{
2 background: url(../images/loading.gif) center center no-repeat;
3 width: 200px;
4 height: 200px;
5 }
6 #contain img{
7 width: 100%;
8 height: 100%;
9 display: none;
10 }
執行截圖：
我們在popup.js 中輸出一下當點選外掛小圖示時的值
var imgNode = document.getElementById("qrcode"),
prefix = "http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=";
chrome.tabs.getSelected(function (w) {
console.log('-------->', w); // 輸出一下 w
var url = w.url,
img = new Image();
img.src = prefix + url;
img.onload = function () {
imgNode.src = this.src;
imgNode.style.display = "block";
}
})
通過開發者除錯工具如下：
從上圖可以看出我們就是獲取到了url引數，然後將其生成一個二維碼展示出來。
&n