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

Posted 2020-10-08 du_blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Chrome 插件——二维码生成笔记相关的知识，希望对你有一定的参考价值。

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

　　Chrome 插件很开放！！！你只要拿到了crx文件，然后把文件的后缀名改为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、测试