我的第一个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

相关文章

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》:本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插

maven中的maven-antrun-plugin插件示例详解

《maven中的maven-antrun-plugin插件示例详解》maven-antrun-plugin是Maven生态中一个强大的工具,尤其适合需要复用Ant脚本或实现复杂构建逻辑的场景... 目录1. 核心功能2. 典型使用场景3. 配置示例4. 关键配置项5. 优缺点分析6. 最佳实践7. 常见问题

MyBatis分页插件PageHelper深度解析与实践指南

《MyBatis分页插件PageHelper深度解析与实践指南》在数据库操作中,分页查询是最常见的需求之一,传统的分页方式通常有两种内存分页和SQL分页,MyBatis作为优秀的ORM框架,本身并未提... 目录1. 为什么需要分页插件?2. PageHelper简介3. PageHelper集成与配置3.

Maven 插件配置分层架构深度解析

《Maven插件配置分层架构深度解析》:本文主要介绍Maven插件配置分层架构深度解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Maven 插件配置分层架构深度解析引言:当构建逻辑遇上复杂配置第一章 Maven插件配置的三重境界1.1 插件配置的拓扑

Idea插件MybatisX失效的问题解决

《Idea插件MybatisX失效的问题解决》:本文主要介绍Idea插件MybatisX失效的问题解决,详细的介绍了4种问题的解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、重启idea或者卸载重装MyBATis插件(无需多言)二、检查.XML文件与.Java(该文件后缀Idea可能会隐藏

Python如何使用seleniumwire接管Chrome查看控制台中参数

《Python如何使用seleniumwire接管Chrome查看控制台中参数》文章介绍了如何使用Python的seleniumwire库来接管Chrome浏览器,并通过控制台查看接口参数,本文给大家... 1、cmd打开控制台,启动谷歌并制定端口号,找不到文件的加环境变量chrome.exe --rem

IDEA常用插件之代码扫描SonarLint详解

《IDEA常用插件之代码扫描SonarLint详解》SonarLint是一款用于代码扫描的插件,可以帮助查找隐藏的bug,下载并安装插件后,右键点击项目并选择“Analyze”、“Analyzewit... 目录SonajavascriptrLint 查找隐藏的bug下载安装插件扫描代码查看结果总结Sona

好题——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