用 ChatGPT 解决你收藏网页时的选择困难症

前言

不知道大家有没有过这种经历,有时候想收藏网站时总会纠结于要放在哪个文件夹,如果你的文件夹细分的很细的话可能没有这种问题,但是找起来又会比较费时间,所以我就在想,有没有那种通过识别网页内容帮我们自动归类的插件呢,一找还真有一些,不过大部分功能都太全了,而我只想实现一个小需求,所以干脆就自己动手实现一个!

最后实现的效果:

可以看到,一键自动将 vue 官网收藏到了 前端 / JS 框架 / 官网 的目录下,还是挺准确的。

实现思路

  1. 获取书签栏数据

    这个通过插件的 api chrome.bookmarks.getTree 可以轻松获取

  2. 监听页面收藏事件

    这个我们通过在右键菜单注册一个收藏按钮实现,也可以注册快捷键实现

  3. 通过 chatgpt 获取最佳的文件夹路径

    这是比较关键的一点,后面会单独讲

  4. 收藏网站

    已经有网站信息和文件夹路径了,那么只需要调用 chrome.bookmarks.create api 就可以实现收藏功能

大致思路就是这样,插件开发的细节和 api 不必多说,chrome 官网已经很详细,接下来讲讲怎么通过 ChatGPT 获取最佳的收藏文件夹路径。

通过 ChatGPT 获取最佳路径

先明确一下我们的需求,我们需要让 ChatGPT 通过分析我们提供的网页信息,然后从已有的文件夹目录树中选出一个最佳的文件夹路径,帮助我们实现自动收藏。这里有两个问题,一个是需要调试 ChatGPT 的 Prompt,另一个是我们需要限定明确的答案范围。

Function calling 限定回答范围

我们知道 ChatGPT 的回答是不可控的,你没有办法准确的预测它会回答什么,但是通过 Function calling 我们可以变相限制他的范围。

关于 Function calling 我简单的描述一下,就是预先定义好一些函数的描述信息,然后 ChatGPT 会根据用户的问题去判断需不需要调用这些函数,如果需要调用某个函数还会根据该函数的参数定义去生成符合定义的入参,等得到函数的返回值了会基于这个返回值去回答用户的问题。

这里我们就可以通过函数入参的定义去限制 ChatGPT 的回答范围,我们可以将目录树平铺成一个路径枚举,然后定义一个函数强制让 ChatGPT 去调用,并从这个路径枚举中选出一个合适的参数作为函数入参,这样我们就等于间接让 ChatGPT 帮我们挑选出了最佳路径。

调试 Prompt

ChatGPT Prompt 的调试是一门艺术,不同的 Prompt 对结果的影响十分巨大。这里我们拿到的网页信息其实很全,可以通过访问 url 地址去获取源代码,然后再继续提取各种信息。目前我仅提取了网页的标题作为供 ChatGPT 分析的信息,对于标题信息明确的网页来说足够用了,如果想提高准确率,还可以添加更多的网页信息供 ChatGPT 分析。

其他的 Prompt 可以去源码仓库查看,由于我对 Prompt 调试也不是十分熟悉,所以应该还有很大的提升空间。

源码地址

由于只是一个自用小功能,所以并没有发布到插件市场,使用方式请参考源码仓库

相关推荐
涵信2 分钟前
第九节 高频代码题-实现Sleep函数(异步控制)
前端·javascript·typescript
Kusunoki_D17 分钟前
Python 实现 Web 静态服务器(HTTP 协议)
服务器·前端·python
爱学习的茄子27 分钟前
【前端实战】三分钟掌握原生JS电影搜索应用,从此告别框架依赖
前端·javascript·深度学习
林太白28 分钟前
Next.js超简洁完整篇
前端·后端·react.js
前端付豪29 分钟前
汇丰登录风控体系拆解:一次 FaceID 被模拟攻击的调查纪实
前端·后端·架构
天生我材必有用_吴用36 分钟前
Three.js开发必备:模型对象和材质详解
前端
万变不离其宗_836 分钟前
echarts使用笔记
前端·笔记·echarts
时光足迹40 分钟前
电子书阅读器之章节拆分
前端·javascript·react.js
无名之逆40 分钟前
大三自学笔记:探索Hyperlane框架的心路历程
java·开发语言·前端·spring boot·后端·rust·编程
WILLF42 分钟前
【JavaScript】原型与原型链
javascript