跳至主要内容

过滤分享的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。


评论

发表评论

此博客中的热门博文

AutoHotKey 新手入门教程

AutoHotKey 真是一个好玩的工具！短短几行代码就是先了“窗口置顶”、“窗口透明”等功能，之前我还特意为此装了好几个小工具，现在都可以卸掉了。闲来无事，就把 Quick Start 翻译了一下，我没有逐字逐句地翻译，有时候我嫌原文罗嗦就用自己的话概括地描述了一下。 原文地址：http://www.autohotkey.com/docs/Tutorial.htm 教程目录 创建脚本 启动程序 模拟鼠标键盘 操纵窗口 输入 变量与剪切板 循环 操纵文件 其他特性 创建脚本 每个脚本都是一个纯文本文件，由一些能被 AutoHotKey.exe 执行的命令组成。一个脚本可能还包含 热键 和 热字符串 。如果没有热键和热字符串，脚本在启动的时候就会从头依次执行到尾。 创建一个新的脚本： 下载 并安装 AutoHotkey。 右击鼠标，选择 新建 -> 文本文档 。 输入文件名并确保以 .ahk 结尾。例如：Test.ahk。 右击文件，选择 编辑脚本 。 输入以下内容：#space::Run www.google.com 上一行的第一个字符 "#" 代表键盘上的 Windows 键；所以 #space 表示在按住 Windows 键后再按空格键。"::" 后面的命令会在热键激活后执行，在本例中则会打开谷歌主页。继续按下面步骤操作，来执行这个脚本： 保存并关闭该文件。 双击该文件来启动它。在系统托盘里会出现一个新图标。 按下 Windows 和空格键，网页会在默认的浏览器里打开。 右击系统托盘里的绿色图标可以退出或编辑当前脚本。 注意： 可以同时启动多个脚本，并且在系统托盘里都会有一个相应的图标。 每个脚本都能定义多个 热键 和 热字符串 。 想让某个脚本开机即启动，可以将它的 快捷方式放到开始菜单的启动目录里 。 启动程序 命令 Run 可以运行程序、打开文档、网页链接或快捷键。请参看以下示例： Run Notepad Run C:\My Documents\Address List.doc Run C:\My Documents\My Shortcut.lnk Run www.yahoo.com Run mailto:someone@somedoma
发表评论
阅读全文

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 共享。
发表评论
阅读全文

Shell中同时读多个文件

Shell中同时读多个文件 redraiment, 2009-08-23 一个文件分割成多个文件 　　有时需要提取文件中的一个或多个列元素生成新的文件，这一操作在 Shell 里很容易实现。比如有一个数据文件 data，有三列信息：姓名、学号、班级。 redraiment 0612800134 0601 christine 0612800136 0601 zb 0612800229 0602 　　现在需要这个文件的第一列和第二列信息分别存到文件 f1 和 f2 中，可以用 awk 提取，也可以用下面这个简单 shell 程序： #!/bin/sh while read f1 f2 f3 do      echo $f1 >> f1      echo $f2 >> f2 done 多个文件合并成一个文件 　　如果想把多个文件重新合并成一个多列文件，而不是追加到文件尾处。例如把上列中生成的 f1 和 f2 重新组成 join.txt 。这时需要同时操作多个文件，就像 C 语言中用 fopen 同时打开多个文件，在 shell 里也是类似的。只是在 shell 里叫做“文件描述符”，用“0-9”十个数字表示。其中 0、1、2 分别是系统的标准输入、输出、错误。“3-9”则由用户只有使用。我们就可以任选两个来重定向输入。脚本如下： #!/bin/sh exec 3< f1 exec 4< f2 while read f1 < & 3 && read f2 < & 4 do      echo $f1 $f2 >> join.txt done
发表评论
阅读全文