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).最近为了更好 ...
随机推荐
- 数组、栈、堆(java基础知识五)
1.数组概述.定义格式 * A:数组概念 数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. 数组既可以存储基本数据类型,也可以存储引用数据类型. * B:数组定义格式 格式1:数据类型[ ...
- 关于python代码的性能
在python中性能测试是一个很难应付的任务,因为它在反复地优化,也许版本和版本之间差别很大.python中的一个主要的原则是,首先为了简单和可读性去编写代码,在程序运行后,并证明了确实有必要考虑性能 ...
- 【POJ 3580】 SuperMemo
[题目链接] 点击打开链接 [算法] 本题也是Splay区间操作的模板题,不过要比BZOJ 3223要稍微复杂一些,做完此题后,我终于对Splay有了更深入的理解,有“拨开云雾见青天”的感觉 本题还是 ...
- bzoj 2238 Mst —— 树剖+mn标记永久化
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2238 看了半天... 首先,想要知道每条边删除之后的替代中最小的那个: 反过来看,每条不在 ...
- 利用高德地图javascriptAPI做一个自己的地图
最近由于项目中需要制作一个地图,用来选择活动地点,我就花了两天利用高德地图的javascriptAPI自制了一个地图的demo.在这了记录一下我学习的过程. 一.进入高德地图官网,再找到高德地图的开放 ...
- Bootstrap-CSS：代码
ylbtech-Bootstrap-CSS:代码 1.返回顶部 1. Bootstrap 代码 Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联 ...
- 关于Android ListView组件中android:drawSelectorOnTop含义（转载）
转自:http://yangguangfu.iteye.com/blog/902559 When set to true, the selector will be drawn over the se ...
- J20170403-gg
うっすら 微微的,薄薄的 グラデーション 渐变 ぼかし(暈し) 晕色 由浓到淡渐变上色的东西 シャドウ 影子,阴影 ドメイン 域名 サブドメイン 子域名
- PowerDesigner 16.5的下载安装破解注册（图文详解）
http://blog.csdn.net/chenchunlin526/article/details/54707757
- oracle 生成随机数
产生一个介于指定范围之内的38位精度的随机数SQL> SELECT DBMS_RANDOM.VALUE(1, 9999) FROM dual; DBMS_RANDOM.VALUE(1,9999) ...