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

豆瓣FM-Hacker——豆瓣FM播放列表补全计划相关推荐

西安交通大学软件工程专业笔记补全计划
文章目录西安交通大学软件工程专业笔记补全计划大一下程序设计基础面向对象程序设计大二上数据结构与算法设计西安交通大学软件工程专业笔记补全计划 ⭐️写在前面 ⭐️ 这些笔记,绝大部分都是老师 ...
unity技术补全计划
将一个对象设置为不可见时仍可拾取,所以两者经常关联操作,不可视时设为不可操作 // 只有将垂直同步计数设置为0,才能锁帧,否则锁帧的代码无效// 垂直同步的作用就是显著减少游戏画面撕裂.跳帧,因为画面 ...
【计算机本科补全计划】Mysql 学习小计（2）
正文之前昨天下午写了篇 Mysql学习小计,结果出乎意料的受欢迎?变相刺激了我多写点 Mysql?好吧,如尔所愿.我晚上反正还不知道学点啥,就把今天看的那个菜鸟教程学完吧,到时候估计一点了,就可以睡 ...
java时间规划书_【计算机本科补全计划】Java学习笔记(九) Java日期时间
正文之前终于好像仿佛看完了菜鸟教程的Java课程,感觉自己收获颇丰!很好,Java看完之后正愁如何开始进阶呢!结果发现菜鸟还准备了Java实例这种好东西!简直就是教程界的良心啊 !!!没事,先写写笔 ...
【计算机本科补全计划】王道单科--栈的实现以及一些性质
正文之前这几天深受<C++ Primer>困扰,昨晚看拷贝构造函数以及析构函数那一块真是看到快哭了.所以今天找点别的看看,缓解下因为看不懂Primer的书籍而带来的不快感.自然而然的,当 ...
【计算机本科补全计划】Mysql 学习小计（1）
正文之前以后是要做大数据的人,如果连结构化的数据库都不会的话,那岂不是笑死人?所以果断靠着当年兴趣盎然的时候学的那点基础来复习一下,发现果然学过一遍再来复习那基本就是高中学一段内容看书与翻书的区别, ...
【计算机本科补全计划】Mysql 学习小计（3）
正文之前想到自己每天中午还要玩一小时手机,就自责不已,今天看成甲的好好学习一书,颇有收获,晚上写给大伙看,现在还是谢谢 Mysql,到了后面感觉越来越难了呢!! 正文 Mysql 事务 Mysql ...
ccf计算机认证考试题集,【计算机本科补全计划】CCF计算机职业资格认证 2017-03 试题初试...
正文之前我在之前的文章中提到过,我的老师要求我的CCF 考试考个280分来打个底,(没错,我就是那个横跨考研.工作.保研三大领域的男人)相当于是测试下我的能力,所以虽然不知道近期有没有相关的考试,但 ...
计算机ccf试题答案,【计算机本科补全计划】CCF 2017-03 试题初试
正文之前我在之前的文章中提到过,我的老师要求我的CCF 考试考个280分来打个底,(没错,我就是那个横跨考研.工作.保研三大领域的男人)相当于是测试下我的能力,所以虽然不知道近期有没有相关的考试,但 ...

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

豆瓣FM-Hacker——豆瓣FM播放列表补全计划相关推荐

最新文章

热门文章