跳至主要内容

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

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

redraiment, 2010-02-08

明确需求





　　扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍：把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉，眼不见为净！描述得更详细些就是：
  1. 过滤功能只在人人网域名（http://*.renren.com/*）下启用；
  2. 只有访问人人网时，扩展的图标才显示；
  3. 好友的分享信息会出现在很多地方（如好友主页、新鲜事、分享主页等），这些都要过滤；
  4. 我只是不想看到那些讨厌的标题，但分享的视频、图片等还是想看的。
　　其中（4）是核心功能，（2）可有可无。

Chrome扩展简介

　　Chrome扩展的主页是：http://code.google.com/chrome/extensions/index.html。在此我只简单地介绍一下和本扩展相关的内容，更详细的信息请访问其主页。在本扩展中一共只有六个文件，其中三个是图片文件（用于图标），其他三个文件大小都不到1KB，所以无需“多事”把所谓的源码上传，直接把那几行代码贴到文章中即可。下面逐一介绍六个文件：

图标文件

　　图标文件有三个尺寸，都是由同一张图片修改而成。我没什么艺术细胞，原始图片的作者并不是我，只是觉得蛮符合这个扩展的主题，呵呵。如果您知道它的作者请给我留言，或者有志同道合的朋友帮忙贡献一张新图标，在此谢过！
  1. icon19.png：大小为19x19，用于地址栏中显示；
  2. icon48.png：大小为48x48，在Chrome的扩展管理页面（chrome://extensions）中显示；
  3. icon128.png：大小为128x128，安装此扩展时显示。
　　原始图片：

manifest.json

　　这个Chrome扩展的配置文件，用JSON（JavaScript）来描述与扩展相关的信息，完整介绍请访问：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 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
// ...
　　这部分是核心功能，我使用的模式（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。


评论

发表评论

此博客中的热门博文

JavaScript中的字符串乘法

JavaScript中的字符串乘法 redraiment, Date 原文 原文地址： http://www.davidflanagan.com/2009/08/string-multipli.html 原作者：David Flanagan In Ruby, the "*" operator used with a string on the left and a number on the right does string repetition. "Ruby"*2 evaluates to "RubyRuby", for example. This is only occasionally useful (when creating lines of hyphens for ASCII tables, for example) but it seems kind of neat. And it sure beats having to write a loop and concatenate n copies of a string one at a time--that just seems really inefficient. I just realized that there is a clever way to implement string multiplication in JavaScript: String.prototype.times = function(n) {     return Array.prototype.join.call({length:n+1}, this); }; "js".times(5) // => "jsjsjsjsjs" This method takes advantage of the behavior of the  Array.join()  method for arrays that have undefined elements. But it doesn't even bother creating an array with n+1 undefined ele...
发表评论
阅读全文

DAO层测试

<dependency> <groupId>com.wix</groupId> <artifactId>wix-embedded-mysql</artifactId> <version>2.1.4</version> <scope>test</scope> </dependency> 利用 wix-embedded-mysql 把MySQL嵌入到进程中，作为内存型的MySQL来做单元测试。 脚本： resources/migrations/mysql/<database>/<timestamp>_<action>.sql 但多个项目需要共享数据库脚本，可能可以用 git submodule 共享。
发表评论
阅读全文

人所不欲，勿施于人

谁说博客也要像论文一样结构清晰、有条理？！ 软件卸载 昨天整理自己的本本，卸载了 VMware 7.0 + 深度XP，MS Office 2007 以及 Visual Basic 6.0。我承认这些都是盗版软件，不过剩下的应用程序都是自由软件（freeware）或免费软件（freeware），这下我的计算机“干净”了。闲来无事，我就细数了一下当初装这些软件的原因： VMware + XP：当初刚买本本的时候，正好在上软件工程实践，紧遵老师的教导“将自己的开发环境随身携带”，自然第一款软件就是装了虚拟机（学校机房里是肆无忌惮地用盗版 VMware），另外上课指定使用 Visio 作图，那也只好一起装了；当然，也有部分原因是因为某些人的计算机装的是 XP，我这边有个 XP 环境也是为了方便问题重现（我的本本预装了 Vista）。 MS Office 2007：在毕设期间，我也还是用 Open Office 和 WPS 2010，但现在公司用的却是 Office 2007（正版）。我这次卸载这款办公软件其实也是在提醒自己：工作的事情要在工作时间里完成！ VB 6：你可能无法想象在我们科班的毕业设计中有多少是 VB6 项目，从大二开始，每逢毕业将至，总会有人来找我帮忙看那些不晓得从哪儿搜罗来的 VB6 代码，经不住软磨硬泡，我总会帮着改改；另一个原因在我自己，我一直下不了决心去学 MFC 等，所以但凡要做 GUI 程序，我都是拿 VB6 来画界面，再调用由 C 语言开发的 DLL 库，不过现在改用 QT，于是 VB6 可以功成身退了。 己所不欲，勿施于人 有些人就喜欢把自己的事全盘交托给别人来做，我一直不明白他们既然有精力去说服别人，为什么就没耐心自己去完成（所以我下面说人和人之间是无法理解的）。既然自己都认为这是无聊的事情，为什么偏偏又假设其他人会愿意无偿地帮你来完成呢？ 两千多年前，孔老夫子提出“己所不欲，勿施于人”的观点，但到了今天，我听到关于这句话时的语境普遍是，A说：“那个XX东西你也不要了（或要了也没用），不如就让给我吧？”，B就义正言辞地反对：“那怎么可以！己所不欲，勿施于人嘛。” 己所甚欲，勿施于人 易中天老师在《百家讲坛》讲解诸子百家...
发表评论
阅读全文