Yan's Blog 🔙

Douban Pulse

🍵 11 min read
🗂 Dev
为 Chrome Web Store 推荐位准备的卡片
为 Chrome Web Store 推荐位准备的卡片

2010 年 3 月初我写了一个以豆瓣广播、电台为主的 Chrome 扩展,抛开国产壳浏览器,目前 Chrome Web Store 有超过三万人安装,最近的周安装量还在小涨,好开心。

豆瓣 API 之后会升级改版,可能不再对外开放。大致了解了下,广播部分的接口应该要完全重写,到时候不知道还有没有精力跟进,不管怎样,先就此做个简单的回顾吧。

简介

Douban Pulse 是一个小巧便捷的豆瓣 Chrome 扩展。使用它,在豆瓣之外的网页,你也可以方便的查看友邻广播、参与「我说」和「推荐」以及打造符合自己口味的豆瓣 FM

下载与安装

Douban Pulse - 豆瓣广播与设置界面
Douban Pulse - 豆瓣广播与设置界面
Douban Pulse - 豆瓣电台(列表模式)
Douban Pulse - 豆瓣电台(列表模式)

回顾

Douban Pulse 的第一个版本只有广播和推荐,5 月起逐步添加了 FM 的相关功能,显示播放列表、支持选择收听可能有悖原产品的意图。整理下开发日志:

2010-04-14 17:46

忙里偷闲更新了扩展:增加「推荐」功能。

将只读列表的入口放入了下拉菜单
将只读列表的入口放入了下拉菜单
推荐栏,输入后会展开标题及评论框
推荐栏,输入后会展开标题及评论框
勾选后自动取当前页的标题和地址
勾选后自动取当前页的标题和地址
表单验证
表单验证

顺便汇报下成绩:Douban Pulse 从发布到现在已经有 35 天了,Chrome 扩展中心的 Users 统计为 744(从每天的增减变化可以推测,还是比较靠谱的实际在用的人数);豆瓣的统计,最近两周每天有超过 300 人在使用,最高 394(04-12)。

2010-05-18 00:33

周末时对原扩展进行了重构,现在清爽多了,增加个电台模块很方便。今天主要完成了 background 和 popup 的通信:前台操作展示不同状态下的界面;后台处理事件、播放歌曲、对播放状态和时间做监控,即时反馈到前台。

mini 状态下的电台
mini 状态下的电台
标记红心
标记红心

界面上目前还差关闭和切换到完整模式(包含已播放的歌单)的按钮,明天做。辛苦 Tifa 为红心按钮点像素。

2010-05-19 02:38

今天做了歌曲列表的存取,用到了 Web SQL Database

Chrome Databases
Chrome Databases

界面上的进展,主要还是围绕列表,用了 CSS3 的选择符以及背景渐变,很方便,整个播放器和列表做下来,只有 icon 用到了图片。

2010-05-20 04:07

今天正式把电台和广播合在了一起,做了包括 tab 切换、状态存储等相关的琐碎的工作。增加了歌曲列表以及电台模式下主导航的显示/隐藏切换键,所以现在共有 3 种展示方式:

  • 主导航 + 播放器
  • 播放器 + 歌曲列表
  • 单独播放器

2010-05-21 05:17

今天做了一些性能优化,与上一版相比,速度有明显提升,不同列表以及电台间的切换不会出现假死的情况。优化点在于,按需异步加载脚本,在切换时适当使用延时,界面优先。

默认开启广播列表,连续点击我说、推荐
默认开启广播列表,连续点击我说、推荐
默认开启电台,点击全部
默认开启电台,点击全部

2010-05-22 04:03

终于把开关加上了,虽然也不是那么顺眼吧。音量正在制作中,包含豆瓣电台功能的版本也将告一段落。剩下的就是多平台以及版本的测试,现在只有广播部分写了单测。与网页版电台相比,电台扩展需要记住和判断的状态比较多,也很琐碎。

播放过的歌曲列表
播放过的歌曲列表
打开与关闭状态
打开与关闭状态

2010-05-23 00:55

最后一个音量功能完成了,接下来三天测试。

音量控制 UI 变化
音量控制 UI 变化

