带你开发一个Chrome版的小程序

开发一个 Chrome 扩展程序，其实非常简单，而且很有趣。

Chrome 扩展程序

上次跟大家提到 Chrome 应用商店，于是探究了一下开发一个 Chrome 扩展程序有多难，经过一番研究，发现其实并不难。下面就带你体验一下如何开发一个二维码生成插件。

首先创建一个目录用于存放 Chrome 扩展程序的所有资源，比如 qrcode。目录创建好后，然后在这个目录中创建一个文件名为 manifest.json 的文件。这个文件用于存放程序的元信息：

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

咱们来简单讲解一下这个清单文件。 manifest_version 表示清单版本号，目前用 2 即可。 name , description 和 version 用于指定应用的名称，描述和版本。

browser_action 属性就是在浏览器地址栏上面的按钮，它的子属性定义了按钮的图标，默认主页，标题等：

接下来的 permissions 用于定义扩展程序的权限，我们这里申请了 activeTab 权限，其实就是获取当前标签页的信息，用于生成二维码。

开始实践

准备工作完成了，我们首先要开发 popup.html, 这个是我们扩展程序的主界面。没错，它其实就是一个 html 页面，因为扩展程序都是其实也都是 Chrome 内核来解析的，用 web 技术来开发自然最合适不过。

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

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