WebChat基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型

Written by 30115776@qq.com

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦!

🚀 快速阅读

  1. WebChat 是基于 Chrome 扩展开发的 AI 助手,能够基于当前网页内容进行智能问答。
  2. 支持自定义 API 和本地大模型,消息渲染支持 Markdown 格式。
  3. 提供详细的安装和使用指南,确保用户轻松上手。

正文(附运行示例)

WebChat 是什么

WebChat 是一个完全开源的 AI 助手,基于 Chrome 扩展的最佳实践开发。它可以基于当前网页内容进行智能问答,支持自定义 API 和本地大模型。WebChat 的消息渲染支持 Markdown 格式,提供流式输出回答内容,使用户能够更方便地理解和分析当前网页的信息。

WebChat 的主要功能

  • 基于网页内容的智能问答:WebChat 能够根据当前网页的内容回答用户的问题。
  • 流式输出回答内容:答案会逐步显示,提升用户体验。
  • 消息渲染支持 Markdown 格式:支持 Markdown 格式的消息渲染,使回答更加清晰易读。
  • 支持自定义 API 和本地模型:用户可以配置自定义 API 接口或使用本地部署的开源模型。

WebChat 的技术原理

  • Chrome 扩展:WebChat 作为一个 Chrome 扩展,通过注入内容脚本与网页进行交互。
  • 自定义 API:支持 OpenAI 兼容的 API 接口,用户可以配置自定义端点。
  • 本地模型:支持使用本地部署的 Ollama 模型,通过配置环境变量和启动服务,实现与本地模型的交互。

如何安装 WebChat

  1. 下载项目代码:
git clone https://github.com/Airmomo/WebChat.git
  1. 打开 Chrome 扩展管理页面 (chrome://extensions/)
  2. 开启\”开发者模式\”
  3. 点击\”加载已解压的扩展程序\”
  4. 选择项目文件夹

基本使用说明

  • 插件开启后刷新页面会显示一颗悬浮球,点击它打开对话框。
  • 输入问题后点击发送并等待 AI 回答。
  • 右键点击历史消息可复制内容。

支持的 API

自定义 API

  • 支持 OpenAI 兼容的 API 接口:用户可以配置自定义端点。

Ollama 本地部署开源模型

  1. 官网下载安装 Ollama
  2. 设置允许跨域并启动:
  • macOS
launchctl setenv OLLAMA_ORIGINS \"*\"
  • Windows
  1. 打开控制面板-系统属性-环境变量
  2. 在用户环境变量中新建:
  • 变量名:OLLAMA_HOST,变量值:0.0.0.0
  • 变量名:OLLAMA_ORIGINS,变量值:*
  • Linux
OLLAMA_ORIGINS=\"*\" ollama serve
  1. 安装模型:
ollama pull qwen2.5
  1. 启动或重启 Ollama 服务:
ollama serve
  1. 注意事项
  • 可使用自定义 API 接口地址来请求 ollama 服务:http://localhost:11434/v1/chat/completions
  • 如果是在局域网内其他主机运行的 ollama 服务,那么请将localhost替换为你的主机 IP 地址。

注意事项

  1. 使用自定义 API 需要配置 API 密钥。
  2. 使用本地模型需要先安装并启动 ollama,并确保服务在后台运行。
  3. 确保网络连接正常。
  4. 网页内容仅用于当前对话,刷新页面后对话的内容以及历史记录会丢失。

隐私说明

  • 本插件完全开源,不会收集任何个人信息。
  • 配置信息默认保存在本地浏览器中。

资源

  1. 项目官网:https://github.com/Airmomo/WebChat
  2. Ollama 官网:https://ollama.ai

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦!

30115776@qq.com

Pretium lorem primis lectus donec tortor fusce morbi risus curae. Dignissim lacus massa mauris enim mattis magnis senectus montes mollis taciti accumsan semper nullam dapibus netus blandit nibh aliquam metus morbi cras magna vivamus per risus.

目前国内可用Docker镜像源汇总(截至2025年2月)

使用阿里云百炼进行DeepSeek模型调用实战

发表评论