首页 / 二维码 / Chrome 插件——二维码生成笔记

Chrome 插件——二维码生成笔记

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Chrome 插件——二维码生成笔记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1650字，纯文字阅读大概需要3分钟。

内容图文

　　原来用了几个生成二维码的插件，总是遇见各种问题……最后索性自己弄一个，这里顺便记录一下。

　　Chrome 插件很开放！！！你只要拿到了ocx文件，然后把文件的后缀名改为zip，就可以解压了，最后一切的一切……

　　此次学习参考：http://open.chrome.360.cn/extension_dev/overview.html  ，用到的Javascript二维码生成器为 https://github.com/davidshimjs/qrcodejs

　　1、先看一下，目录结构

技术分享

　　最主要的就是上图打开的文件：Manifest.json，他是扩展的入口或者说明文件。本扩展用到的一些配置上图中都有说明，就不打字了。

　　注意：最后一行的 "permissions":["tabs"] 需要注意，列出扩展需要的权限，开始没有弄这个东西，取不到url地址…………

　　2、上代码

技术分享 技术分享 
                <!
                DOCTYPE html
                >
                <
                html
                >
                <
                head
                >
                <
                meta 
                charset
                ="UTF-8"
                >
                <
                meta 
                name
                ="viewport"
                 content
                ="width=device-width, initial-scale=1.0"
                >
                <
                meta 
                http-equiv
                ="X-UA-Compatible"
                 content
                ="ie=edge"
                >
                <
                title
                >ddz qrcode</title><style>
        .ddz {
            height: 101px;
            width: 100%;
            background-image: url(./images/ddz.png);
            background-position: center;
            background-repeat: no-repeat;}     
        #qrcode {
            width: 250px;
            height: 250px;
            margin-top: 15px;}</style><script src="./lib/qrcode.min.js"></script><script src="popup.js"></script></head><body><div class="ddz"></div><div id="qrcode"></div></body></html>
展示二维码的html页面
技术分享 技术分享 
chrome.tabs.getSelected(null, function(tab) {
    var QRCodeContainer = document.getElementById("qrcode");
    var qrcode = new QRCode(QRCodeContainer, {
        width: QRCodeContainer.clientWidth,
        height: QRCodeContainer.clientHeight
    });
    if (tab.url) {
        qrcode.makeCode(tab.url);
    }
});
对应的JS代码

　　3、测试

技术分享

　　3.1、在浏览器中输入：chrome://extensions/ 并启用“开发者模式”

　　3.2、点击“加载已解压的扩展程序…” 选择你的“扩展程序目录” 就安装上了。非常方便……

技术分享

　　3.3 生成二维码测试，如下图

技术分享

　　4、最后打包成ocx，点击“打包扩展程序…”，然后依然选择扩展程序根目录（私有密钥文件可以不选，他会自动生成一个密钥？？？文件），最后“打包扩展程序”就OK了！

　　到此结束。

原文：http://www.cnblogs.com/du-blog/p/7607662.html

内容总结

以上是互联网集市为您收集整理的Chrome 插件——二维码生成笔记全部内容，希望文章能够帮你解决Chrome 插件——二维码生成笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1234317.html

来源：【匿名】