制作二维码的程序「 制作二维码加图片」
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