【开源】还在来回切网页问大模型？我写了个不到 1MB 的插件，把顶尖 AI 全塞进了侧边栏！

overwatch
0 阅读4分钟

大家好！今天想和大家分享一个我最近开源的 Chrome 扩展——EasyChat。

作为一个重度依赖 AI 的开发人员，我经常会遇到一个痛点：有时候碰上棘手的问题，得同时问 ChatGPT、Gemini 甚至 DeepSeek，想对比一下谁给的答案更靠谱。结果就是在这几个网页之间来回切换，有时候历史对话还不好找，体验极其割裂。而且对于 API 调用来说，额度也是个头疼的问题。

为了解决这个痛点，我搓了一个小巧但强大的 Chrome 侧边栏插件，大小不到 1MB！

GitHub 开源地址：github.com/starwingChe… （欢迎体验并点个 Star 支持一下 ✨）

🚀 核心卖点：这是个啥？

EasyChat 是一个可以让你在 Chrome 侧边栏与多个顶级 AI 模型并行聊天、对比回答的扩展！

1. 🤖 网页端白嫖 + API 并存，无“免费次数”套路

穷鬼福音！在这个插件中，ChatGPT、Gemini、Perplexity、Copilot 都是模拟 Web 请求调用模型的！也就是说，只要你在网页端处于登录状态，插件就能直接复用你的会话发消息，完全不消耗 API 额度，用量全在你自己账号上！ 同时我也支持了 DeepSeek 和 Qwen 等模型的标准 API Key 配置，如果你想用 API，也能随心所欲。

2. ⚡ 多模型真·并发回答，对比快人一步

输入一次问题，广播给当前激活的多个大模型。插件支持多种拖拽布局（1 / 2栏垂直 / 2栏水平 / 3栏 / 4栏）。你可以左边放 ChatGPT，右边放 Gemini，下面再垫一个 DeepSeek。谁胡说八道一目了然！

3. ⌨️ 纯粹的交互体验

  • 快捷键呼出：Alt+J 直接呼出或收起侧边栏，不用找图标点点点；
  • 历史快照：对话可以保存为历史快照（只读），方便你随时回溯之前的对比过程；
  • 轻量极速：安装包不到 1MB，除了极速的响应，没有任何花里胡哨的冗余功能。

demo演示

demo.gif

并行聊天

snapshot-4.png

历史会话

snapshot-3.png

支持 API key 配置

snapshot-2.png

🛠️ 技术栈

既然发在掘金，还是得和大伙聊聊技术实现。首先，这个项目 100% 由 AI 代理开发，我只做了架构设计和 API 逆向分析，相关文档在.rule文件夹下。如果你对 AI coding 和最新前端栈感兴趣，这个仓库是一个非常好的参考案例。

  • 主要技术栈：React 19 + Tailwind CSS v4 + Vite。样式用了最清爽的 SCSS，没有引入一堆重型 UI 库，基础交互靠 @radix-ui 的 Headless 组件兜底，主打一个轻灵。
  • 架构设计：采用经典的领域驱动思维，严格区分层级。
    • Adapter 模式抽离 AI：所有机器人（不管是 Web 爬虫流还是 API 流）必须通过 BaseBotAdapter 抽象暴露统一能力。UI 绝对不碰具体的网络栈。
    • 优雅的多实例编排：为了实现并行发送消息和局部重试（每个Bot最多重试3次），状态编排统一收拢在 features/session 下。哪怕有一个 Bot 断网报错了，绝不会阻塞另外几个 Bot 生成回复。
    • Chrome Storage 与 React Context 结合：状态直接和 Chrome 本地存储打通进行 hydrate，无缝保存你上次调好的布局和模型搭配。
  • 安全的 Web 模拟：涉及到 Copilot 等复杂鉴权的，用到了 Chrome Extension 的 declarativeNetRequest 动态改写 WebSockets 请求头。

🎬 怎么安装使用？

（Chrome 商店目前还在审核中，性急的同学可以直接采用以下方式）

方式一：Release 下载（最快）

去我的仓库 Release 页面，下载最新版本的 dist.zip并解压。然后打开你的浏览器 chrome://extensions/ 页面，开启开发者模式，点击“加载已解压的扩展程序”，把刚才的文件夹选进去就搞定了！

方式二：Clone 自己跑

git clone https://github.com/starwingChen/easyChat
cd easyChat
npm install
npm run build

然后同样将 dist 文件夹加载到浏览器里即可。

如果你觉得这个小工具对你有帮助，或者代码实现对你有启发，球球各位老哥去 Github 点个 Star 吧~ 另外也非常欢迎大家提 PR 给 EasyChat 接入更多的模型，或者提供你觉得好用的交互点子！

GitHub 传送门：easyChat

avatar
文章
阅读
粉丝