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_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(){
returnfunction(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>
<html>
<head>
<title>百度识图</title>
</head>
<body>
<script>
function getClickHandler(){
returnfunction(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下载完会自动提示安装
希望这个扩展有人喜欢~
