分类目录归档:Chrome插件

Blogrss设计思路

Blogrss源码包的目录结构如下所示:

1
2
3
4
5
6
7
8
9
10
11
blogrss
   ├─manifest.json
   ├─popup.html
   ├─popup.js
   ├─background.html
   ├─main.css
   ├─icon_19_19.png
   ├─icon_32_32.png
   ├─icon_64_64.png
   ├─icon_128_128.png
   └─logo.png

根据名称很容易看出:manifest.json为定义插件的元数据文件。popup.html为弹窗文件,popup.js是popup.html中调用的javascript函数,background.html是后台运行文件,剩下的几个文件都算是素材文件。

在popup.html的<body>标签里可以设置插件弹窗的大小,超过设定值自动出现滚动条。

1
2
3
4
5
<body style="width: 500px; height: 200px; font-size: 12px;">
	<script type="text/javascript">
		display();
	</script>
</body>

弹窗中内容由popup.js的display()函数给出,如下。

1
2
3
4
5
6
7
8
9
10
function display()
{
	var bgpage = chrome.extension.getBackgroundPage();
	document.open();
	document.write(bgpage.getXMLContent());
	document.close();
	bgpage.remain = 0;
	localStorage.setItem('remain', String(0));
	chrome.browserAction.setBadgeText({text: String(0)});
}

首先由于Blogrss会每隔15分钟读取一下rss源,而popup.html的生命周期决定了不可能把轮询代码写在它里面,只能写在后台运行文件background.html里。var bgpage = chrome.extension.getBackgroundPage()表示取得后台页面,调用它的getXMLContent()方法获得要展示的html内容,然后通过document.write()写入popup.html页面。remain是显示在插件右下角的数字,表示新内容的条数,因为这个值必须在浏览器重启之后依然有效,因此这里修改完后将它存人localStorage(关于localStorage参见『Chrome插件开发学习笔记』),方便在适当时候再取出。

setTimeout(func, milliseconds)函数能让func函数在milliseconds微秒之后执行。为了达到每隔15分钟读取rss源一次,我们需要在功能函数最后重新调用setTimeout()一次,使得自己在15分钟后能再执行一次,如下:

1
2
3
4
5
6
7
setTimeout(refreshinback, 2000);
function refreshinback()
{
	getXMLContent();
	chrome.browserAction.setBadgeText({text: String(remain)}); 
	setTimeout(refreshinback, 900000); //15min
}

在refreshinback函数体中,调用getXMLContent()以获得最新的网站内容。getXMLContent()仅仅是将loadXmlFile()函数返回的xml文档按RSS2.0标准解析,然后通过getDataByid()重新封装。最后的返回值rt_html中就是解析完成的html代码,可直接通过document.write()输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getXMLContent(){
	xmlObj=loadXmlFile("http://fengchj.com/?feed=rss2");
	var items=xmlObj.getElementsByTagName("item").length;
 
	rt_html = "";
	for(i=0;i<items;i++){
		getDataByid(i);
	}
 
//	......
//	......
//	......
 
	return rt_html;
}

Blogrss的源代码已上传至google code相应页面,有兴趣的朋友可以到这里checkout后查看。

--EOF--

Chrome插件开发学习笔记

Chrome插件开发比想象中要简单一些,它有固定的模板,就像八股文,因此只要理清程序的执行逻辑,就能快速开发出一个实用的浏览器插件。

一般来讲,Chrome插件至少包含2个文件:

1、manifest.json。这是一个json格式的配置文件,用于声明插件的基本信息以及插件目录下每个资源的作用。这里有manifest.json文件格式的官方说明。
2、popup.html。这个静态页面所展示的内容就是我们点击浏览器插件图标后弹出窗口中显示的内容。由于Chrome插件主要的开发语言是javascript,因此,这个文件可以并且只能用静态的html或动态的javascript语言编写。

只需以上2个文件以及一些logo图标就能写出一个简单的Chrome插件了。这篇文章里有一个时钟的例子,适合初学者了解Chrome插件开发的整个流程。

