跳至主要内容

过滤分享的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
发表评论
阅读全文

好玩的数学——吉普赛读心术解密

好玩的数学——吉普赛读心术解密 redraiment, 2009-11-19 神奇的吉普赛读心术 　　闲着无聊窜寝室，看到一个同学在玩一个 flash 游戏：吉普赛读心术（ http://gb.cri.cn/mmsource/flash/2006/04/10/er060410001.swf ）。规则如下： 任意选择一个两位数（或者说，从10~99之间任意选择一个数），把这个数的十位与个位相加，再把任意选择的数减去这个和。例如：你选的数是23，然后2+3=5，然后23-5=18 在图表中找出与最后得出的数所相应的图形，并把这个图形牢记心中，然后点击水晶球。你会发现，水晶球所显示出来的图形就是你刚刚心里记下的那个图形。 　　咋看之下觉得很神奇，但仔细把玩两三回后你就会发现其中的奥秘： 右边的图标每次都会改变； 9、18、27、...、81 这9个图标永远是一样的。 　　假设你选择的两位数是 ab（即 ab=a×10+b），其中 1≤a≤9, 0≤b≤9 。按照规则计算就是 (a×10+b)-(a+b)=9×a，结果是 9 的倍数，∵ 1≤a≤9 ∴ 结果为 9、18、27、...、81 中的任意一个。又∵ 这9个图标是一样的，∴ 水晶球神奇地知道你记的图标。 手指计算器 　　无独有偶，记的小学数学课上老师教我们用手指计算任意两个5-10之间的数的积。 　　例如 6×8 ，一只手伸出 6-5=1 根指头，另一只手伸出 8-5=3 根指头。1+3=4，4 就是积的十位数；把两手弯曲的指头数相乘得 4×2=8，8 是积的个位数。则 6×8=48。 　　道理和上面相同：a×b=[(a-5)+(b-5)]×10+(10-a)×(10-b) 神秘的失踪 　　做这道题一定要的亲自动手才有滋味！否则就会像浮光掠影，印象不深。 　　将一个正方形分割成 7×7=49 的小方格，并按下图将它们分为“甲、乙、丙、丁、戊”五部分。 　　然后，甲块不动、乙块和丙块对调、戊块上移、丁块右移。得到新图如下： 　　经过这样重新组合拼成的新正方形，中间奇迹般地空出了一个洞！ 　　实际上这只不过是一个小戏法，上面的新图形并不是真的正方形。 观察原始图可知 △ABC 和 △AED 是相似三角形 ∴ DE:CB=AD:AC=4:7 ∴ DE=8/7 ∴ EF=DE+DF=36/7 ∴ 上图
发表评论
阅读全文

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