豆瓣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不影响使用