做为一个微博控,在逛微博的时候,常会看到各种人荐书,然后会习惯性的复制书名去豆瓣搜索,看书的风格,内容,评分,然后决定是否要加入书单,或者收藏这条微博。
如果遇到符合胃口的书,倒是也还好,但是大部分书其实不是我的菜,所付出的是,
1.打开豆瓣;
2.搜索书,
3.进入该书的详情页。
一共是3次页面的打开,略感麻烦。于是想做一个chrome的插件来做这个事情。
插件的交互还算简单,鼠标选中被书名号包裹的文字就会触发逻辑:
1.根据书名上豆瓣搜索,返回匹配的结果;
2..根据返回的结果,取最匹配的书的详情;
3.在页面浮层展示出来。
效果图如下:
技术也比较简单,没什么难点,无非就是:
1.window.getSelection() 获取选择的文字;
2.记录鼠标位置;
3.使用 豆瓣读书API 获取书籍信息;
4.将返回的信息,生成DOM,插入页面中。
其他:
1.浮层样式大幅度参考了有道购物搜索,
2.在产品同事的建议下,新添加一个交互,选中的词语如果没有被书名号包裹,但是按下了ctrl键也会触发搜书的逻辑;
3.扩展的想法,直接在插件上可以收藏书?加入书单?加入想读列表?
4.扩展的想法,按下M键(MOVIE)时候去搜索电影?按下N键时候去搜索音乐?
5.原来发布chrome插件要5刀 - -!。
最后:
插件地址点这里