日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  
{ 
  
  
  
  
  "manifest_version": 2, 
  
  
  
  
 
  
  
  
  
  "name": "QR Code", 
  
  
  
  
  "description": "Generate QR Code for web page.", 
  
  
  
  
  "version": "1.0", 
  
  
  
  
 
  
  
  
  
  "browser_action": { 
  
  
  
  
    "default_icon": "icon.png", 
  
  
  
  
    "default_popup": "popup.html", 
  
  
  
  
    "default_title": "Generate QRCode" 
  
  
  
  
  }, 
  
  
  
  
  "permissions": [ 
  
  
  
  
    "activeTab"     
  
  
  
  
  ] 
  
  
  
  
} 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
 
  
  
  
  
   
  
  
  
  
   
  
  
  
  
    QR Code

其實就是一個普通的 html 頁面，只要有基本的 web 開發(fā)基礎(chǔ)，詳細(xì)這個都不難看懂。 這里要說一下的就是引入的幾個 js 文件。

一個是 jQuery，是的你沒看錯，你可以使用 jQuery 來開發(fā) Chrome 程序。

另外一個我們需要的組件就是 jquery.qrcode， 它用來給指定的字符串生成二維碼圖片。這里不多講解，有興趣的朋友可以參考它的 Github 主頁： https://github.com/jeromeetienne/jquery-qrcode 。

然后就是 popup.js, 這是我們擴展程序的主要邏輯代碼。

讓我們再來看看它里面有什么：

 
 
 
 

  
  
  
  
functiongetCurrentTabUrl(callback){  
  
  
  
  
  var queryInfo = { 
  
  
  
  
    active: true, 
  
  
  
  
    currentWindow: true 
  
  
  
  
  }; 
  
  
  
  
   chrome.tabs.query(queryInfo, function(tabs){  
  
  
  
  
    var tab = tabs[0]; 
  
  
  
  
    var url = tab.url; 
  
  
  
  
    console.assert(typeof url == 'string', 'tab.url should be a string'); 
  
  
  
  
    callback(url);  
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

首先定義一個 getCurrentTabUrl 函數(shù)， 這個函數(shù)唯一的作用就是獲取當(dāng)前用戶打開標(biāo)簽的 URL 地址。 這里用到了 Chrome 的內(nèi)部 JS 函數(shù) chrome.tabs.query。 傳入了兩個參數(shù)， ***個 queryInfo 是查詢條件， 我們查詢的是當(dāng)前窗口的激活標(biāo)簽。

然后第二個參數(shù)是一個 callback，查詢成功后， 會吧相應(yīng)的 tab 信息返回過來。 我們?nèi)〉竭@個 tab 的 URL，然后再調(diào)用 callback 返回給調(diào)用方即可。

這里要說到一點， Chrome 擴展程序的大多數(shù)接口都是異步調(diào)用的。 就比如我們這次用到的 chrome.tabs.query。 好了， 具體細(xì)節(jié)不再贅述， Chrome 提供了非常豐富的 API 供我們調(diào)用。 完整的 API 文檔可以查詢官方文檔： https://developer.chrome.com/extensions/api_index

我們再繼續(xù)看主程序：

 
 
 
 

  
  
  
  
functionrenderStatus(statusText){    
  
  
  
  
  document.getElementById('url').textContent = statusText;  
  
  
  
  
}  
  
  
  
  
document.addEventListener('DOMContentLoaded', function(){  
  
  
  
  
  getCurrentTabUrl(function(url){  
  
  
  
  
    renderStatus(url); 
  
  
  
  
    var result = $('#image-result');   
  
  
  
  
    result.qrcode({ 
  
  
  
  
      text: url 
  
  
  
  
    });      
  
  
  
  
  }); 
  
  
  
  
}); 
 
 
 
 

這里使用 DOMContentLoaded 事件，在擴展程序打開的時候調(diào)用上面我們定義的 getCurrentTabUrl 方法獲取當(dāng)前標(biāo)簽的 URL。 然后使用這個 URL 調(diào)用 jquery.qrcode 的方法生成二維碼圖片并設(shè)置到我們 html 頁面中 image-result 標(biāo)簽中。

renderStatus 方法只是把 URL 顯示到頁面的標(biāo)簽上，相信你不難看懂。 這里我們省略了 CSS 樣式相關(guān)的代碼，完整的代碼我已經(jīng)放到 Github 上，大家可以在這里看到 https://github.com/swiftcafex/chrome-qrcode

開始調(diào)試

到此為止，我們這個簡單的二維碼擴展程序就開發(fā)完成了。 現(xiàn)在改把它安裝到 Chrome 中體驗一下了。 我們現(xiàn)在的目錄結(jié)構(gòu)應(yīng)該是這樣的：

程序?qū)懞昧?，現(xiàn)在要解決的事情就是怎么把它安裝到 Chrome 中。 首先在 Chrome 的地址欄中輸入 chrome://extensions 就可以打開擴展程序頁面：

勾選上這個頁面左上角的 “開發(fā)者模式”, 然后就會出現(xiàn)上面的幾個按鈕。 點擊 “加載已解壓的擴展程序”, 然后選擇我們剛才創(chuàng)建的文件夾， 這樣就可以看到我們的擴展程序被導(dǎo)入進來了。 這時候 Chrome 瀏覽器的左上角就會出現(xiàn)擴展程序的圖標(biāo)了，點擊它， 我們的擴展程序就展示出來了：

如果你的擴展程序沒有正確的彈出， 你還可以右鍵點擊它， 然后選擇 “審查彈出內(nèi)容” 來打開調(diào)試界面，能夠非常方便的幫你定位錯誤：

總結(jié)

是不是發(fā)現(xiàn)開發(fā)一個 Chrome 擴展程序其實很簡單呢? 我們這里面只做到了開發(fā)，然后在 Chrome 環(huán)境中進行調(diào)試。 一個應(yīng)用程序如果要建立起正常的生態(tài)，還需要提交到應(yīng)用商店中，后面我還會寫一篇提交商店的文章。 如果你有什么創(chuàng)意或想法也歡迎留言交流。這個小程序的完整的代碼已經(jīng)在 Github 上面開源，希望對你有所幫助：

https://github.com/swiftcafex/chrome-qrcode