Chrome扩展 - 百度识图

我经常搜集些小图片，网上的图片往往都有水印（特别是现在微博发的图片，几乎右下角都有水印）或者比较小，经常会有想找图片原始的版本的冲动。

最近我才发现原来百度有个识图搜索，可以搜索出相似的图片，目前还是测试版，成功率不高，不过在很多场合还是可以派上用场的 :) 

PS: Google的Goggles似乎也可以识图，不过只见到手机终端软件，不知Web上能否调用。

目前百度识图在使用时需要登录它的网址，然后要上传一幅图片(<5M)或输入图片的网址，才开始搜索，整个操作比较麻烦。

于是打算做一个Chrome的插件，给网页图片的右键菜单添加一项，单击自动搜索相似的图片并显示在新的标签页里 :)

之前没做过这方面的开发，RTFM之后才发现做Chrome的插件是比较简单的，跟开发Gadgets差不多。

首先定义一个JSON编码的清单：

  {
 " background_page "  :  " background.html " ,
 " name "  :  " 百度识图 " ,
 " description "  :  " 使用百度识图搜索相似图片. http://www.cnblogs.com/neutra " ,
 " icons "  : {
 " 16 "  :  " baidu-16.ico " ,
 " 48 "  :  " baidu-48.png " ,
 " 128 "  :  " baidu-128.png " 
 },
 " minimum_chrome_version "  :  " 6.0.0.0 " ,
 " page_action " : {
 " default_icon " :  " baidu-16.ico " ,
 " default_title " :  " 百度识图 " 
 },
 " permissions "  : [
 " contextMenus " ,
 " tabs " ,
 " http://*/* " ,
 " https://*/* " 
 ],
 " version "  :  " 1.0.0 " 
}  

然后是写个后台脚本

  <! DOCTYPE html > 
 < html > 
 < head > 
 < title > 百度识图 < / title> 
 < / head> 
 < body > 
 < script > 
 function  getClickHandler(){
 return function (info, tab){
 var  url  = ' http://stu.baidu.com/i?rt=0&rn=10&ct=1&tn=baiduimage&objurl= ' +  escape(info.srcUrl);
 chrome.tabs.create({ url: url, index: tab.index  + 1 });
 };
 };
 chrome.contextMenus.create({
 " title "  :  " 百度识图 " ,
 " type "  :  " normal " ,
 " contexts "  : [ " image " ],
 " onclick "  : getClickHandler()
 });
 function  checkForBaiduUrl(tabId, changeInfo, tab){
 var  url  =  tab.url;
 if (url != null &&  url.length  >= 21 &&  url.substr( 0 , 21 ).toLowerCase()  == " http://stu.baidu.com/ " ){
 chrome.pageAction.show(tabId);
 }
 };
 chrome.tabs.onUpdated.addListener(checkForBaiduUrl);
 < / script> 
 < / body> 
 < / html>  

上面脚本实现两个功能：一是给图片添加一个右键菜单项，二是当当前标签页的地址是百度识图的地址时在Chrome地址栏右边显示个小图标

注意：上面两个文件都要用UTF8编码保存

做完之后本想发布到GoogleWebStore里的，才郁闷地发现发布扩展程序需要5$的注册费（不过以后发布其他扩展就不用收费了），更郁闷的是付款页面的国家选择列表里没找到China……囧

园里也不能上传crx文件，暂时放到115网盘，下载地址 http://u.115.com/file/f61ec380c7 Chrome下载完会自动提示安装

希望这个扩展有人喜欢~