用 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 调试也不是十分熟悉,所以应该还有很大的提升空间。

源码地址

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

相关推荐
HEX9CF16 分钟前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
凌云行者28 分钟前
使用rust写一个Web服务器——单线程版本
服务器·前端·rust
华农第一蒟蒻1 小时前
Java中JWT(JSON Web Token)的运用
java·前端·spring boot·json·token
积水成江1 小时前
关于Generator,async 和 await的介绍
前端·javascript·vue.js
Z3r4y1 小时前
【Web】portswigger 服务端原型污染 labs 全解
javascript·web安全·nodejs·原型链污染·wp·portswigger
___Dream1 小时前
【黑马软件测试三】web功能测试、抓包
前端·功能测试
金灰1 小时前
CSS3练习--电商web
前端·css·css3
人生の三重奏1 小时前
前端——js补充
开发语言·前端·javascript
Tandy12356_1 小时前
js逆向——webpack实战案例(一)
前端·javascript·安全·webpack
TonyH20021 小时前
webpack 4 的 30 个步骤构建 react 开发环境
前端·css·react.js·webpack·postcss·打包