过滤分享的Chrome扩展开发详解
[size=5]明确需求[/size]扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍：把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉，眼不见为净！描述得更详细些就是：
[list=1]
[*]过滤功能只在人人网域名（http://*.renren.com/*）下启用；
[*]只有访问人人网时，扩展的图标才显示；
[*]好友的分享信息会出现在很多地方（如好友主页、新鲜事、分享主页等），这些都要过滤；
[*]我只是不想看到那些讨厌的标题，但分享的视频、图片等还是想看的。
[/list]
其中（4）是核心功能，（2）可有可无。
[size=5]Chrome扩展简介[/size]
Chrome扩展的主页是：[url=http://code.google.com/chrome/extensions/index.html]http://code.google.com/chrome/extensions/index.html[/url]。在此我只简单地介绍一下和本扩展相关的内容，更详细的信息请访问其主页。在本扩展中一共只有六个文件，其中三个是图片文件（用于图标），其他三个文件大小都不到1KB，所以无需“多事”把所谓的源码上传，直接把那几行代码贴到文章中即可。下面逐一介绍六个文件：
[size=4]图标文件[/size]
图标文件有三个尺寸，都是由同一张图片修改而成。我没什么艺术细胞，原始图片的作者并不是我，只是觉得蛮符合这个扩展的主题，呵呵。如果您知道它的作者请给我留言，或者有志同道合的朋友帮忙贡献一张新图标，在此谢过！
[list=1]
[*]icon19.png：大小为19x19，用于地址栏中显示；
[*]icon48.png：大小为48x48，在Chrome的扩展管理页面（[url=chrome://extensions]chrome://extensions[/url]）中显示；
[*]icon128.png：大小为128x128，安装此扩展时显示。
[/list]
原始图片：
[img]http://sns.linuxpk.com/attachment/201002/8/40688_1265636924VJMV.jpg[/img]
[size=4]manifest.json[/size]
这个Chrome扩展的配置文件，用JSON（JavaScript）来描述与扩展相关的信息，完整介绍请访问：[url=http://code.google.com/chrome/extensions/manifest.html]http://code.google.com/chrome/extensions/manifest.html[/url]。本扩展的配置信息如下：[code]{
"name": "FRRS",
"version": "0.2.3",
"description": "FRRS",
"icons": {
"48": "icon48.png",
"128": "icon128.png"
},
"background_page": "background.html",
"page_action": {
"default_icon": "icon19.png",
"default_title": "FRRS"
},
"content_scripts": [
{
"matches": ["http://*.renren.com/*"],
"js": ["filter.js"],
"run_at": "document_end"
}
]
}[/code]前面五项比较简单，顾名思义，分别是扩展的“名称”、“版本号”、“描述”、“图标”以及“背景页面”。在本扩展中“背景页面”用于实现功能（2），详细内容会在下文介绍。
“page_action”是声明页面信息（本例中包含标题和图标），与之对应的是“browser_action”（本例中没有使用）。当你的扩展与页面无关时用“browser_action”，此时图标会一直显示在工具栏中；而像本例中，扩展只是针对某些特点的页面（人人网）则使用“page_action”，此时图标显示在地址栏中，并且默认是不显示的（功能2）。
至于这个扩展具体作用于哪些页面，则需要在“content_scripts”里指定，其中元素“matches”用于匹配URL（详细内容参见[url=http://code.google.com/chrome/extensions/match_patterns.html]http://code.google.com/chrome/extensions/match_patterns.html[/url]）、“js”用于指定具体的动作、“run_at”用于指定脚步运行的时间。本例中指定了，当前页面的URL与“http://*.renren.com/*”匹配时（功能1），并且在页面加载完成后，执行“filter.js”里的脚步。
[size=4]filter.js[/size][code]// show icon
chrome.extension.sendRequest();
// pattern
var reg = new RegExp('[^>]*不分享[^<]*', 'g');
var msg = 'redraiment提醒您：此信息中可能含有另您不愉快的内容，眼不见心不烦。';
// filter span
var spans = document.getElementsByTagName('span');
for (var s = 0; s < spans.length; s++) {
var context = spans[s].innerHTML.replace(/<[^>]+>/g, '');
if (reg.test(context)) {
spans[s].innerHTML = msg;
}
}
// filter heads
// ...
// filter href
// ...[/code]这部分是核心功能，我使用的模式（reg）非常简单：检查是否包含“不分享”三个字。大家可以照葫芦画瓢添加其他模式。
人人网中分享标题分别使用“span”标签（新鲜事中）、“h4”等标题标签（分享主页）以及“a”超链接标签（好友主页）。我们需要通过DOM逐一获取，此处以“span”标签为例：获取页面中所有的“span”元素，删除它们的子标签，用模式“reg”测试，如果成功就用文本“msg”替换。其他标签依此类推。
另外一个需要注意的地方：字符编码。人人网页面采用UTF-8编码，这对匹配中文会有影响，因此在保存filter.js这个文件时，需要将字符编码设为UTF-8（默认ANSI），否则将匹配失败。
剩下的第一行特别引人注目，这不是一个标准的JavaScript方法，而是Chrome提供的API。它向扩展发送了一个请求，此请求可被“background.html”中的脚步捕捉。Chrome扩展就是通过发送和捕捉请求来通信的。
[size=4]background.html[/size][code]<html>
<head>
<script>
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
chrome.pageAction.show(sender.tab.id);
}
);
</script>
</head>
</html>[/code]脚步中添加了一个监听器，当捕捉到“filter.js”发送的消息时就显示图标。
我想大家肯定会问，为什么不直接在“filter.js”里执行“chrome.pageAction.show()”来显示图标，干嘛这么多事要发送一个请求？这是Chrome扩展的限制，Chrome的所有API请参看：[url=http://code.google.com/chrome/extensions/api_index.html]http://code.google.com/chrome/extensions/api_index.html[/url]，但“content_script”里指定的脚步只能使用部分API（显示图标这个API就不在其中），而“background_page”里可以调用所以API，因此只能通过这种方式来实现。
[size=5]其他[/size]
扩展开发好了，至于如何发布使用，请参见Chrome扩展开发的“Hello World”：[url=http://code.google.com/chrome/extensions/getstarted.html]http://code.google.com/chrome/extensions/getstarted.html[/url]。
页:
[1]