做为一个微博控，在逛微博的时候，常会看到各种人荐书，然后会习惯性的复制书名去豆瓣搜索，看书的风格，内容，评分，然后决定是否要加入书单，或者收藏这条微博。

如果遇到符合胃口的书，倒是也还好，但是大部分书其实不是我的菜，所付出的是，

1.打开豆瓣；

2.搜索书，

3.进入该书的详情页。

 

一共是3次页面的打开，略感麻烦。于是想做一个chrome的插件来做这个事情。

插件的交互还算简单，鼠标选中被书名号包裹的文字就会触发逻辑：

1.根据书名上豆瓣搜索，返回匹配的结果；

2..根据返回的结果，取最匹配的书的详情；

3.在页面浮层展示出来。

 

效果图如下：

 

技术也比较简单，没什么难点，无非就是：

1.window.getSelection()  获取选择的文字；

2.记录鼠标位置；

3.使用  获取书籍信息；

4.将返回的信息，生成DOM，插入页面中。

 

其他：

1.浮层样式大幅度参考了有道购物搜索，

2.在产品同事的建议下，新添加一个交互，选中的词语如果没有被书名号包裹，但是按下了ctrl键也会触发搜书的逻辑；

3.扩展的想法，直接在插件上可以收藏书？加入书单？加入想读列表？

4.扩展的想法，按下M键（MOVIE）时候去搜索电影？按下N键时候去搜索音乐？

5.原来发布chrome插件要5刀 - -！。

 

最后：