# AI Chat Assistant

> An AI-powered chat assis# AI Chat Browser Extension ## 产品用途 这是一个AI驱动的网页助手扩展，为用户提供即时的智能对话服务。用户可以在任何网页上通过右侧边栏与AI助手进行对话，获取信息解答和帮助。扩展程序专注于提供流畅的AI对话体验，支持Markdown格式和代码高亮显示，让用户可以随时获得AI的智能协助。

Canonical page: [https://chrome-stats.com/d/ai-chat-assistant](https://chrome-stats.com/d/ai-chat-assistant)

## Overview

- **ID:** `ai-chat-assistant`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** songyi
- **Category:** language-support
- **Daily users:** 6
- **Weekly downloads:** 2
- **Rating:** 3.67 / 5 (3 ratings)
- **Version:** 1.5
- **Last updated:** 2024-12-04
- **First published:** 2024-12-01
- **Size:** 92 KB
- **Data as of:** 2026-09-10
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/ai-chat-assistant/)

## Description

## 产品用途
这是一个AI驱动的网页助手扩展，为用户提供即时的智能对话服务。用户可以在任何网页上通过右侧边栏与AI助手进行对话，获取信息解答和帮助。扩展程序专注于提供流畅的AI对话体验，支持Markdown格式和代码高亮显示，让用户可以随时获得AI的智能协助。

一个强大的Chrome浏览器扩展，支持智能文档对话。可以自动读取当前页面内容，让你直接与文档进行对话，获取相关信息和解答。

## 功能特点

- 智能文档对话 - 自动提取当前页面内容，实现与文档的智能交互
- 上下文理解 - AI助手能理解页面内容，提供准确的回答
- 快速访问 - 点击浏览器工具栏图标即可打开聊天界面
- 实时对话 - 支持流式响应，实现即时对话体验
- 美观界面 - 现代化的聊天界面设计，支持拖拽调整大小
- 灵活配置 - 可自定义API设置，支持多种AI服务提供商
- 安全可靠 - 本地存储API密钥，确保安全性
- Markdown支持 - 完整支持Markdown格式和代码高亮显示

## 功能列表和状态

