小程序编写讲授 「 小程序课程计划 」（小程序编写教学）

　　Chrome 扩展程序

　　前次 跟各人 提到 Chrome 应用市肆 ，于是探究了一下开辟 一个 Chrome 扩展程序有多难， 颠末 一番研究，发现着实 并不难。 下面就带你体验一下怎样 开辟 一个二维码天生 插件 。

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

　　{

　　"manifest_version": 2,

　　"name": "QR Code",

　　"deion": "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, deion和 version用于指定应用的名称 ，形貌 和版本。

　　browser_action属性就是在欣赏 器地点 栏上面的按钮， 它的子属性界说 了按钮的图标，默认主页 ，标题等：

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

　　开始实践

　　预备 工作完成了 ， 我们起首 要开辟 popup.html, 这个是我们扩展程序的主界面。 没错，它着实 就是一个 html 页面，由于 扩展程序都是着实 也都是 Chrome 内核来分析 的 ，用 web 技能 来开辟 天然 最符合 不外 。

　　!doctype html

　　html

　　head

　　titleQR Code/title

　　!-- 省略样式表代码 --

　　 src="jquery-3.2.1.min.js"/

　　 src="jquery.qrcode.min.js"/

　　 src="popup.js"/

　　/head

　　body

　　div id="title"QR Code/div

　　div id="url"/div

　　div id="image-result" style="width:270px;height:270px;"

　　/div

　　/body

　　/html

　　着实 就是一个平凡 的 html 页面，只要有根本 的 web 开辟 底子 ，具体 这个都不丢脸 懂 。 这里要说一下的就是引入的几个 js 文件。

　　一个是 jQuery ，是的你没看错，你可以利用 jQuery 来开辟 Chrome 程序。

　　别的 一个我们必要 的组件就是 jquery.qrcode， 它用来给指定的字符串天生 二维码图片。这里不多讲授 ，有爱好 的朋侪 可以参考它的 Github 主页：https://github.com/jeromeetienne/jquery-qrcode 。

　　然后就是 popup.js, 这是我们扩展程序的重要 逻辑代码。

　　让我们再来看看它内里 有什么：

　　functiongetCurrentTabUrl(callback) {

　　varqueryInfo = {

　　active: true,

　　currentWindow: true

　　};

　　chrome.tabs.query(queryInfo, function(tabs) {

　　vartab = tabs[0];

　　varurl = tab.url;

　　console.assert(typeofurl == '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);

　　varresult = $('#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