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).最近为了更好 ...
随机推荐
- vmware9虚拟机通过NAT上网方式设置
vmware虚机上网的网络连接方式有bridge.NAT.Host-only等,如果对这个不了解的可以学习这篇文章http://wangchunhai.blog.51cto.com/225186/38 ...
- hdu 4544 湫湫系列故事——消灭兔子(优先队列)
题意:n只兔子(有血量),m只箭(有伤害.花费),每只兔子只能被射一次,求射死所有兔子的最少花费. 思路:贪心,2重循环,兔子从血量高到低,箭从伤害高到低,用能射死兔子的箭中花费最小的箭射. #inc ...
- 用mkdirs创建目录
import java.io.*; class a { public static void main(String args[]) { createDir("c:/fuck"); ...
- [Selenium] Selenium common Actions Examples
1.sendKeys() 在文本框中输入字符串 WebElement searchBox = driver.findElement(By.name("q")); searchBox ...
- BZOJ_1224_[HNOI2002]彩票_爆搜+打表
BZOJ_1224_[HNOI2002]彩票_爆搜+打表 Description 某地发行一套彩票.彩票上写有1到M这M个自然数.彩民可以在这M个数中任意选取N个不同的数打圈.每个彩民只能买一张彩票, ...
- 怎么解决Failed to load the JNI shared library
怎么解决Failed to load the JNIshared library 解决Failed to load the JNIshared library唯一的方法就是重新安装eclipse, ...
- HNOI2017 day1 T3 礼物
题目大意: 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手环,一个留给自己,一个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在她生日的前一天 ...
- HBase之四--(2):spring hadoop 访问hbase
1. 环境准备: Maven Eclipse Java Spring 2. Maven pom.xml配置 <dependency> <groupId>org.apache ...
- .NETFramework:HttpRuntime
ylbtech-.NETFramework:HttpRuntime 1.返回顶部 1. #region 程序集 System.Web, Version=4.0.0.0, Culture=neutral ...
- 任务48:Identity MVC:Model后端验证
任务48:Identity MVC:Model后端验证 RegisterViewModel using System; using System.Collections.Generic; using ...