微信助手 Chrome 插件开发手记
13 Jan 2016
现在项目已经开源,大家一起来完善这个项目吧。
https://github.com/liaohuqiu/wechat-helper
项目背景
上个礼拜看到 @0x5e 同学的 wechat-deleted-friends 项目,提出了一种新的检查自己是否被联系人删除的新方式。真是一个伟大的创新。
很多人会群发消息,验证自己是否已经被他人删除了。这种方式是非常不好的方式,对联系人是一种骚扰。而目前这个新的方式,优雅了很多。
原理很简单,利用微信的 Web API 将联系人加入到群组中,如果不是好友关系,无法加入。
不过遗憾的是,但是原项目是一段 Python 代码,使用起来需要计算机功底,我想让普通用户也能享受这样一种便利。
想法
当时有两个想法:
写 Windows 版本,这个用户基数最大,直接 Windows 窗体,安装使用都很方便,.net 系列的技术我也很熟悉。
写 Chrome 插件,在网页版中直接发送请求,还省去了登录验证的麻烦。
由于 .net 开发之前做得很长时间了,并且当时是当作一个商业项目做的,实现目前这个项目完全没有挑战,所以我选择了较为有挑战的 Chrome 插件。
虽然我之前写过一个小插件:List Sorter,不过那个是非常实验性的一个项目,几乎没什么受众。
这次,我想做的是一个可以给大众用的产品。
时间
除去工作之外,现在我手头有好几个事情在同时进行。
时间是从上周三开始,本周一开始内部测试,周三正式对外发布。都是业余时间。
但是我原计划是,周日晚上就发布的,结果项目途中遇到了很多问题,最后是一周时间。
做了些什么
在这段时间内,完成了:
分析了项目的定位和独有优势
- Chrome 插件,图形化界面,易于使用
- 对于大量好友,保存上次状态,下次继续可以跳过
- 可检查黑名单
- 项目开源后可作为 Chrome 开发的一个参考
项目的 UI 方面的设计,包括
导航栏中显示一个按钮
增加网页版微信入口,方便用户使用。
左侧菜单的设计
包括菜单的显示的内容和交互方式,如何尽量不给用户带去骚扰。
以及一个丑陋的图标
所有的交互文案
快速地完成了开发,技术点包括
Webpack 打包方案
Chrome 插件有三个入口,需要高定制化的打包方案。
Iconfont 技术
使用事件,分离出了 UI 和 具体业务逻辑。
全套的打包脚本
日志分级
Chrome 插件下 基于 Webpack 的模板使用
Chrome 插件下的 Google Analytics
Chrome 插件的 i18n 方案
完成了数据统计。
包括所有页面的访问,按钮点击。用户改进产品。
一个完善的产品一定要有数据统计。这为产品的改进,功能的好坏提供直接参考。
测试和发布
经过多轮测试和改进,最终发布到 Chrome 商店。 https://chrome.google.com/webstore/detail/bdfbkchemknlpmmopkncahjdmocnambd/
经完成了开源
遇到的问题
UI 和交互设计,进度慢,反复改进多次。术业有专攻,这部分我确实需要多加锻炼。
白天要工作。到了晚上(东八区)上午,微信的网络延迟非常高,效率很低。
缺少测试账号,接口访问受限之后,只能等着,去做其他事情先了。
操作过于频繁,接口访问受限,现在折衷的办法是记录之前检查过的好友,下次继续的时候跳过。
只要是 Web API 目前都有可能遇到这个问题。暂时还没想到解法。
心得体会
事情虽小,但是标准不会降低。
这次开发时间比较短,但是类似:
Debug / Release 包的区分,日志分级,数据统计,多语言支持等等
一般情况下,只有较大规模的产品才会处理这些事情,作为一个小插件,我把这些全部做了一遍。
项目发布第一天,Google Analytics 显示,有 1000 多的用户。看到同时在线的人数,最高是 80 。
开源
目前,这个项目看起来,还不错。现在将代码开源,希望对大家有所帮助。
https://github.com/liaohuqiu/wechat-helper
Write the code, change the world. Happy coding!
Follow Me on GitHub