Chrome二维码插件制作

时间:2023-06-27 11:17:47 编辑:浏览器知识

由于网上很难找到关于Chrome插件制作的中文教程，为了总结和方便更多的开发者，本文以最常见的显示效果为browser_action的二维码插件为例，进行相关阐述。前端童鞋开发的话应该很简单的，鄙人是开发Android的，写这个还查了点资料(⊙﹏⊙)

版本更新

支持生成二维码的方式：1、输入内容回车；2、输入内容点击生成二维码按钮；3、选中文字右击生成二维码

显示效果

Chrome二维码插件-显示效果1

Chrome二维码插件-显示效果2

目录结构

根据编写完成的二维码插件，我认为一个Chrome插件至少包含以下几个文件：

manifest.json // JSON格式的清单配置文件
icon.png // 在浏览器中显示的图标
popup.html // 在浏览器中显示的页面

下面列举一下我的二维码插件的目录结构：

chrome_extensions_qrcode
  |--icon.png
  |--lib
      |--jquery-1.7.2.min.js
      |--jquery.qrcode.min.js
  |--manifest.json
  |--popup.css
  |--popup.html
  |--popup.js

实现原理

制作交互式友好页面，根据外部输入内容，调用jQuery的二维码插件库，实现想要实现的功能，验证正确后打包成CRX文件。

实现步骤

manifest.json

创建根目录，如：chrome_extensions_qrcode，然后进入根目录创建manifest.json文件，编辑内容，可参考开发文档-manifest，以下是我的文件内容：

{
    "name": "简易二维码",  // 必要字段
    "version": "1.0.0",  // 必要字段，规则：用1个到4个数字来表示，中间用点隔开，这些数字必须在0到65535之间，非零数字不能0开头
    "manifest_version": 2, // 必要字段，必须为2，无引号
    "description": "通过输入文本内容生成二维码！",  // 可选字段，插件描述信息
    "author": "青峰 qingfeng@showjoy.com",  // 可选字段，插件作者信息
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    }, // 必要字段，文件格式必须为"icons": {...}，不能为"icons": "icon.png"
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    } // 可选字段，指定默认显示页面
}

HTML

添加必要的icon.png和jQuery插件库，创建popup.html文件，进行HTML页面编写，我这边的页面很简单，如下所示：

<!doctype html>
<html>
    <head>
        <title>简易二维码</title>
        <meta charset="utf-8"/>
        <!-- 据说：css和js文件不能在html文件内部编写使用，必须外部引用 -->
        <link href="./popup.css" type="text/css" rel="stylesheet"/>
        <!-- 以下两个jQuery的js文件都需要引用，切忌只引用jquery.qrcode.min.js -->
        <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="lib/jquery.qrcode.min.js"></script>
        <script type="text/javascript" src="./popup.js"></script>
    </head>
    <body>
        请输入文本内容:<br/>
        <input type="text" id="content">
        <input type="button" id="confirm" value="生成二维码">
        <!-- 动态生成二维码图片 -->
        <div id="qrcode"></div>
    </body>
</html>

CSS&JS

编辑CSS和JS文件：CSS文件中其实就一句话：#qrcode{margin-top: 10px}，JS文件内容如下所示：

$(function(){
    $("#confirm").click(function(){
        // 清空
        $("#qrcode").empty();
        // 获得内容
        var decodeContent = toUtf8($("#content").val());
        // 根据内容长度来确定展示二维码的大小
        if (decodeContent.length < 200) {
            $('#qrcode').qrcode(decodeContent);
        } else {
            $('#qrcode').qrcode({
                width: 300,
                height: 300,
                text: decodeContent
            });
        }
    });
})
// 兼容中文
function toUtf8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        }
    }
    return out;
}

好了，是不是很简单，其实我也没讲什么，只是希望大家少走点弯路罢了，最后再讲一下如何验证我们编写的代码能否正确使用以及把编写完成的文件打包成CRX文件。

验证

打开网址：<chrome://extensions/>，选择开发者模式，选择加载已解压的扩展程序...，选择我们编写的根目录即可，如果出现类似文章开头展示的最终效果，并能实现想要实现的功能，表示验证成功；如果失败，请修改代码，重新执行此验证流程。

打包

打开网址：<chrome://extensions/>，选择开发者模式，选择打包扩展程序...，选择根目录，下面的key为空即可，最后选择打包扩展程序即可；如果打包失败，请根据错误提示信息修正，如果打包成功，会在与根目录同级的目录中生成CRX插件文件和PEM秘钥文件。

使用

本来以为直接双击CRX文件，即可自动安装到Chrome浏览器中，后来发现一直失败，只能通过拖拽CRX文件进入<chrome://extensions/>网页的方式，才能正确安装并使用。

源码与插件地址

我制作的简易二维码源码与插件下载的地址：chrome_extensions_qrcode_github

参考链接

官方教程

使用jquery.qrcode生成二维码

文章TAG：chrome 二维二维码插件 Chrome二维码插件制作

加载全部内容