console.assert(typeof url == 'string', 'tab.url should be a string'); 

    callback(url);  

  }); 

} 

首先定义一个 getCurrentTabUrl 函数， 这个函数唯一的作用就是获取当前用户打开标签的 URL 地址。 这里用到了 Chrome 的内部 JS 函数 chrome.tabs.query。 传入了两个参数， 第一个 queryInfo 是查询条件， 我们查询的是当前窗口的激活标签。

然后第二个参数是一个 callback，查询成功后， 会吧相应的 tab 信息返回过来。 我们取到这个 tab 的 URL，然后再调用 callback 返回给调用方即可。

这里要说到一点， Chrome 扩展程序的大多数接口都是异步调用的。 就比如我们这次用到的 chrome.tabs.query。 好了， 具体细节不再赘述， Chrome 提供了非常丰富的 API 供我们调用。 完整的 API 文档可以查询官方文档： https://developer.chrome.com/extensions/api_index

我们再继续看主程序：

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 事件，在扩展程序打开的时候调用上面我们定义的 getCurrentTabUrl 方法获取当前标签的 URL。 然后使用这个 URL 调用 jquery.qrcode 的方法生成二维码图片并设置到我们 html 页面中 image-result 标签中。

renderStatus 方法只是把 URL 显示到页面的标签上，相信你不难看懂。 这里我们省略了 CSS 样式相关的代码，完整的代码我已经放到 Github 上，大家可以在这里看到 https://github.com/swiftcafex/chrome-qrcode

开始调试

到此为止，我们这个简单的二维码扩展程序就开发完成了。 现在改把它安装到 Chrome 中体验一下了。 我们现在的目录结构应该是这样的：

程序写好了，现在要解决的事情就是怎么把它安装到 Chrome 中。 首先在 Chrome 的地址栏中输入 chrome://extensions 就可以打开扩展程序页面：

勾选上这个页面左上角的 “开发者模式”, 然后就会出现上面的几个按钮。 点击 “加载已解压的扩展程序”, 然后选择我们刚才创建的文件夹， 这样就可以看到我们的扩展程序被导入进来了。 这时候 Chrome 浏览器的左上角就会出现扩展程序的图标了，点击它， 我们的扩展程序就展示出来了：

如果你的扩展程序没有正确的弹出， 你还可以右键点击它， 然后选择 “审查弹出内容” 来打开调试界面，能够非常方便的帮你定位错误：

总结

是不是发现开发一个 Chrome 扩展程序其实很简单呢? 我们这里面只做到了开发，然后在 Chrome 环境中进行调试。 一个应用程序如果要建立起正常的生态，还需要提交到应用商店中，后面我还会写一篇提交商店的文章。 如果你有什么创意或想法也欢迎留言交流。这个小程序的完整的代码已经在 Github 上面开源，希望对你有所帮助：

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

【编辑推荐】

从Chrome源码看浏览器如何layout布局

如何在五分钟内开发一款Chrome扩展

从Chrome源码看JS Object的实现

实用贴|适用于开发者的最佳Chrome扩展工具

你可能不知道的Chrome-devtools用法总结

(责任编辑：admin)