作为一个豆瓣FM的重度用户和程序猿,能够为豆瓣FM编写Chrome扩展应用是一件让人兴奋的事情,这篇博文整理了豆瓣FM-Hacker的设计思想
1、说明
豆瓣FM-Hacker是一个Chrome扩展应用,主要用于嵌入豆瓣FM页面提供播放列表功能,即记录自打开豆瓣FM后播放的每首歌,并为每首歌曲提供了下载链接(QR二维条码)、播放、社会化分享、喜欢/取消喜欢和不再播放功能,效果图如下
2、思路
豆瓣FM的Web版,主要使用Flash来获取播放列表和播放歌曲等功能,不过也提供JavaScript交互的接口,这就使得我们有机可乘。
豆瓣FM每播放一首歌曲的时候都会调用一个JavaScript方法来设置一下页面信息(标题、当前歌曲),这个方法是window.extStatusHandler,而我要做的就是替换掉这个方法,以获取到歌曲信息,由于Chrome扩展应用的安全机制,content_script脚本是不能直接操作页面JavaScript的,所以需要让豆瓣FM页面外链一个JavaScript脚本。
3、实现
首先是最重要的扩展应用配置文件manifest.json
{
"name": "豆瓣FM-Hacker",
"version": "0.4.0",
"description": "嵌入豆瓣FM页面内,列举出豆瓣FM已播放的歌曲信息,并提供歌曲下载",
"permissions": ["tabs", "http://*/*"],
"icons": {
"16": "image/icon16.png",
"48": "image/icon48.png",
"128": "image/icon128.png"
},
"content_scripts": [
{
"matches": ["http://douban.fm/*", "http://music.douban.com/*"],
"css": ["hacker.css"],
"js": ["jquery.js", "content_script.js"],
"run_at": "document_start"
}
]
}
注意:在配置content_scripts的时候,需要将'run_at'设置为'document_start',这样content_script脚本就会在页面渲染开始时运行了,这个时候DOM已经OK了,可以操作DOM了
然后是content_script.js
function hackDouban(){
......
var jsUrl = 'http://doubanfm-hacker.googlecode.com/svn/trunk/hacker.js';
$('body').attr('onload', '$(\'body\').append(\'<script type=\\\'text/javascript\\\' src=\\\'' + jsUrl + '\\\'></script>\');');
......
}
$("body").ready(hackDouban);
这样就可以在body加载完成后外链JavaScript脚本了
最后就是在外链的JavaScript脚本hacker.js里面替换掉那个JavaScript对象,有了hacker.js页面就完全拿下了,可以随心所欲的玩耍了。
豆瓣FM-Hacker是开源的,遵守GNU Lesser GPL,项目传送门
豆瓣FM-Hacker已经发布到Chrome web store,扩展传送门
后记:
1、content_script的CSS文件可以作用于页面,这样就不用外链CSS文件了
2、豆瓣FM的Flash播放器有个小Bug,情况是这样的,如果Flash无法获取播放列表,或尝试通过JavaScript来获取播放列表,但是在ActionScript代码中,判断条件始终为false,导致Flash无限去判断是否使用JavaScript来获取播放列表,我已经把这个Bug反馈给豆瓣了,但是没有得到答复,后来也没有去反编译他们的Flash播放器,所以不晓得有没有修改,不过这个Bug不影响使用