此外,功能稍强一点的插件还需用到background.html文件,这是一个后台运行的文件,书写规则与popup.html一样,仅允许html+javascript。它们不同的地方在于:popup.html页面只有我们点击了插件图标后代码才会执行一次,而background.html文件会在浏览器加载插件那一刻开始运行,而且常驻在内存里,直到浏览器关闭或disable插件代码才结束运行。一些定时刷新或定时检查功能,例如Google Mail Checker,就是通过在background.html页面里写入定时检测代码,实现对邮箱的定时访问。要使用background.html需要在manifest.json里将其与background_page参数相关联。由于background.html页面中代码的生命周期很长,因此如果不是必须要用就尽量少用。打开Chrome的任务管理器,可以看到每个使用了background页面的插件的cpu和内存消耗量,其中一些甚至存在内存泄漏情况,运行时间越长,占用内存越大,会拖累浏览器的运行速度。background.html页面另外一个重要功能是能够提交跨域ajax请求。

要想在其他页面里访问background.html中的定义的全局变量和方法,可以调用chrome.extension.getBackgroundPage()函数来实现。例如:

1
2
3
var bgpage = chrome.extension.getBackgroundPage();
bgpage.var1 = "test"; //调用background.html页面中的变量,并为它赋值。
bgpage.test(); //调用background.html页面中的test()方法。

background.html的生命周期虽然比popup.html长,但是当浏览器关闭时,background.html中的变量值就丢失了,要想永久保存一些变量值,使得浏览器重启之后该值仍然有效,就要用到localStorage,这实际上是html5标准的本地存储功能。可以将它理解成一个小型注册表,存储的是键值对,它有3个常用接口,用于读、写、删除对应键的值,分别是localStorage.getItem("key")、localStorage.setItem("key", value)、localStorage.removeItem("key")。打个不恰当的比喻,如果background.html里定义的变量作用域是application的话,那么localStorage的作用域就是cookie。

Chrome允许在插件的右下角显示最多4个字符的标记(Badge),用于提示一些重要信息,比如Google Mail Checker中提示的新邮件数目、Xmark提示当前书签处理状态等。它们都是通过chrome.browserAction.setBadgeText({text: string})这个API来实现的。只要在background.html里用setTimeout(function_name, time)设定好定时执行的程序,定期检查即可。

--EOF--

本站Chrome插件Blogrss v0.99发布!

准备把这款Chrome插件取名为Blogrss,其功能是将本站的rss内容以浏览器plug-in形式输出,使用户在不访问站点的情况下就能看到网站内容。另外加入通知机制(每隔15分钟),当网站有更新内容后,会在浏览器插件图标右下方显示新内容的条数。由于是边学边干,匆忙中完成,代码中必有很多不妥之处,故暂定release版本为v0.99,以保留增强功能的可能性。同时,本插件是专为主站“孤城一片”而定制的版本,因此没有提供rss源可配置的功能,只能输出“孤城一片”的10篇最新文章。

使用说明:
1、本插件已经打包成crx文件上传到google code,可以先到此处下载。
2、下载后将crx文件拖进Chrome浏览器进行安装,当浏览器插件区显示黑底红字F图标,如图1所示,表示安装成功。

图1 安装成功

3、打开Chrome浏览器的扩展页面(chrome://extensions/),可以查看blogrss的一些基本描述信息,如图2所示。

图2 扩展信息

4、点击插件图标,就可以查看完整的孤城一片rss全文输出内容。如图3所示。

图3 主程序面板

不足之处:
1、观察Chrome的任务管理器后发现,插件有轻微的内存泄漏,不过泄漏程度在可控范围之内。
2、为保证插件和主站能有机结合,插件中logo、字体、链接样式均采用了主站的CSS,但是插件UI仍然不够友好。
3、开头已经提到,本插件是主站“孤城一片”的定制版本,不具备rss源可配置功能。因此适用范围窄。

--EOF--