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

相关文章

WordPress网创自动采集并发布插件

网创教程:WordPress插件网创自动采集并发布 阅读更新:随机添加文章的阅读数量,购买数量,喜欢数量。 使用插件注意事项 如果遇到404错误,请先检查并调整网站的伪静态设置,这是最常见的问题。需要定制化服务,请随时联系我。 本次更新内容 我们进行了多项更新和优化,主要包括: 界面设置:用户现在可以更便捷地设置文章分类和发布金额。代码优化:改进了采集和发布代码,提高了插件的稳定

剑指offer(C++)--两个链表的第一个公共结点

题目 输入两个链表,找出它们的第一个公共结点。 解法一 两个链表一定有交点的话,方法是指向短链表指针先走完,然后指向长链表,指向长链表指针后走完,指向短链表。所以,第二次走过,一定会在交点相遇。 class Solution {public:ListNode* FindFirstCommonNode( ListNode *pHead1, ListNode *pHead2) {ListN

剑指offer(C++)--第一个只出现一次的字符

题目 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). class Solution {public:int FirstNotRepeatingChar(string str) {map<char, int> mp;for(int i = 0; i < str.size(); ++i)m

vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定义代码 6.element常用标签6.1.下拉列表

导航条下 ScrollView 第一个View去掉向下偏移的64px

self.automaticallyAdjustsScrollViewInsets=NO;      self.scrollView.contentInset=UIEdgeInsetsMake(-64, 0, 0, 0); self.automaticallyAdjustsScrollViewInsets=NO; 相同的意思。

ROS2从入门到精通4-4:局部控制插件开发案例(以PID算法为例)

目录 0 专栏介绍1 控制插件编写模板1.1 构造控制插件类1.2 注册并导出插件1.3 编译与使用插件 2 基于PID的路径跟踪原理3 控制插件开发案例(PID算法)常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习,掌握ROS2底层基本分布式原理,并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。 🚀详情:《ROS2从入门到精通》 1 控制插

uniapp 使用uview 插件

看创建项目版本vue2 、 vue3 Button 按钮 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 1.  npm install uview-ui@2.0.36 2. // main.js,注意要在use方法之后执行import uView from 'uview-ui'Vue.use(uView)// 如此

MyBatis系列之分页插件及问题

概述 无论是C端产品页面,还是后台系统页面,不可能一次性将全部数据加载出来。后台系统一般都是PC端登录,用Table组件(如Ant Design Table)渲染展示数据,可点击列表的下一页(或指定某一页)查看数据。C端产品如App,在下滑时可查看更多数据,看起来像是一次性加载数据,实际上也是分批请求后台系统获取数据。而这,就是分页功能。 如果没有使用Hibernate或MyBatis这样的O

第一个PSpice程序

环境cadence 16.6 PSpice A/D PSpice程序开发已经逐渐淡出我们的视线,可是却不能忽视其对电子设计开发的重大作用,在学习的过程中偶然看到PSpice应用,却全部是图形输入,而怀着想知道为什么的好奇心,找遍图书馆唯一一本的PSpice程序设计与仿真的书(虽然也有英文的,但是好几本书,等需要时再看了)终于还是被我找到,经过不断的努力,加上偶然的原因终于成功运行了。 步骤:

google-自我插件

1. Bitwarden 密码管理器 2. React Developer Tools 3. Vue.js devtools 4. YouTube™ 双字幕 5. 沉浸式翻译 - 网页翻译插件 6. FeHelper(前端助手) 7. IDM Integration Module 8. Redux DevTools - Next 9. 待续…