2010-07-26 00:08

这次主要做了速度优化。可以试试「所有广播」下拉菜单中的分类广播,以及我说、推荐,显示速度都有所改善。

优化前开启 popup (v.1.2.2)
优化前开启 popup (v.1.2.2)
优化前开启 popup
优化前开启 popup
优化后开启 popup (v.1.2.3)
优化后开启 popup (v.1.2.3)
优化后开启 popup
优化后开启 popup

关闭 popup 后,可以记住 tab 状态了,算是实现了简单的自定制,你可以只把它当做广播或电台扩展用。顺便加了几个快捷键:

  • Enter 发布评论
  • Ctrl + Enter 发布广播
2010-06-04 扩展用户数
2010-06-04 扩展用户数

2010-08-22 02:37

Douban Pulse 1.2.4 新增偏好设置,此外修复了大量已知 BUG。

这两项设定是之前呼声最高地,优先做了:)
这两项设定是之前呼声最高地,优先做了:)

试用 TinyPixels 点了个电台图标,比缩放的清晰不少,但还是像棋类游戏 - -! 最近时间不多,小版本更新,先这样了:)

2010-09-07 23:45

Douban Pulse 1.3 发布!增加公共电台。

  • 强烈建议先升级你的 Chrome
  • 请老用户务必先注销并卸载之前的版本

注销按钮在扩展的 Options 页:

图标上点右键或在展开的窗口中点击右上角链接进入
图标上点右键或在展开的窗口中点击右上角链接进入

在应用列表中可以找到「卸载」链接:

进入扩展列表的方法:点击小扳手 > Tools > Extensions
进入扩展列表的方法:点击小扳手 > Tools > Extensions

默认状态下点击 tab 中的电台依然是私人电台,如要选择公共电台,需转换为电台模式:

在偏好设置中选择「只使用电台」
在偏好设置中选择「只使用电台」

在电台模式下,新消失提醒是自动关闭的,Douban Pulse 变成了独立的豆瓣电台应用:

切换到电台模式并展开已听歌曲列表
切换到电台模式并展开已听歌曲列表

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 导致的扩展假死
顺便调整了下拉菜单的布局,避免窗口长度不够时的遮挡问题
顺便调整了下拉菜单的布局,避免窗口长度不够时的遮挡问题
错误提示,此时电台无法操作
错误提示,此时电台无法操作

我已经向开发组及 Google 负责浏览器扩展的朋友反馈了 bug,这里要感谢 Eyon 的帮助。接下来就是等待 bug 的修复了。

如果想完整体验新版 Douban Pulse,目前唯一的办法是使用 Chrome 6,考虑到很多同学已经自动升级到新版,这里给出历史版本的下载链接:

2010-10-31 14:26

解决了 PhoneGap App 在真机上运行崩溃的问题。首先要确保设备没有越狱,其次在使用 ChildBrowser Plugin 时不要漏掉资源文件(ChildBrowserViewController.xib 及所需图片)我是在这里找到的答案。

后台运行
后台运行
现在 Douban Pulse 可以在真机上跑了:)
现在 Douban Pulse 可以在真机上跑了:)

2010-12-01 00:44

同期进行的番外篇,拆分出广播功能,用 PhoneGap 做了个独立的 App。因为是基于 WebView,流畅度和原生还是有差距;Titanium 算是避免了这个问题,但需要重新开发,自定制的部分也比较受限,就迁移成本考虑,还是选择了 PhoneGap。

在模拟器上运行
在模拟器上运行
在 iPod 真机上运行
在 iPod 真机上运行

这期间还尝试将 Douban Pulse 移植到 Safari 和 Chrome App,UI 和大部分逻辑可以复用,但坑不少,进展缓慢。

Douban Pulse 1.0 for Safari
Douban Pulse 1.0 for Safari
Chrome Web 扩展快捷入口
Chrome Web 扩展快捷入口
Chrome App 快捷入口
Chrome App 快捷入口

GDD 2011

2011 Google 开发者日技术大会,Douban Pulse 入选了应用开发案例英雄榜。得到认可很开心,算是为我加入豆瓣以来持续最久的 side project 画上了圆满的句号。

26