猫灿先生博客,简约即美
« 上一篇: 下一篇: »

制作第一个Chrome扩展程序

猫灿先生  |  2010 年 12 月 09 日  |  位置: »

最近偶尔看一看Chrome相关的开发,还是颇有一番收获的。关于浏览器扩展从很久前就听说,一直觉得很神秘~Chrome的出现使得开发变成一项有趣的事情,难度相比IE也更容易上手。本文就简单介绍一下Google Chrome Extension,附带一个详细的实例一步步引导大家做出第一个专属于自我的Chrome扩展,相信新手认真看过这篇文章后会有一定的启示。已完成打包的扩展请点击这里体验(Chrome浏览器打开)~

Chrome Extension的工作原理

谷歌浏览器Chrome优秀的使用体验一方面来自其本身高效的内核webkit,同时也得益于强大的扩展功能机制。谷歌提供了一个丰富的扩展程序库供Chrome的用户选择,这些扩展内容包罗万象,而且绝大部分并非谷歌官方开发~正是Chrome开源的特性使得具有一定编程能力的人员都能够参与到改善这一款浏览器的工作里,各种有趣的创意也是应运而生。

Chrome的一般扩展不需要特殊的开发工具,本文提供的实例仅需要记事本就可以完成。扩展的组成基本上是网页文件,包括html, css, javascript, jQuery等等。这个实例的思路是:在浏览器菜单栏添加一个按钮,点击这个按钮就可以popup个人博客的源信息~首先建立一个制作这个扩展的文件夹,建立新文件manifest.json(名称不得更改),这个文件是必不可少的,感觉有点类似于xml的功能,提供用户自定义一些参数,里面描述了扩展的各类属性以及动作,本实例的文件内容:

{
    "name": "Bamboo Talk! Feed",
    "version": "1.0",
    "description": "Get the latest update of Bamboo Talk!",
    "browser_action":   {
        "default_icon": "favicon.png",
        "popup": "feed.html"
    },
    "icons":{
        "128":"logo.png"
    }
}

前三个属性分别代表插件名称、版本、描述,”browser_action”表示扩展动作,这里”popup”是指弹窗~其他具体功能本文暂不作详解,开发人员可参见Chrome扩展开发文档~

弹窗页面的设计

前面”popup”指向弹窗内容feed.html,进入这一部分开发者就可以像设计一般的网页一样设计出按钮弹出内容的样式。本实例里feed.html要实现读取目标博客源信息然后展示出来,我们重点关注一下对源的操作实现。

feed.html文件内容:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<h1><a href="http://i.maocan.com" target="_blank">Bamboo Talk! 源信息</a></h1>
<div id="RSS"><a href="http://www.feedsky.com/msub_wr.html?burl=BambooTalk_vy7k" target="_blank">通过邮箱订阅该源</a></div>
<div id="content"></div>
</body>
</html>

具体的CSS布局不作详述~#content里面就是读取的更新内容,这里引入jQuery,在script.js中定义$(document).ready()通过脚本执行操作,从而更新页面信息。此外在script.js里还运用了Yahoo’s YQL API,这让人们可以用类似SQL格式的语句从json文件中提取信息,至于功能实现的原理本文也不作详述。script.js内容:

$(document).ready(function(){
	var query = "SELECT * FROM feed WHERE url='http://i.maocan.com/feed' LIMIT 2";//使用博客源地址,数字表示显示的文章数
	var now = (new Date()).getTime()/1000;
	if(!localStorage.cache || now - parseInt(localStorage.time) > 1*60*60)
	{
		$.get("http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?",function(msg){
			var items = msg.query.results.item;
			var htmlString = "";
			for(var i=0;i<items.length;i++)
			{
				var tut = items[i];
				htmlString += '<div class="italk">\
								<h2>'+tut.title+'</h2>\
								<p>'+tut.description+'</p>\
								<a href="'+tut.link+'" target="_blank">全文阅读</a>\
								</div>';
			}
			localStorage.cache	= htmlString;
			localStorage.time	= now;
			$('#content').html(htmlString);
		},'json');
	}
	else{
		$('#content').html(localStorage.cache);
	}
});

整理好上述文件,以及准备好个性化扩展图标,第一个Chrome扩展程序就基本能够宣布完成了~接下来打开Chrome浏览器(以最新Chrome 8为例),选择“菜单”-“工具”-“扩展程序”,点击右侧“开发人员模式”,这时出现三个按钮~选择扩展所在文件夹载入进行初步调试,确认完成后选择打包生成crx文件,这就生成了一个标准Chrome扩展~安装后即可在菜单栏右上角看到扩展图标出现。

发布Chrome扩展

进入Chrome扩展应用首页左侧有“发布扩展程序”,登录之后就能进入扩展提交界面。需要注意的是扩展提交要经过一个严格的审核,此外首次发布扩展还要缴纳5美元的注册费,找了一下支付方式列表似乎还没有适合国人的支付途径。不过作为新手能够感受一下浏览器扩展的开发,也是一个愉快的过程~作为一个Wordpress博主,大家不妨将完成的扩展发布在自己的网站上,为访问者增加一种订阅方式,提供更好的体验。如果看过本文有志于对Chrome扩展进行深入开发,建议仔细阅读官方文档,相信会有很好的收获。

日志信息 »

® 文章信息:本篇日志于 2010年12月09日 10:54 发表在分类 "设计 Design"
™ 本文标签:, , ,
© 声明信息:本作品采用 license 协议进行许可,转载请注明来自"Bamboo Talk!"
喜欢本文,那就收藏到 :

“制作第一个Chrome扩展程序” 当前没有评论 »

发表您的评论




    添加表情    发布自定义图片
a b c d e f g h i j k l m n o p q r s t u v w x y z
(Ctrl+Enter快速提交) 如何设置头像?
0

-->
Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!