Chrome扩展 - 百度识图

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

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

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

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

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

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

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

manifest.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 "
}

然后是写个后台脚本

background.html

<! 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下载完会自动提示安装

希望这个扩展有人喜欢~