乐于分享
好东西不私藏

做了个浏览器侧边栏 AI Agent 助手

做了个浏览器侧边栏 AI Agent 助手

好久不见~

前阵子有小伙伴说 MusicFree 的网站挂了,看了下发现应该是被反诈中心屏蔽了… 不知道为啥屏蔽,也懒得挣扎了

虽然有在评论区答应过各位会更新,但感觉更新频率降低是必然的趋势,不好说 MusicFree 系列还会更新多久,过一天算一天吧~


回到正文,前阵子突发奇想做了个浏览器侧边栏 AI 助手,自己用了一段时间感觉还蛮好用,开源出来给有需要的小伙伴试试~

👀为啥想起来做这个

大概从去年开始,日常的工作就离不开 AI 了。无论是写代码,还是回复英文邮件,或者是阅读一些文档,第一反应都是直接用 AI。

个人习惯是直接在 VSCode 里问 Copilot,或者直接打开 ChatGPT 问。但时间长了总感觉有那么点麻烦 ——

就比如我在 review 一个英文 PR,想留个评论,大概流程会是先新开一个 tab 打开 ChatGPT,然后让 ChatGPT 帮我把我想说的话翻译成英文,然后我再手动贴回去。

又或者,我在打开浏览器阅读一篇英文文章,然后想理解里面的某部分内容,我也会新开一个 tab 打开 ChatGPT,然后粘贴 -> 问 AI -> 切回原来的文章 tab

所以,我想做一个在浏览器侧边栏的 AI 助手,可以和浏览器进行交互,无论是阅读网页、处理网页还是直接对网页做一些操作。

🐱做了个啥东西

如下图,它是在浏览器侧边栏的 AI 助手,所以我直接给它起名叫 Cebian (就是拼音……

交互我感觉和 Github Copilot 有点类似,在配置好 AI Provider 之后就可以用了。(需要注意:这里需要使用大模型提供商的一些服务,用coding plan什么的比较划算点,也支持 github copilot)

除了常规的聊天外,它主要的能力有这些:

  • 网页感知:可以读取网页中的内容,选中的文本,你也可以直接选中网页上的某些元素,或者录制一段操作,直接作为上下文问 AI。不需要再复制粘贴。
  • 斜杠指令:可以自己配一套常用 prompt 模板,比如「翻译选中内容」「总结这个页面」「帮我写回复」,一个 / 就能调出来,非常丝滑。
  • 支持 Skills:可以把一些多步骤的工作流打包成"技能",让 AI 按需调用,比如特定网站的自动化操作、领域知识包等。
  • MCP 工具:内置了 MCP(Model Context Protocol)客户端,可以接入外部工具,扩展性拉满。

最重要的是,所有的对话,提示词,附件等信息都存储在浏览器本地,直接和大模型 API 交互,没有多余的乱七八糟的请求。

以上这些都是这个 AI 插件写的:

✨怎么安装

代码开源在了:https://github.com/maotoumao/Cebian

安装指南参考:https://cebian.catcat.work/zh/install-guide/

没啥特别的步骤,就在 github release 下载,然后直接按照常规的安装浏览器插件的步骤安装就好了。

☕️来几个例子

这段时间用下来感觉还是挺有用的,简单录了几个场景:

● 需求调研

调研一下 GPT 的价格:

已关注
关注
重播 分享 赞

● 标签页管理

有时一不小心就开了一大堆标签页,可以直接让它关闭标签或者找到需要的标签页

已关注
关注
重播 分享 赞

● 解释和翻译

翻译、解释、总结,感觉是常规功能了

已关注
关注
重播 分享 赞

● 页面交互

在刷题的时候,可以直接选中区域让 AI 分析代码哪里有问题 (甚至可以直接让 AI 把正确答案填上去...)

已关注
关注
重播 分享 赞

大概就是这样子,有需要的小伙伴可以试试~ 注意 token 消耗,虽然应该不会比 OpenClaw 消耗的更多😂

再贴下代码地址:https://github.com/maotoumao/Cebian

有问题欢迎提 issue~ 大家晚安~


对了,给大家看看阳台上不知道什么时候搬来的小鸟,怪可爱的

相关学习资料