过滤分享的Chrome扩展开发详解

来源：互联网发布：二维数组先定义再赋值编辑：程序博客网时间：2024/04/30 23:46

明确需求

扩展的功能在前文《眼不见为净——过滤人人网分享的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。本扩展的配置信息如下：

{ "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" } ]}

前面五项比较简单，顾名思义，分别是扩展的“名称”、“版本号”、“描述”、“图标”以及“背景页面”。在本扩展中“背景页面”用于实现功能（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

// show iconchrome.extension.sendRequest();// patternvar reg = new RegExp('[^>]*不分享[^<]*', 'g');var msg = 'redraiment提醒您：此信息中可能含有另您不愉快的内容，眼不见心不烦。';// filter spanvar 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// ...

这部分是核心功能，我使用的模式（reg）非常简单：检查是否包含“不分享”三个字。大家可以照葫芦画瓢添加其他模式。

人人网中分享标题分别使用“span”标签（新鲜事中）、“h4”等标题标签（分享主页）以及“a”超链接标签（好友主页）。我们需要通过DOM逐一获取，此处以“span”标签为例：获取页面中所有的“span”元素，删除它们的子标签，用模式“reg”测试，如果成功就用文本“msg”替换。其他标签依此类推。

另外一个需要注意的地方：字符编码。人人网页面采用UTF-8编码，这对匹配中文会有影响，因此在保存filter.js这个文件时，需要将字符编码设为UTF-8（默认ANSI），否则将匹配失败。

剩下的第一行特别引人注目，这不是一个标准的JavaScript方法，而是Chrome提供的API。它向扩展发送了一个请求，此请求可被“background.html”中的脚步捕捉。Chrome扩展就是通过发送和捕捉请求来通信的。

background.html

<html><head><script> chrome.extension.onRequest.addListener( function(request, sender, sendResponse) { chrome.pageAction.show(sender.tab.id); } );</script></head></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