我的第一个chrome插件--划词搜书(1)

2023-11-26 10:20

本文主要是介绍我的第一个chrome插件--划词搜书(1),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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刀 - -!。

 

最后:

插件地址点这里

 

 

 

 

 

转载于:https://www.cnblogs.com/linchao/archive/2012/12/13/2817107.html

这篇关于我的第一个chrome插件--划词搜书(1)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/425524

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

zeroclipboard 粘贴板的应用示例, 兼容 Chrome、IE等多浏览器

zeroclipboard单个复制按钮和多个复制按钮的实现方法 最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们 zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的

Maven(插件配置和生命周期的绑定)

1.这篇文章很好,介绍的maven插件的。 2.maven的source插件为例,可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example,然后配置到riil-collect.xml中。  <build>   <plugins>    <pl

jenkins 插件执行shell命令时,提示“Command not found”处理方法

首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚

Jenkins 插件 地址证书报错问题解决思路

问题提示摘要: SunCertPathBuilderException: unable to find valid certification path to requested target...... 网上很多的解决方式是更新站点的地址,我这里修改了一个日本的地址(清华镜像也好),其实发现是解决不了上述的报错问题的,其实,最终拉去插件的时候,会提示证书的问题,几经周折找到了其中一遍博文

Spring Roo 实站( 一 )部署安装 第一个示例程序

转自:http://blog.csdn.net/jun55xiu/article/details/9380213 一:安装 注:可以参与官网spring-roo: static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati

eclipse安装subversion(SVN)版本控制插件

陈科肇 查看插件更新站点 网址:http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA 网站截图: 根据自己的eclipse版本,选择需要的更新站点. 使用eclipse集成subservion插件 Help > Install New Software…> 等待下载安装插件…

Weex入门教程之2,Android Studio安装Weex插件

插件位置及描述 https://plugins.jetbrains.com/idea/plugin/8460-weex 貌似对windows还不是很支持,先放着吧。 安装 插件功能 先预览下都有什么功能 安装完成Weex插件后,如果在main toolbar找不到这些功能图标,那么就需要手动添加到main toolbar 添加到main toolbar 红框内就是

使用gradle做第一个java项目

涉及到的任务如下: assemble任务会编译程序中的源代码,并打包生成Jar文件,这个任务不执行单元测试。 Total time: 5.581 secs E:\workspace\Test>gradle assemble :compileJava :processResources UP-TO-DATE :classes :findMainClass :jar :b

mybatis框架基础以及自定义插件开发

文章目录 框架概览框架预览MyBatis框架的核心组件MyBatis框架的工作原理MyBatis框架的配置MyBatis框架的最佳实践 自定义插件开发1. 添加依赖2. 创建插件类3. 配置插件4. 启动类中注册插件5. 测试插件 参考文献 框架概览 MyBatis是一个优秀的持久层框架,它支持自定义SQL、存储过程以及高级映射,为开发者提供了极大的灵活性和便利性。以下是关于M