豆瓣FM-Hacker——豆瓣FM播放列表补全计划

作为一个豆瓣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不影响使用