明确需求
扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍:把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉,眼不见为净!描述得更详细些就是:
- 过滤功能只在人人网域名(http://*.renren.com/*)下启用;
- 只有访问人人网时,扩展的图标才显示;
- 好友的分享信息会出现在很多地方(如好友主页、新鲜事、分享主页等),这些都要过滤;
- 我只是不想看到那些讨厌的标题,但分享的视频、图片等还是想看的。
其中(4)是核心功能,(2)可有可无。
Chrome扩展简介
Chrome扩展的主页是:http://code.google.com/chrome/extensions/index.html。在此我只简单地介绍一下和本扩展相关的内容,更详细的信息请访问其主页。在本扩展中一共只有六个文件,其中三个是图片文件(用于图标),其他三个文件大小都不到1KB,所以无需“多事”把所谓的源码上传,直接把那几行代码贴到文章中即可。下面逐一介绍六个文件:
图标文件
图标文件有三个尺寸,都是由同一张图片修改而成。我没什么艺术细胞,原始图片的作者并不是我,只是觉得蛮符合这个扩展的主题,呵呵。如果您知道它的作者请给我留言,或者有志同道合的朋友帮忙贡献一张新图标,在此谢过!
- icon19.png:大小为19x19,用于地址栏中显示;
- icon48.png:大小为48x48,在Chrome的扩展管理页面(chrome://extensions)中显示;
- icon128.png:大小为128x128,安装此扩展时显示。
原始图片:
manifest.json
这个Chrome扩展的配置文件,用JSON(JavaScript Object Notation)来描述与扩展相关的信息,完整介绍请访问:http://code.google.com/chrome/extensions/manifest.html。本扩展的配置信息如下:
前面五项比较简单,顾名思义,分别是扩展的“名称”、“版本号”、“描述”、“图标”以及“背景页面”。在本扩展中“背景页面”用于实现功能(2),详细内容会在下文介绍。
“page_action”是声明页面信息(本例中包含标题和图标),与之对应的是“browser_action”(本例中没有使用)。当你的扩展与页面无关时用“browser_action”,此时图标会一直显示在工具栏中;而像本例中,扩展只是针对某些特点的页面(人人网)则使用“page_action”,此时图标显示在地址栏中,并且默认是不显示的(功能2)。
至于这个扩展具体作用于哪些页面,则需要在“content_scripts”里指定,其中元素“matches”用于匹配URL(详细内容参见http://code.google.com/chrome/extensions/match_patterns.html)、“js”用于指定具体的动作、“run_at”用于指定脚步运行的时间。本例中指定了,当前页面的URL与“http://*.renren.com/*”匹配时(功能1),并且在页面加载完成后,执行“filter.js”里的脚步。
filter.js
这部分是核心功能,我使用的模式(reg)非常简单:检查是否包含“不分享”三个字。大家可以照葫芦画瓢添加其他模式。
人人网中分享标题分别使用“span”标签(新鲜事中)、“h4”等标题标签(分享主页)以及“a”超链接标签(好友主页)。我们需要通过DOM逐一获取,此处以“span”标签为例:获取页面中所有的“span”元素,删除它们的子标签,用模式“reg”测试,如果成功就用文本“msg”替换。其他标签依此类推。
另外一个需要注意的地方:字符编码。人人网页面采用UTF-8编码,这对匹配中文会有影响,因此在保存filter.js这个文件时,需要将字符编码设为UTF-8(默认ANSI),否则将匹配失败。
剩下的第一行特别引人注目,这不是一个标准的JavaScript方法,而是Chrome提供的API。它向扩展发送了一个请求,此请求可被“background.html”中的脚步捕捉。Chrome扩展就是通过发送和捕捉请求来通信的。
background.html
脚步中添加了一个监听器,当捕捉到“filter.js”发送的消息时就显示图标。
我想大家肯定会问,为什么不直接在“filter.js”里执行“chrome.pageAction.show()”来显示图标,干嘛这么多事要发送一个请求?这是Chrome扩展的限制,Chrome的所有API请参看:http://code.google.com/chrome/extensions/api_index.html,但“content_script”里指定的脚步只能使用部分API(显示图标这个API就不在其中),而“background_page”里可以调用所以API,因此只能通过这种方式来实现。
其他
扩展开发好了,至于如何发布使用,请参见Chrome扩展开发的“Hello World”:http://code.google.com/chrome/extensions/getstarted.html。
版权声明
请尊重原创作品。转载请保持文章完整性,并以超链接形式注明原始作者“redraiment”和主站点地址,方便其他朋友提问和指正。
联系方式
我的邮箱,欢迎来信(redraiment@gmail.com)
我的Blogger(子清行):http://redraiment.blogspot.com/
我的Google Sites(子清行):https://sites.google.com/site/redraiment
我的CSDN博客(梦婷轩):http://blog.csdn.net/redraiment
我的百度空间(梦婷轩):http://hi.baidu.com/redraiment