微信助手 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!
comments powered by Disqus
