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实现word转pdf
最近遇到一个项目需要把word 转成pdf,百度了一下网上的方案有很多,比如虚拟打印.给word 装扩展插件等,这些方案都依赖于ms word 程序,在java代码中也得使用诸如jacob或jcom这 ...
- 书写优雅的shell脚本（二）- `dirname $0`
在命令行状态下单纯执行 $ cd `dirname $0` 是毫无意义的.因为他返回当前路径的".". 这个命令写在脚本文件里才有作用,他返回这个脚本文件放置的目录,并可以根据这个 ...
- 「SHOI2007」「Codevs2341」 善意的投票（最小割
2341 善意的投票 2007年省队选拔赛上海市队选拔赛 时间限制: 5 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 幼儿园里有n个小朋 ...
- Leetcode字符串专题
Leetcode38. Count and Say 分析:根据题意,数列的下一项就是统计上一项中每个数字出现的次数,理解清楚题意就很简单了 class Solution { public: strin ...
- 【USACO 2006 November Gold】Corn Fields
[题目链接] 点击打开链接 [算法] 状压DP [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 12 #def ...
- py-day8-socket网络编程
本节内容 Socket介绍 Socket参数介绍 基本Socket实例 Socket实现多连接处理 通过Socket实现简单SSH 通过Socket实现文件传送 作业:开发一个支持多用户在线的FTP程 ...
- bzoj1304
树形dp 题目是要求最深的颜色 先开始觉得设dp[i][0/1/2]表示这个点的状态,然后发现没办法保证该点是最深的点,且dp状态没有实际意义,其实dp[i][0/1]表示当前i的子树颜色为c^1的叶 ...
- html 样式之style属性的使用
转自:https://www.ggbiji.com/html-style.html html中的style属性是用来改变html元素的样式的,样式是 在html 4 引入的,它是改变 html元素样式 ...
- java try·····catch·····异常处理学习
异常处理(又称为错误处理)功能 用于处理软件或信息系统中出现的异常状况(即超出程序正常执行流程的某些特殊条件). try....catch....只是异常处理的一种常用方法 try{ //可能导致异常 ...
- 6-11 SVM支持向量机2
SVM支持向量机的核:线性核.进行预测的时候我们需要把正负样本的数据装载在一起,同时我们label标签也要把正负样本的数据全部打上一个label. 第四步,开始训练和预测.ml(machine lea ...