[帮人推广] chrome 原生的查找功能不好用,于是我自己写了个...

51 天前
 TomVista

日常使用浏览器的时候,经常会用到查找功能,但是浏览器的查找工具实在太简陋了,只有一个简单的大小写不敏感的查找,不支持匹配单词和正则,而且在切换 tabs 、翻页的时候也不能及时更新,很不好用,于是就自己写了个。

插件已上线,传送门:https://chromewebstore.google.com/detail/find-whatever/pdpkckoiaiinjlhddhcoknjhdncepnbo?authuser=0&hl=zh-CN

github: https://github.com/ImSwordTooth/findwhatever

功能概览

使用快捷键或者点按工具栏的图标后,即可唤出查找面板。
键入文字后即可自动查找。

大小写敏感

点击文本框右侧的Cc来开启或关闭这个功能。关闭后,匹配结果将忽略单词的大小写。

原始文本 查找词 开启 Cc 的结果 关闭Cc 的结果
I find the Finder. find 只有 find findFind

这个功能本质上是正则表达式的 g 标志。

匹配单词

点击文本框右侧的W来开启或关闭这个功能。开启后,查找结果将只匹配完整的单词。

原始文本 查找词 开启 W 的结果 关闭W 的结果
I find the Finder. find 只有 find,因为这是个完整的单词 findFind

这个功能本质上是正则表达式的 \b 。

使用正则表达式

这才是查找文本的完整形态!
点击文本框右侧的.*来开启或关闭这个功能。开启后,输入的任何字符都会被当做正则表达式的一部分。

原始文本 查找词 开启 .* 的结果 关闭.* 的结果
I find the Finder. find\w+ 只有 Finder,因为 find 后面需要有字母 搜不到,因为没有\w+这三个字符

实时 DOM 监测

本插件最大的亮点。
使用原生的查找工具时,如果要查找的内容分布在不同的 tabs (比如每个学期的数学得分)时,每次切换 tabs ,都需要手动重新搜索,浏览体验大打折扣。
本插件可以解决这个问题!点击文本框右侧的图标来开启或关闭这个功能,开启后,监测到 DOM 变化时,将自动重新查找。
我们来看几个例子:

我把这个功能做成了一个开关,而不是一个常驻的功能,是因为考虑到这几点:

  1. 目前并没有做增量的 DOM 变化监测,每次变化后都会重新循环所有 DOM 节点,这会可能会引起一些性能问题;
  2. 考虑这个场景:有个页面往下滚动的时候会自动隐藏 header 部分,同时下面会出来一些新的内容。查找完毕后如果点击“下一个”按钮,滚动条会自动定位到第 2 条结果,而这会引起 DOM 变化,于是又重新搜索了一次,而这又导致了搜索结果和当前下标重置了,因此又回到了初始状态。
    这种情况不适合实时监听,可以临时关闭,等 header 已经是隐藏状态了再打开。

    这个问题已经解决了,但是可能还会有其他负责、未测到的情况,所以保留了开关。

多 iframe 查找

插件基于 JavaScript ,并没有“获取当前屏幕所有文本”这种功能,尤其是在有 iframe 的情况下,如果不是同一个源,获取其 DOM 都是做不到的事。
本插件的方法是,给每个 frame 注入一段脚本,当主页面查找时,他们跟着一并查找,并将结果记录在各自的 window 里。监测到下标定位到自己的范围内,就开始高亮对应的节点。

356 次点击
所在节点    推广
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1060963

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX