Chrome插件制做

时间 2019-12-13

标签 chrome 插件制做栏目 Chrome 繁體版

原文原文链接

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

版本更新

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

显示效果

目录结构

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

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

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

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文件。github

实现步骤

manifest.json

建立根目录，如：chrome_extensions_qrcode，而后进入根目录建立manifest.json文件，编辑内容，可参考开发文档-manifest，如下是个人文件内容：web

{
    "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页面编写，我这边的页面很简单，以下所示：chrome

<!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生成二维码