浏览器家园

TAG标签|网站导航| 手机访问:m.liulanqi.com

当前位置:首页ChromeChrome开发 → 编写一个简洁的二维码chrome扩展

编写一个简洁的二维码chrome扩展

时间:2023-06-27 11:24:09来源:整理作者:浏览器知识手机版

小需求小目标

开发目的:因为平时在电脑端需要发送些链接啊,或者文字到手机上时每次都要打开qq,特别是有时候电脑断网了,显得特别麻烦,所以开发了此插件。

最终效果图:

图片描述

图片描述

下面讲述编码过程

小需求需要个二维码生成插件,这里引用 qrcode.js。有了现有的二维码插件就简单了;
chrome扩展编写并不是很难的事情,一般一个manifest.json文件,一个popup.html文件就可以搞定,如果需要配置,再增加一个options.html文件;当然根据需求还可以增加其他的文件。

首先创建一个 manifest.json文件

编写 manifest.json 文件

{   //这里必须是2
    "manifest_version": 2,
    //扩展名称
    "name": "QRcode tool",
    //扩展版本
    "version": "1.0",
    //扩展描述
    "description": "一个简洁的二维码生成工具,简单实用,小巧玲珑。",
    //扩展图标(在扩展中心显示)
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon128.png",
        "128": "images/icon128.png"
    },
    //配置页面
    "options_page": "options.html",//配置项页面
    //扩展图标配置
    "browser_action": {
        "default_popup": "popup.html",
        "default_titlec": "QRcode tool",
        "default_icon": {
            "16": "images/icon16.png"
        }
    },
    //权限声明
    "permissions":["tabs"]
}

这文件配置需要注意的问题:

  • 严格的json格式,key/val均需要采用双引号,最后的项后面不能有逗号,
  • 扩展的一些功能需要声明权限permissions

编写 popup.html 文件

    <link rel="stylesheet" href="css/qrcode.css">
    <div class="box">
        <h2 class="title">扫码浏览本站</h2>
        <div class="qrcode-bg" id="qrcode-bg">
        </div>
        
    </div>
    <script src="js/qrcode.js" type="text/javascript"></script>
    <script src="js/popup.js" type="text/javascript"></script>

只粘贴主要代码。
这里需要注意:chrome扩展里的html页面好像是不可以写<script></script>内联代码的,所以需要另外写个js文件,具体什么原因,请专业人士解答下。

popup.js

onload=function(){
    chrome.tabs.getSelected(function(tab){
        var qrcode = new QRCode('qrcode-bg', {
              text: tab.url,
              width: 128,
              height: 128,
              /*colorDark : '#000000',
              colorLight : '#ffffff',*/
              correctLevel : QRCode.CorrectLevel.H
            });
        console.log(qrcode);
    });
}

chrome.tabs.getSelected(callback(tab)) 这个函数时chrome扩展里可以使用的,用来获取当前标签页对象
回调参数tab是一个标签页对象,标签页对象内容如下:

{
    id: 标签id,
    index: 标签在窗口中的位置,以0开始,
    windowId: 标签所在窗口的id,
    openerTabId: 打开此标签的标签id,
    highlighted: 是否被高亮显示,
    active: 是否是活动的,
    pinned: 是否被固定,
    url: 标签的URL,
    title: 标签的标题,
    favIconUrl: 标签favicon的URL,
    status :标签状态,loading或complete,
    incognito: 是否在隐身窗口中,
    width: 宽度,
    height: 高度,
    sessionId: 用于sessions API的唯一id
}

到这里已经实现功能了。

