Douban Pulse
![为 Chrome Web Store 推荐位准备的卡片](/static/eef22e34177176911657478e32f638b4/d8289/1.png)
2010 年 3 月初我写了一个以豆瓣广播、电台为主的 Chrome 扩展,抛开国产壳浏览器,目前 Chrome Web Store 有超过三万人安装,最近的周安装量还在小涨,好开心。
豆瓣 API 之后会升级改版,可能不再对外开放。大致了解了下,广播部分的接口应该要完全重写,到时候不知道还有没有精力跟进,不管怎样,先就此做个简单的回顾吧。
简介
Douban Pulse 是一个小巧便捷的豆瓣 Chrome 扩展。使用它,在豆瓣之外的网页,你也可以方便的查看友邻广播、参与「我说」和「推荐」以及打造符合自己口味的豆瓣 FM。
![](/static/0bbe4b2269734d33e46d0d494e704231/d5c47/1-1.jpg)
下载与安装
- 你可以使用最新稳定版 Chrome 打开这个地址直接安装
- 或者去往 Chrome Web Store 搜索 Douban Pulse 自行安装
![Douban Pulse - 豆瓣广播与设置界面](/static/344de11280366757f554a3fd5418baee/73418/2.png)
![Douban Pulse - 豆瓣电台(列表模式)](/static/dd7a74e84af19a9153f5a4dbb355e5e8/73418/3.png)
回顾
Douban Pulse 的第一个版本只有广播和推荐,5 月起逐步添加了 FM 的相关功能,显示播放列表、支持选择收听可能有悖原产品的意图。整理下开发日志:
2010-04-14 17:46
忙里偷闲更新了扩展:增加「推荐」功能。
![将只读列表的入口放入了下拉菜单](/static/ab238b933831b6ace6785af6d77ca6ce/eaa5c/0-1.png)
![推荐栏,输入后会展开标题及评论框](/static/9c4d9e9789ee53e26d23252547b5ee24/167da/0-2.png)
![勾选后自动取当前页的标题和地址](/static/923bdb797216aa782ab3b201996f1ffe/50524/0-3.png)
![表单验证](/static/e06b857392eaef93727b94918de6264a/5bdad/0-4.png)
顺便汇报下成绩:Douban Pulse 从发布到现在已经有 35 天了,Chrome 扩展中心的 Users 统计为 744(从每天的增减变化可以推测,还是比较靠谱的实际在用的人数);豆瓣的统计,最近两周每天有超过 300 人在使用,最高 394(04-12)。
2010-05-18 00:33
周末时对原扩展进行了重构,现在清爽多了,增加个电台模块很方便。今天主要完成了 background 和 popup 的通信:前台操作展示不同状态下的界面;后台处理事件、播放歌曲、对播放状态和时间做监控,即时反馈到前台。
![mini 状态下的电台](/static/3ab3585f61344dbdeac4024ced92b000/4ed25/4.png)
![标记红心](/static/ba0024d45943a69a9ba3848075af4cc6/4ed25/5.png)
界面上目前还差关闭和切换到完整模式(包含已播放的歌单)的按钮,明天做。辛苦 Tifa 为红心按钮点像素。
2010-05-19 02:38
今天做了歌曲列表的存取,用到了 Web SQL Database。
![Chrome Databases](/static/628860445f89d416fd7a56b62801c3dc/64095/6.png)
界面上的进展,主要还是围绕列表,用了 CSS3 的选择符以及背景渐变,很方便,整个播放器和列表做下来,只有 icon 用到了图片。
2010-05-20 04:07
今天正式把电台和广播合在了一起,做了包括 tab 切换、状态存储等相关的琐碎的工作。增加了歌曲列表以及电台模式下主导航的显示/隐藏切换键,所以现在共有 3 种展示方式:
- 主导航 + 播放器
- 播放器 + 歌曲列表
- 单独播放器
2010-05-21 05:17
今天做了一些性能优化,与上一版相比,速度有明显提升,不同列表以及电台间的切换不会出现假死的情况。优化点在于,按需异步加载脚本,在切换时适当使用延时,界面优先。
![默认开启广播列表,连续点击我说、推荐](/static/7e161e5d121d4c9b4c376af8937d1c79/bb66a/7.jpg)
![默认开启电台,点击全部](/static/8a72c3758edbdb165140d27d71648a62/bb66a/8.jpg)
2010-05-22 04:03
终于把开关加上了,虽然也不是那么顺眼吧。音量正在制作中,包含豆瓣电台功能的版本也将告一段落。剩下的就是多平台以及版本的测试,现在只有广播部分写了单测。与网页版电台相比,电台扩展需要记住和判断的状态比较多,也很琐碎。
![播放过的歌曲列表](/static/a6b45994992f67622bf4e824f011e79b/e2d2b/9.png)
![打开与关闭状态](/static/f1b117ea6daded2353c75280fbc63028/3f51e/10.jpg)
2010-05-23 00:55
最后一个音量功能完成了,接下来三天测试。
![音量控制 UI 变化](/static/40d55d6957f0cf57e33732bf36e63865/fa8d1/11.jpg)
2010-07-26 00:08
这次主要做了速度优化。可以试试「所有广播」下拉菜单中的分类广播,以及我说、推荐,显示速度都有所改善。
![优化前开启 popup (v.1.2.2)](/static/60ada27e1599c3cc7a4a9b9d8779b492/4578f/12.png)
![优化前开启 popup](/static/af63e5a74df473659368f69f7286d4e9/9196a/13.png)
![优化后开启 popup (v.1.2.3)](/static/677d508be6c41c71559b04a34ccb263d/9b5c5/14.png)
![优化后开启 popup](/static/61547208ec7058b70b898257b56e43be/e63c2/15.png)
关闭 popup 后,可以记住 tab 状态了,算是实现了简单的自定制,你可以只把它当做广播或电台扩展用。顺便加了几个快捷键:
- Enter 发布评论
- Ctrl + Enter 发布广播
![2010-06-04 扩展用户数](/static/e647feeb68361aa69ea966e96bc1b26c/2ed22/15-1.png)
2010-08-22 02:37
Douban Pulse 1.2.4 新增偏好设置,此外修复了大量已知 BUG。
![这两项设定是之前呼声最高地,优先做了:)](/static/16020ea659934acc32dfec7a70893a98/45568/16.png)
试用 TinyPixels 点了个电台图标,比缩放的清晰不少,但还是像棋类游戏 - -! 最近时间不多,小版本更新,先这样了:)
2010-09-07 23:45
Douban Pulse 1.3 发布!增加公共电台。
- 强烈建议先升级你的 Chrome
- 请老用户务必先注销并卸载之前的版本
注销按钮在扩展的 Options 页:
![图标上点右键或在展开的窗口中点击右上角链接进入](/static/b6d5165c68e16f8ada2b4839f77f211d/20c81/17.png)
在应用列表中可以找到「卸载」链接:
![进入扩展列表的方法:点击小扳手 > Tools > Extensions](/static/bbad6a37a06dc9a41905f11f65a341a1/a4b79/18.png)
默认状态下点击 tab 中的电台依然是私人电台,如要选择公共电台,需转换为电台模式:
![在偏好设置中选择「只使用电台」](/static/f7e9c26aea51a0f66017d8c0d278f6f8/3c959/19.png)
在电台模式下,新消失提醒是自动关闭的,Douban Pulse 变成了独立的豆瓣电台应用:
![切换到电台模式并展开已听歌曲列表](/static/a78958aaf0157c043462bae92eb3760e/b1cc7/20.png)
2010-10-25 00:00
Douban Pulse 1.3.1 发布,郁闷的一版。Chrome 7 带来的 bug 使扩展第一次出现了兼容性问题。杯具的是前不久 Google 已经将稳定版升到了 7.0。
- Chrome 6 可正常使用全部功能
- Chrome 7/8 各版本均无法正常使用电台功能
v1.3.1 主要做了三件事:
- 继续重构代码
- 给电台增加新频道
- 修复因 Chrome 7 的 bug 导致的扩展假死
![顺便调整了下拉菜单的布局,避免窗口长度不够时的遮挡问题](/static/f7a39f0a34636ba1fca630f1c9977ee6/1ef3a/21.png)
![错误提示,此时电台无法操作](/static/58498d825a17a1179a1cf3e441dbe2b8/167da/22.png)
我已经向开发组及 Google 负责浏览器扩展的朋友反馈了 bug,这里要感谢 Eyon 的帮助。接下来就是等待 bug 的修复了。
如果想完整体验新版 Douban Pulse,目前唯一的办法是使用 Chrome 6,考虑到很多同学已经自动升级到新版,这里给出历史版本的下载链接:
2010-10-31 14:26
解决了 PhoneGap App 在真机上运行崩溃的问题。首先要确保设备没有越狱,其次在使用 ChildBrowser Plugin 时不要漏掉资源文件(ChildBrowserViewController.xib
及所需图片)我是在这里找到的答案。
![后台运行](/static/ef43f4f4fc11feceb0d2ca8fe897a902/d8289/23.png)
![现在 Douban Pulse 可以在真机上跑了:)](/static/9a5c5ed2f6fe2ab43cadc4ce99747c5e/4b22c/23-1.jpg)
2010-12-01 00:44
同期进行的番外篇,拆分出广播功能,用 PhoneGap 做了个独立的 App。因为是基于 WebView,流畅度和原生还是有差距;Titanium 算是避免了这个问题,但需要重新开发,自定制的部分也比较受限,就迁移成本考虑,还是选择了 PhoneGap。
![在模拟器上运行](/static/db9b9b0fe14e8f905a4edf26107c0be8/64095/24.png)
![在 iPod 真机上运行](/static/1275377f4c9377b6af799323bffc9b25/64095/25.png)
这期间还尝试将 Douban Pulse 移植到 Safari 和 Chrome App,UI 和大部分逻辑可以复用,但坑不少,进展缓慢。
![Douban Pulse 1.0 for Safari](/static/82d00981bdf2f05f1b8b08b47ce2235b/d4eb7/25-1.png)
![Chrome Web 扩展快捷入口](/static/ee0a203cb85c6cf6f60eefabb127f52e/ccd1b/25-2.png)
![Chrome App 快捷入口](/static/d36e3cb60f8cbd6b3c7e7680160f16ee/18ae8/25-3.png)
GDD 2011
2011 Google 开发者日技术大会,Douban Pulse 入选了应用开发案例英雄榜。得到认可很开心,算是为我加入豆瓣以来持续最久的 side project 画上了圆满的句号。
![26](/static/a15ccd98cf1a8c75b77a3162ebc35789/4b22c/26.jpg)