Chrome 扩展: Sokoban.WS Tools

作者:杨超

本文地址:http://sokoban.ws/blog/?p=618

昨天的博文写了我是如何编写Firefox的扩展Sokoban.WS Tools的。在写的过程中,我注意到相似图片搜索TinEye网站不光是有Firefox的扩展,还同时有ChromeOpera等其他浏览器的扩展。我就装了TinEye的Chrome扩展,和它的Firefox扩展一样,实现同样的功能:在图片上方点击右键,通过右键菜单快捷搜索。于是我就琢磨着如何把Firefox上的推箱子扩展也移植到Chrome浏览器上。

为了实现这个目的,还是浏览官方的技术文档和通过著名的编程技术问答社区StackOverflow来学习Chrome扩展的编写方法。经过一番了解,发现Chrome的扩展也是用JavaScript来编写的,但是具体实现方案又和Firefox的扩展不一样。首先,Firefox是用特有的XUL格式来描述扩展的界面的。但是Chrome没有专用的界面描述语言,而是和网页一样,用HTML5来描述。比如,选项对话框在Chrome的扩展里面就是一个本地的网页在新标签中打开,而不像Firefox那样是一个弹出的对话框,和网页有明显区别。而右键菜单项的更改则是在JavaScript代码中调用Chrome提供的API函数来实现。其次,Firefox扩展的JavaScript代码可以同时和扩展的界面控件以及当前浏览的网页中的各种要素对话。而Chrome扩展的JavaScript代码分成background和content两类。Background代码只和扩展自身的对象打交道,如右键菜单、本地选项页面、扩展在地址栏上的图标等等。要获取当前浏览的页面的内容,只能由Content类代码完成。Background和Content两类代码是相对独立的,要完成有用的扩展功能,两者必须交流。于是Chrome就设计了一种Message机制,通过在Backgournd 和Content代码之间请求和回应Message来让Background代码间接地获取当前浏览的页面的信息。主要就是这两点不同。这导致的结果就是Firefox扩展的表现力更强,而Chrome扩展被有些人戏称为就是本地的HTML+JavaScript应用,和浏览器的结合度相对较弱。

不管如何,要实现我想要的推箱子扩展功能,Chrome的扩展技术还是可以办到的。于是又用了大半天时间,完成了Chrome上的扩展Sokoban.WS Tools。因为和Firefox上的扩展是完成一样的功能,核心的逻辑(即把XSB格式关卡转换成SokoPlayer HTML5能识别的URL参数的几十行JavaScript代码)是一样的,这部分代码可以直接重用,所以我给扩展起了同样的名字:Sokoban.WS Tools。下面是Chrome上该扩展的截图:

做完了Chrome的扩展之后,很自然的就想能否再移植到其他浏览器上。所以我就继续考察了另外一个浏览器Opera的扩展。考察方法还是先安装相似图片搜索工具TinEye的Opera扩展。令我颇感意外的是,TinEye的Opera扩展用了一种不太好的方法来实现。右键菜单不再使用了。取而代之的是在Opera地址栏最右方出现一个TinEye的图标,点击该图标,会弹出一个悬浮框显示当前页面的所有图片,再点击想要搜索的图片进行搜索。这种方法相对右键菜单来说,明显是一种较差的方案。所以我有理由相信,Opera扩展所能提供的功能较弱,扩展是无法修改浏览器的右键菜单的。于是我就没有继续研究了,浏览器扩展的探索大概到此也告一段落了。


此条目发表在 推箱子, 编程 分类目录。将固定链接加入收藏夹。