@会网络的老鼠

涂飞平的博客空间

70行代码写一个Bing壁纸保存插件(Chrome浏览器)

1 年前 0

个人比较喜欢使用Bing搜索,因为翻墙用Google稍显麻烦,百度太烂,还有一个就是喜欢Bing的壁纸功能,每幅照片都沁人心脾,还支持保存,但对于动态背景,Bing默认是不支持保存的,每次我都通过F12呼出“开发者工具”,然后取出其中(静态)背景的地址,再单独访问背景,然后保存,虽说整个过程也不复杂,但还是稍显繁琐。
之前分别帮两个朋友做过Chrome插件,一个是专门用于“虾米网”自动签到的插件(http://git.oschina.net/sunnytu/XiaMiAutoSign );一个是试卷网的试题爬虫(涉及私密,代码暂未上传)。由于Chrome插件开发采用HTML+JS+CSS技术,所以比较简单。只要查看教程很快就能上手,这里有两个选择:1、Google的Chrome教程https://developer.chrome.com/extensions/ ,比较权威(最新版本)和全面,但需要翻墙;
2、360的插件开发文档(著名的抢票插件就是Chrome插件技术开发的)http://open.chrome.360.cn/extension_dev/overview.html ,这个是经过360翻译后的文档,虽然没有那么全面,但贵在不需要翻墙,还是全中文,比较方便。

为了以后快速保存Bing的动(静)态壁纸,所以前几天打算写一个Chrome插件来做这件事(平时我只用Chrome浏览器,只有在测试的时候才用用IE)。
由于功能很简单,所以最后写下来,代码(格式化后)只有区区71行。

使用方法(需求):在插件栏出现一个Bing图标,当点击图标时候,会查找Chrome是否打开Bing主页,如果没有打开,询问是否打开。如果已经打开,直接打开新页签,显示Bing静态大图即可(就这么简单)。

bing.png

这是一个标准的Browser Actions(具体Browser/Page Actions区别参考开发文档)。
插件定义: manifest.json

{  //Bing墙纸下载扩展(Chrome Extension)
"manifest_version": 2,
"name": "Bing墙纸下载扩展", //扩展名称,出现在扩展管理器
"description": "Bing搜索墙纸下载扩展
"version": "1.0",
"content_scripts": [{ // 页面内容代码,与符合条件的界面进行交互,类似油猴脚本就写这里
"matches": ["http://*.bing.com/*"], // 不是什么页面都加入脚本的,只针对Bing网进行加载
"js": ["js/jquery-2.0.3.js", "js/caction.js" ]
}],
"background": {//后台代码,主要与chrome本身进行交互
"scripts": ["js/baction.js"]
},
"permissions": [ "tabs", "history", "http://*./*" ], // 扩展需要的权限,这里需要操作tab和跨域调用
"browser_action": { // 按钮描述,表明扩展是一个Browser扩展(还有Page)
"default_title": "Bing墙纸", // 扩展按钮标题,作为按钮提示出现
"default_icon": "icon.png" // 按钮的图标
}
}
各个部分通过注释应该很快能明白其中的意义,更多细节可以参考开发文档。
后台脚本:baction.js

//BrowserAction
(function(){
function _sendMessage(id, msg, fn){
chrome.tabs.sendMessage(id, msg, fn);
}
function sendMessage(fn) {
var bingId = -1;
chrome.tabs.query({}, function(tabs) {
for (var i = 0, j = tabs.length; i < j; i++) {
var tab = tabs[i];
if (tab.url.indexOf("cn.bing.com") > -1) {
bingId = tab.id;
break;
}
}
if (bingId == -1) {
if (!confirm("没有打开Bing,是否现在打开?")) return;
chrome.tabs.create({"url": "http://cn.bing.com"}, function(_tab){
bingId = _tab.id;
_sendMessage(bingId, "getImageUrl", fn);
});
} else {
_sendMessage(bingId, "getImageUrl", fn);
return;
}
});
}

chrome.browserAction.onClicked.addListener(function(tab) {
sendMessage(function(resp){
//url("http://......")
var url = resp;
if (url) {
if (/"(.*?)"/g.test(url)) {
var url = RegExp.$1;
chrome.tabs.create({"url": url});
}
}
});
});
})();

这是行数最多的文件,是插件的核心控制代码,通过 `chrome.browserAction.onClicked.addListener` 设置插件按钮点击事件(这里没有必要出现popup页面,所以直接采用图标按钮点击)。
事件中会枚举目前Chrome中所有打开的Tab,并查看其url属性,如果没有发现cn.bing.com,则提示是否打开(chrome.tabs.create)Bing页面,如果打开,则向该页签发送消息(字符串“getImageUrl”),Bing页面的内容脚本(conten_scripts)会返回Bing页面中,背景图的url地址,得到背景图的地址,就可以通过新开页签载入了,然后就是“图片另存为”,保存下来。

页面脚本(油猴脚本):caction.js

$(function() {
chrome.runtime.onMessage.addListener(function(msg, _, sendResponse) {
if (msg == "getImageUrl")
sendResponse($("#bgDiv").css("background-image"));
});
});
最简单,就是一个消息监听器,监听插件发送过来的消息,如果是字符串“getImageUrl”,就返回当前背景的url地址,这个操作我用jquery选择器,一行代码。

整个项目就这些代码,有兴趣可以到这里看看:
http://git.oschina.net/sunnytu/BingWallPaper
写完才发现,1年前写过一篇文章,就是“虾米网”自动签到插件:
虾米音乐自动签到的Chrome Extension

附件:BingWallPaper.crx 点击下载

编写评论