标签页、书签太多找不到?AI 分组 + 拼音模糊搜索,开源插件秒解切换难题!

🤔 日常痛点

你是否也有这样的经历:

  • 打开了 20+ 个标签页,想切到某个标签页却只能凭感觉一个一个查看?
  • 书签收藏了上千个包含各种分类,但需要时总是大海捞针?
  • 浏览器历史记录里躺着几万条数据,搜索起来比登天还难?
  • 偶尔失手关闭的一些原本想保留的页面,想快速恢复?

如果有,该插件或许能为你解忧!

💻 快速安装

  1. 进入 chrome 插件商店,点击添加到浏览器按钮即可,安装后默认会请求读取标签、书签和历史记录权限,允许后默认会弹窗一个窗口
  1. 快速了解搜索面板

🎉 主要功能

模糊拼音搜索

支持中英文混合模糊搜索,对国人超级 Nice (依赖于文本搜索算法),最终搜索的结果按照返回的权重值(命中连续字符越多,权重越高)和最近使用的时间降序输出,更快定位目标,搜索能力:

  • 首字母拼音搜索
  • 域名搜索 & 空格分词搜索(分词后无需按顺序匹配)

AI 分组

对上次聚焦窗口中的所有标签页进行 AI 分组,根据域名、标题和现有分组情况增量分组,大大节省手动创建和更新标签分组的时间。当然,如果你不满意本次 AI 分组,也能在分组的 16 秒内返回到最初的快照状态

全局秒级搜索

搜索数据源包含:

  • 所有已打开的标签页
  • 所有书签记录
  • 默认检索近 14 天内前 1000 条历史记录,可输入 /s search 进行配置修改

也支持定向搜索,如输入 /t 可单独搜索已打开的标签页,同理输入 /b/h 可定向搜索书签和历史记录

全键盘操作

  • 默认通过 Command+Shift+K(Window 系统Ctrl+Shift+K) 唤醒插件,可输入 /s keyboard 进行自定义
  • 通过上下键(↑↓)或 Tab 键选择标签内容,按下 Enter 键来切换或打开你想要的标签
  • 通过 / 下的命令直接触发操作,比如输入 /ai 后 enter 就会触发 AI 标签分组
  • 通过快捷键来 pin、unpin、打开历史记录、打开当前书签位置等等
  • 输入 /s 进入设置页面,可自定义唤醒各个功能的快捷键

🔍 文本模糊搜索

文本搜索算法:Demo 地址可视化动态规划算法地址Github 地址

为了让搜索更丝滑(为了吃醋),抽象了一个文本搜索算法(包了饺子),最实现的效果类似如下图所示,线上 demo 例子戳我

核心实现原理

其核心是在遍历的过程中计算并保留前面的权重值,思路即是大家所熟知的动态规划,首先在汉字转拼音的过程中保存了下标的映射关系,其次新建多个二维数组,先从前往后遍历并存储各个下标对应的得分和路径,最终以贪心策略从后向前遍历结果值,取出即能命中所有输入字符和得分最高的下标。

关键 DP 二维数组变量:

  • dpTable:[匹配字符数(包括中文), 匹配字母数(包括拼音、英文和标点字符), 边界开始, 边界结束]
  • dpScores:[得分],每个下标的得分,每一轮都会更新

通过 dpTable 和 dpScores 保证每步都是最优选择

  • dpMatchPath:[匹配开始的原文字符下标, 匹配结束的原文字符下标, 匹配的字母个数]

通过 dpMatchPath 能够完整重建匹配路径

以下是可视化动态规划的录屏(线上体验地址):

NPM 使用

因为已经抽成了一个 NPM 包,使用起来也超级简单,感兴趣的同学去 github 瞅瞅。

React 组件:codesandbox demo

👴🏻 结尾

插件已上架谷歌商店也已开源,没有存储任何数据不用担心个人数据泄漏,纯净无广:谷歌商店地址点我,开源 github 仓库地址点我,且文本搜索算法的 NPM 包也已开源,线上 Demo 体验点我

如果觉得不错,可以 star 一下或在谷歌商店评分下 😘,感兴趣的同学可参与 Pull Request 或在 Issue 中提建议。

相关推荐
LBuffer19 小时前
破解入门学习笔记题二十五
服务器·前端·microsoft
爱编程的鱼19 小时前
想学编程作为今后的工作技能,学哪种语言适用性更强?
开发语言·算法·c#·bug
kuxku19 小时前
使用 SSE 与 Streamdown 实现 Markdown 流式渲染
前端·javascript·node.js
Sherry00719 小时前
【译】🔥如何居中一个 Div?看这篇就够了
前端·css·面试
前端小咸鱼一条19 小时前
18. React的受控和非受控组件
前端·react.js·前端框架
yq146828609019 小时前
C (统计二进制中“1“的个数)
c语言·开发语言·算法
一枚前端小能手19 小时前
🛠️ Service Worker API深度解析 - 生命周期、缓存与离线实战
前端·javascript
被AI抢饭碗的人19 小时前
算法题(254):灾后重建
算法·leetcode·职场和发展
马卫斌 前端工程师19 小时前
vue3 实现echarts 3D 地图
前端·javascript·echarts
深度学习机器19 小时前
RAG的另一种思路,基于文档树结构的推理型检索
人工智能·算法·架构