日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
{ 
  
  
  
  
  "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

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

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

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

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

讓我們?cè)賮砜纯此锩嬗惺裁矗?/p>

 
 
 
 

  
  
  
  
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);  
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

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

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

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

我們?cè)倮^續(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 事件，在擴(kuò)展程序打開的時(shí)候調(diào)用上面我們定義的 getCurrentTabUrl 方法獲取當(dāng)前標(biāo)簽的 URL。 然后使用這個(gè) 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)試

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

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

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

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

總結(jié)

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

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