Wednesday, March 16, 2011

Introduction to Inspector

有时我们想要监视某个网页是否有更新, 但网站又没有提供RSS, 这时就只能定期去查看那个网页, 偶尔也会因此忘记. 这种枯燥、乏味的重复行为让人厌倦, 于是我实现了一个简单的小项目, 我把它叫做 Inspector. 输入你想要监视的网址, 选取你感兴趣的网页元素, 然后Inspector就会在有更新时通过Email通知你. It’s simple, huh?

下面是一些使用截图, 首先是选取网页元素:

Inspect

然后是Inspector发给你的通知邮件 (最好把邮件地址先加到联系人里, 一般来说第一次都会被判为垃圾邮件, 至少Gmail是这样):

Inspector Notification

网站只在Firefox、Chrome和Safari中测试过, 访问可能需要翻墙 (由于某种众所周知的原因, 你懂的). 目前项目代码已经托管在GitHub: https://github.com/xiaogaozi/inspector, 如果你有任何问题或者建议可以到 这个页面 提出.

接下来是一些实现这个项目过程中的技术吐槽, 不感兴趣的同学可以直奔 项目主站 围观.

选取网页元素这点是借鉴的Firebug, 同时借鉴的还有它的代码. 在使用JS绑定事件时遇到了 this 关键字引用错误问题, 最后在 “JavaScript: The Definitive Guide” 中找到了答案, 具体可参考书中17.1.5小节. 呵呵, JS基础没学好. “/inspect” 页面最下面的提示要感谢兰姐提醒用 iframe, 对于固定样式很有好处. 修正网页CSS、JS链接这个需要判断是否为绝对地址, 常规的也就是http或者https打头, 不过 The World Clock 网页的CSS引用很奇怪, 是 “//” 打头, 测试大猫的博客时也让我发现一个类似的bug. 像Facebook这样的通过代码动态加载CSS的也没办法, 还有如果是用 frameset 写的页面现在还暂时不支持.

页面抓取现在对于静态页面效果要好一点. 定位网页元素现在比较常用的有CSS selector和XPath, 前者我更熟一点, 不过Python标准库不支持, libxml2可以, 但它所需要的so库不能上传到GAE, 只能作罢, 而且它只能分析那些标准的XML, 遇到稍微不标准的就会出错, 这点和标准库一个德行. 但互联网上充斥着各种不标准, 这由不得开发者挑剔, 要对付它们, Beautiful Soup 是一个不错的选择. 但问题又来了, BS即不支持CSS selector, 也不支持XPath. 后来我找到一个日本人写的 BS扩展, 可以用上XPath. 至于CSS selector, 我也找到 一份Python实现, 需要结合Tidy来处理那些非标准页面, 不过我没试过.

能这么快完成, 也得益于GAE的便捷 (虽然前前后后花了有半个来月). 用户验证、Email服务、数据存储这些都能通过很简单的API搞定, 不过自带的Django模板引擎有点弱智, 一些高级语法支持不了.

页面风格抄的GitHub, 按钮是GitHub和Twitter的结合, 表格抄的GAE, About页面用AsciiDoc写的, 看起来还算凑合. 第一次用Closure Compiler, 第一次用CSSTidy, 压缩了确实不错.

最后, 如果你坚持看到这里的话, 感谢你的支持.