调试chrome扩展直接拖拽项目文件夹到chrome的扩展程序页面(chrome://extensions/)松开即可安装。

效果

clipboard.png

似乎还少点什么,如何生成自定义文本二维码呢?
好吧,在增加个配置页面,在配置页面实现就可以了。

在 manifest.json 文件增加项

//配置页面
"options_page": "options.html",//配置项页面

options.html 文件内容:

<div class="mlay">
        <div class="mlay-body">
            <div class="box">
                <div class="qrcode-bg" id="qrcode-bg"></div>
                <textarea placeholder="在这输入文本..." class="text control" id="text"></textarea>
                <button class="btn info" id="exe"><img src="images/icon16.png" class="icon">生成二维码</button>
            </div>
            <div class="footer">
                <p class="copyright">
                    <a href="https://github.com/mengdu" target="_blank">@蓝月萧枫</a> 版权所有
                    <a href="https://github.com/mengdu/QRcode-tool" target="_blank">浏览源码</a>
                </p>
            </div>
        </div>
    </div>
    <script src="js/qrcode.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/options.js"></script>

编写options.js文件:

//options.js
onload=function(){
    var qrcode = new QRCode('qrcode-bg', {
        text: "欢迎使用QRcode tool !",
        width: 330,
        height: 330,
        //colorDark : '#000000',
        //colorLight : '#F1F1F1',
        correctLevel : QRCode.CorrectLevel.H
    });
    var text = document.getElementById('text');
    document.getElementById('exe').onclick = function(){
        if(text.value.length <= 0){
            alert("请填写内容");
            return false;
        }

        qrcode.makeCode(text.value);
    };
}

调试

clipboard.png

ok,完美。

打包程序:点击打包扩展程序

clipboard.png

clipboard.png

点击打包扩展程序即可完成。

小目标小需求实现。

遇到问题

  1. 不支持长文本生成二维码,像百度搜索链接生成的二维码特别细,手机扫描解析不了的情况
  2. 有时候长文本 qrcode.js 会出现 Uncaught Error: code length overflow.错误,暂时不知道什么原因
  3. 打包扩展安装后会显示并非来自 Chrome 网上应用店的字样,没钱放chrome商店,没办法。

下载

喜欢的star下吧,谢谢!

源码地址

扩展下载地址

相关文章

  • 鸥朋浏览器,快速浏览网页,选择鸥朋浏览器!

    引言随着互联网技术的不断发展,人们浏览网页的习惯也在不断变化。在众多浏览器中,鸥朋浏览器受到越来越多的用户青睐。本文将介绍鸥朋浏览器的特点和优势,帮助大家更好地利用这一工具。2.鸥朋浏览器的特点鸥朋浏览器是一款专注于个性化定制的浏览器,在功能和用户体验上具有独特的特点。-高速浏览:鸥朋浏览器基于谷歌浏览器内核,拥有高速的页面加载速度和稳定性,不卡顿不崩溃,用户体验非常好。-安全保护:鸥朋浏览器在用户隐私保护方面非常重视,支持防止恶意插件、广告拦截、隐身模式等多项安全保护功能。-多样化定制:鸥朋浏览器提..
  • 电脑图片浏览器下载,电脑图片查看器免费下载,方便快捷的图片管理工具

    电脑图片浏览器下载电脑是我们最常用的工具之一,对于爱好摄影、美图制作的人来说,图片管理工具是非常必要的。在电脑上浏览图片时,我们需要一个好用的图片浏览器。在网上搜索,可以找到各种各样的图片浏览器。然而,为了避免下载带病毒或虚假的软件,我们需要选择安全可信的下载源,并仔细查看软件版本和说明以确保所下载的软件适用于我们的操作系统。2.电脑图片查看器免费下载有些好的图片浏览器需要购买才能使用。但在我们寻找图片查看器时,我们可以选择一些免费软件,例如GooglePhotos、Picasa等。这些图片软件带有许..

Copyright 2019-2029 www.liulanqi.com 【浏览器家园】 版权所有

浏览器家园_下载浏览器就到浏览器家园 | 专注MAC浏览器和Windows浏览器下载和使用介绍

声明: 所有软件和文章收集整理来自互联网 如有异议 请与本站联系 本站为非赢利性网站 不接受任何赞助和广告