### 已实现功能 
1. **基础界面**
   - 可调整大小的右侧面板 (300px-800px)
   - 可拖动的左边框
   - 深色文字显示 (#000000)
   - AI和用户头像显示（/）
   - 响应式设计

2. **聊天功能**
   - Markdown 渲染支持
   - 代码语法高亮
   - 消息流式响应
   - 中文界面支持

3. **设置功能**
   - API设置面板
   - 设置的本地存储
   - API密钥管理

4. **技术特性**
   - ES模块动态导入
   - 样式隔离（codeium-前缀）
   - 错误处理和日志
   - 库文件动态加载

### 待实现功能 
1. **增强功能**
   - 对话历史记录
   - 更多AI模型集成
   - 文档内容智能提取
   - 键盘快捷键
   - 主题切换
   - 消息引用和编辑

2. **性能优化**
   - 流式响应性能优化
   - 内存使用优化
   - 加载速度优化

3. **用户体验**
   - 更多自定义选项
   - 多语言支持
   - 导出对话功能

## 安装说明

1. 下载或克隆本仓库到本地
2. 打开Chrome浏览器，进入扩展管理页面 (`chrome://extensions/`)
3. 开启右上角的"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择本项目的文件夹

## 使用方法

1. 打开任意网页，点击浏览器工具栏中的扩展图标
2. 扩展会自动读取当前页面的内容
3. 在聊天界面中输入你的问题，例如：
   - "总结一下这篇文章的主要内容"
   - "这个页面讲了什么？"
   - "帮我解释一下第三段的内容"
4. AI助手会基于页面内容，为你提供相关的回答
5. 可以通过拖拽左侧边框来调整聊天窗口的宽度

## 界面特性

- 可调整大小 - 拖拽左侧边框可以调整聊天窗口宽度（300px-800px）
- 实时响应 - 支持流式输出，打字机效果
- 代码高亮 - 自动识别和高亮显示代码块
- Markdown渲染 - 支持完整的Markdown语法
- 响应式设计 - 自适应不同屏幕尺寸

## 权限说明

### scripting
用于在网页中注入和执行必要的JavaScript代码，实现AI聊天界面的动态创建和交互功能：
- 动态创建和管理聊天界面元素
- 处理用户输入和AI响应
- 实现Markdown渲染和代码高亮显示

### 主机权限 (<all_urls>)
需要在任何网页上提供服务：
- 随时访问AI聊天助手
- 获取当前页面的上下文信息
- 在任何网页中使用AI辅助功能
注：我们严格限制了数据访问范围，只读取用户主动选择分享的内容。

### activeTab
用于实现与当前活动标签页的安全交互：
- 仅在用户主动使用扩展时访问当前页面
- 获取必要的页面信息用于AI上下文理解
- 确保扩展只在用户需要时才能访问页面内容

### storage
用于安全存储用户的设置和偏好：
- 保存API配置信息（如API地址）
- 存储用户界面偏好设置
- 缓存聊天记录（计划功能）
这些数据存储在用户的浏览器本地，不会上传到云端，确保用户数据的隐私和安全。

## 文件结构

### 项目结构
```
├── manifest.json      # 扩展配置文件
├── background.js      # 后台服务
├── content.js         # 主要交互逻辑和样式
└── lib/              # 外部库
    ├── marked.esm.js  # Markdown解析（ES模块版本）
    ├── highlight.min.js
    └── github.min.css
```

## 技术特性

- 使用Chrome Extension Manifest V3
- ES模块动态导入支持
- 智能文档内容提取和处理
- 支持EventStream流式响应
- 使用Chrome Storage API存储设置
- 现代化的Flex布局UI设计
- 长连接消息通信机制
- 完整的Markdown和代码高亮支持

## 注意事项

1. 确保API密钥的安全性，不要分享给他人
2. 如果遇到跨域问题，请检查API服务器是否支持CORS
3. 某些网页可能会限制内容提取
4. 建议使用支持流式响应的API服务

## 最新更新

- 添加窗口大小调整功能
- 改进Markdown渲染和代码高亮
- 支持中文界面
- 优化响应式布局
- 改进流式响应的显示效果
- 使用ES模块加载外部库

## 开发计划

- [ ] 添加对话历史记录功能
- [ ] 支持更多AI模型和服务商
- [ ] 优化文档内容提取算法
- [ ] 添加文档摘要功能
- [ ] 添加快捷键支持
- [ ] 支持主题切换
- [ ] 添加消息引用和编辑功能

## 贡献指南

欢迎提交Issue和Pull Request来改进这个项目。在提交代码前，请确保：

1. 代码符合项目的编码规范
2. 添加必要的注释和文档
3. 测试过代码的功能

## 许可证

MIT License

## 数据流和逻辑架构

### 1. 组件交互流程

```
[用户界面]
    ↓ 点击扩展图标
[background.js] → [content.js] 
    ↓ 注入UI和脚本
[聊天界面] ← [content.js]
    ↓ 用户输入
[content.js] → [background.js]
    ↓ API请求
[AI服务器] ← → [background.js]
    ↓ 流式响应
[background.js] → [content.js]
    ↓ 渲染响应
[聊天界面]
```

### 2. 详细数据流

#### 初始化流程
1. 用户安装扩展
   - `background.js` 监听 `onInstalled` 事件
   - 初始化默认API设置到 `chrome.storage.sync`

2. 扩展图标点击
   - `background.js` 监听 `action.onClicked` 事件
   - 向当前标签页发送 `toggleChat` 消息

3. UI初始化
   - `content.js` 接收 `toggleChat` 消息
   - 检查并创建聊天界面
   - 加载必要的库（marked.js, highlight.js）
   - 初始化事件监听器

#### 消息处理流程
1. 用户发送消息
   ```javascript
   用户输入 → content.js
   ↓
   提取页面内容
   ↓
   构建消息历史
   ↓
   创建长连接（chrome.runtime.connect）
   ↓
   发送到background.js
   ```

2. API请求处理
   ```javascript
   background.js接收消息
   ↓
   验证API设置
   ↓
   发送fetch请求（流式）
   ↓
   处理响应流
   ↓
   逐块发送到content.js
   ```

3. 响应渲染
   ```javascript
   content.js接收响应块
   ↓
   累积响应内容
   ↓
   解析Markdown
   ↓
   应用语法高亮
   ↓
   更新UI
   ```

### 3. 关键数据结构

#### API设置
```javascript
{
    baseUrl: string,    // API基础URL
    apiKey: string,     // API密钥
    modelName: string   // 模型名称
}
```

#### 消息格式
```javascript
{
    role: "system" | "user" | "assistant",
    content: string
}
```

#### 流式响应格式
```javascript
{
    type: "stream" | "done" | "error",
    content?: string,
    error?: string
}
```

### 4. 错误处理机制

1. API错误
   - 网络请求失败
   - API密钥无效
   - 响应格式错误

2. UI错误
   - Markdown解析失败
   - 代码高亮失败
   - DOM操作异常

3. 通信错误
   - 端口断开
   - 消息发送失败
   - 响应超时

### 5. 安全考虑

1. API密钥保护
   - 存储在chrome.storage中
   - 仅在background.js中使用
   - 日志中隐藏敏感信息

2. 内容安全
   - CSP配置
   - XSS防护
   - 安全的DOM操作

## 开发指南

### 项目结构
```
├── manifest.json      # 扩展配置文件
├── background.js      # 后台服务
├── content.js         # 主要交互逻辑和样式
└── lib/              # 外部库
    ├── marked.esm.js  # Markdown解析（ES模块版本）
    ├── highlight.min.js
    └── github.min.css
```

### 开发注意事项
1. 所有CSS选择器必须使用`codeium-`前缀
2. 新功能开发前检查功能列表确保兼容性
3. 遵循Chrome Extension Manifest V3规范
4. 保持代码模块化和可维护性

### 安全考虑
- API密钥安全存储
- 内容安全策略
- 输入验证和消毒
- 最小权限原则

## Rankings

- #40,193 — Overall
- #147 — assistant

## Permissions and access

### Permissions

- `activeTab`
- `storage`
- `scripting`
- `downloads`

### Host permissions

- `<all_urls>`

### Content script matches

- `<all_urls>`

## Safety

- **Risk impact:** Moderate risk impact
- **Risk likelihood:** Low risk likelihood

### Analysis details

- Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [DeepSeek助手](https://chrome-stats.com/d/deepseek%E5%8A%A9%E6%89%8B) — 6 users
- [Browse Bot](https://chrome-stats.com/d/abot)
- [AI-MarkDone](https://chrome-stats.com/d/ai-markdone) — 60 users
- [理聊-AI对话助手](https://chrome-stats.com/d/%E7%90%86%E8%81%8A-ai%E5%AF%B9%E8%AF%9D%E5%8A%A9%E6%89%8B) — 6 users
- [网页提炼助手](https://chrome-stats.com/d/%E7%BD%91%E9%A1%B5%E6%8F%90%E7%82%BC%E5%8A%A9%E6%89%8B) — 28 users
- [Send2AI – Browser AI Client & Sidebar Assistant](https://chrome-stats.com/d/send2ai-%E6%B5%8F%E8%A7%88%E5%99%A8ai%E5%AE%A2%E6%88%B7%E7%AB%AF) — 32 users
- [鲸鱼AI助手 - DeepSeek、豆包、Kimi、千问、元宝、智谱清言对话导出](https://chrome-stats.com/d/ai%E8%BD%AC%E6%8D%A2%E5%8A%A9%E6%89%8B-ai%E5%AF%B9%E8%AF%9D%E5%AF%BC%E5%87%BAword) — 48 users, 3.86 / 5
- [AI智能答题助手 - 专业版](https://chrome-stats.com/d/ai%E6%99%BA%E8%83%BD%E7%AD%94%E9%A2%98%E5%8A%A9%E6%89%8B-%E4%B8%93%E4%B8%9A%E7%89%88) — 52 users, 5.00 / 5
- [Infinpilot](https://chrome-stats.com/d/infinpilot) — 3 users, 5.00 / 5
- [Future-Tab](https://chrome-stats.com/d/future-tab-new) — 2 users
- [Tactus](https://chrome-stats.com/d/tactus) — 7 users, 5.00 / 5
- [AiAllSupport](https://chrome-stats.com/d/deepseekallsupports) — 59 users, 2.33 / 5

---

Source: [Chrome-Stats](https://chrome-stats.com/d/ai-chat-assistant)