【油猴脚本】一键搜索 everywhere

俗子没有梦
1,802 阅读4分钟

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情

前言

上篇写了个自动滚动的偷懒脚本，今天将继续偷懒。本篇是写了个划词后弹出多种搜索方式的油猴脚本，这个脚本的开发原由是每次遇到新知识，想在掘金查查有没有更详细或者更深入的文章，都要先打开掘金，然后复制粘贴，再按下enter，最后才是结果，实在是过于麻烦。所以就再写个脚本偷偷懒。

脚本支持的搜索方式包括谷歌、bing、百度等搜索引擎，还有github、npm、stackoverflow以及最重要的掘金。

如果觉得不错，又少了你想要快速搜索的方式，可以下载multiple search后加上，或者fork userscript重新开发。

正文

首先整理一下开发思路：

  1. 监听划词
  2. 获取选中的文本
  3. 弹出搜索方式弹框
  4. 点击跳转搜索或者复制文本
  5. 点击弹框外或者点击键盘隐藏弹框

ok，思路好了，一步一步来

监听划词和获取选中的文本

通过监听mousedown、mouseup来判断鼠标是否划过，然后通过getSelection获取是否有选中的文本。

需要注意的是鼠标的左键、中键、右键都会触发mousedown、mouseup事件，而我们需要监听的是左键，所以要判断event.button === 0。

还有就是getSelection返回的是Selection对象，想要将 selection 转换为字符串，需通过连接一个空字符串（""）或使用 String.toString()方法。

还要去除前后空格，再判断是否存在文本，你想的不是搜索一串空格吧？

弹出搜索方式弹框

还是老规矩，先把html结构，css样式写好，然后绑定点击事件。

multiple search的插入位置跟自动滚动有所不同。自动滚动用的是position: fixed;，而multiple search用的是相对于document.body的position: absolute;，为的是滚动的时候，搜索弹窗可以随着选中文本滚动。所以要通过getBoundingClientRect拿选中文本元素的位置信息。

为了不让搜索弹框太长，部分方式（youtube、bilibili）做成了二级竖弹窗，所以一级还需要加mouseenter、mouseleave事件。

点击跳转搜索或者复制文本

这部分没啥好说的，就是window.open(跳转)+navigator.clipboard.writeText（复制）。

跳转的链接是通过替换搜索链接中的{{%s}}，所以后续需要加搜索方式的话，先进行对应方式的搜索，然后将搜索链接复制出来，去除无关参数，再将搜索词替换为{{%s}}即可。

for example.png

掘金的链接为https://juejin.cn/search?query={{%s}}。

隐藏弹框

逻辑也是很简单，监听keydown和mousedown事件，触发事件后，通过id获取的弹窗元素，将其隐藏就行了。

这里重新学习了一个知识点。因为弹窗还绑定了click事件，这三个鼠标事件触发顺序是mousedown、mouseup、click，再加上冒泡，整个的触发顺序为

document.addEventListener('mousedown', function() {
  console.log('document mousedown');
})
document.addEventListener('mouseup', function() {
  console.log('document mouseup');
})
document.addEventListener('click', function() {
  console.log('document click');
})

const element = document.querySelector('#test');
element.addEventListener('mousedown', function() {
  console.log('element mousedown');
})
element.addEventListener('mouseup', function() {
  console.log('element mouseup');
})
element.addEventListener('click', function() {
  console.log('element click');
})

/**
 * element mousedown 
 * document mousedown 
 * element mouseup 
 * document mouseup 
 * element click 
 * document click 
 */

记录还存在问题

  1. 弹框显示位置不合理 弹框是根据选中文本的元素进行定位的，有可能元素内容很多，而选中文本处在居中位置，会导致弹框与选中文本存在较远距离。

结语

媒体1_Trim.gif

搜索脚本已开发完毕，以及之前开发的b站过滤脚本和自动滚动都上传到github。它们都存在问题，只是在于发现与未发现，我会尽可能完善解决的，也欢迎大家feedback。

关于油猴脚本的开发，也告一段落了，或许以后又想偷懒了，就会继续开发个脚本。

或者在评论区留下你想偷懒的需求，我会尝试帮忙解决。

order.jpg

感谢你的收看，觉得本篇文章和搜索脚本有意思，麻烦动动小手点个赞~

avatar
文章
阅读
粉丝