怎样 免费制作和开辟 本身 的小程序「 怎么免费开辟 小程序」

　　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