Chrome插件制作
由于网上很难找到关于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
参考链接
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).最近为了更好 ...
随机推荐
- Web.xml配置----字符过滤器
添加EncodingFilter类实现Filter接口 import javax.servlet.*;import javax.servlet.http.HttpServletRequest;impo ...
- Linux 下WAS的java版本查看
1.查找linux的详细版本号: A.cat /proc/version B.lsb_release -a(可以查出是否为redhat开发的) C.uname -a 2.Linux的java版本 A. ...
- codeforces 669D D. Little Artem and Dance(乱搞题)
题目链接: D. Little Artem and Dance time limit per test 2 seconds memory limit per test 256 megabytes in ...
- Servlet的HelloWorld
设置好TOMCAT环境变量(如何设置?)后在命令行输入startup可以启动Tomcat,输入shutdown可以关闭Tomcat. /WEB-INF/web.xml是称为部署描述器的配置文件,Jav ...
- liunx命令之【查看某个端口号的使用情况】
第一:查看端口占用情况的命令:lsof -i:<端口号>
- Java必知必会：异常机制详解
一.Java异常概述 在Java中,所有的事件都能由类描述,Java中的异常就是由java.lang包下的异常类描述的. 1.Throwable(可抛出):异常类的最终父类,它有两个子类,Error与 ...
- ol 与ul 的区别
1 <!DOCTYPE html> <html> <body> <ul> <li>咖啡</li> <li>牛奶< ...
- ORACLE PL/SQL 实例精解之第七章 迭代控制之二
7.1CONTINUE语句 CONTINUE语句会导致循环终止当前迭代.并且当CONTINUE的条件为TRUE时,开始执行该循环的下一次迭代.需要借助于IF语句来计算COUNTINUE条件.当CONT ...
- hdoj2796
题意: 1.在每一堆里顶部的coin的size必须大于这一堆其他的coin: 2.在每一堆里顶部的coin的size必须大于前面堆的顶部的coin: 3.在每一堆里顶部的coin的num必须大于前面堆 ...
- uni-app引入阿里iconfont
前言: 目前正在通过 UNI-APP平台开发移动应用,uni-app平台是去年年出才创建的一个新品台,因此资源相对比较匮乏,在此遇到一个问题,一直使用别人提供的iconfont,但总是不够用,为了解决 ...