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

版本更新

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

显示效果

目录结构

根据编写完成的二维码插件，我认为一个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生成二维码

Chrome插件制作的更多相关文章

chrome谷歌浏览器插件制作简易教程
1.在磁盘上创建一个目录,用来放应用的代码和资源 2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为: { "manifest_version": 2, ...
制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站
简单地说,浏览器插件,可以大大的扩展你的浏览器的功能.包括但不仅限于这些功能: 捕捉特定网页的内容捕捉HTTP报文捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为与别的站 ...
JS图片上传预览插件制作（兼容到IE6）
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
[chrome插件分享] gitlab-tree 更方便的浏览Gitlab上的代码
说明经常玩Github的人肯定都知道大名鼎鼎的octotree吧,这款chrome插件可以说是浏览代码的神器,利用左侧的树形菜单可以很方便的打开目录.浏览文件等,加上Github全站本身使用了pja ...
前端开发中的一些chrome插件推荐
这篇博客推荐的都是谷歌chrome浏览器插件,理论上,与之相同内核的浏览器都能使用.由于是谷歌插件,所以在天朝的网络,你懂的! 红杏专为学者 .程序员.外贸工作者打造的上网加速器.我们相信,上网 ...
chrome插件推荐
分享自己一直在用的chrome插件 1. Adblock Plus 广告屏蔽插件,能够屏蔽YouTube视频广告.Facebook广告.弹出窗口和其他显眼的广告,个人认为非常强大. 2.AutoPag ...
堪称神器的Chrome插件
前言相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(Extensions).最近为了更好 ...
基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
实用且堪称神器的Chrome插件推荐
前言相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(Extensions).最近为了更好 ...

随机推荐

第四届蓝桥杯C++B组省赛
1.高斯日记 2.马虎的算式 3.第39级台阶 4.黄金连分数 5.前缀判断 6.三部排序 7.错误票据 8.翻硬币 9.带分数 10.连号区间数
【矩阵---求A的1到N次幂之和】
引例: Matrix Power Series: 题目大意,给定矩阵A,求A^+A^+A^+...A^N. 题解:已知X=a,可以通过以下矩阵求出ans=a^+a^+...a^=矩阵^(n+)后右上格 ...
SpringMVC将url生成二维码图片直接展示在页面上
利用google的开源包zxing生成二维码第一步:maven项目的zxing依赖  <dependency> < ...
macbook pro上安装虚拟机
第一步:下载MacHunter的app应用商店第二步:在MacHunter内下载Parallels Desktop虚拟机第三步:如果在这个商店下载不下来,在网络资源上直接下载Parallels D ...
Flask app.config 的配置
原理如下: image.png 1.通过调用自定义config.py文件中config字典,可以得到一个类, 这个类里面定义的都是类变量,这些变量就是自定义的一些配置项. 如下config.py ...
AES加密算法(C++实现,附源码)
原创作品,转载请注明出自xelz's blog 博客地址:http://mingcn.cnblogs.com/ 本文地址:http://mingcn.cnblogs.com/archive/2010/ ...
js 模拟a标签打开新网页
在这里备份一下,方便以后查找. var el = document.createElement("a"); document.body.appendChild(el); e ...
CS231n 2016 通关第二章-KNN
课程内容全纪录: 1.讲解图像分类的难点 1.光照强度 2.主体变形 3.主体与背景咬合 4.主体与背景相接近 5.同类别间存在区别 2.KNN 1.最近邻算法 2.Knn 3.hyperpara ...
Ruby attr_reader , attr_writer, attr_accessor方法
attr_reader方法------读取实例变量 attr_writer方法------改写实例变量 attr_accessor方法-----读写实例变量 class Person attr_rea ...
E20180402-hm
cascade n. 串联; 倾泻; 小瀑布,瀑布状物; restrict vt. 限制,限定; 约束,束缚; strict adj. 精确的; 绝对的; 严格的,严谨的; [植] 笔直的; re ...

Chrome插件制作