# ai_todo_extension

**Repository Path**: yangyang993/ai_todo_extension

## Basic Information

- **Project Name**: ai_todo_extension
- **Description**: 用trae生成的一个在浏览器上的极简todo插件。为什么做这个插件？因为只是一天的todo，不想每次都切到todo的app或者页面。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-07
- **Last Updated**: 2025-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Todo List Browser Extension

一个功能丰富的浏览器待办事项列表插件，支持任务管理、置顶、分类查看等功能。

## 功能特性

### 🎯 核心功能
- **任务管理**：添加、编辑、删除、完成待办事项
- **智能分类**：按未完成/已完成状态分类查看任务
- **任务置顶**：支持置顶重要任务（最多3个）
- **实时统计**：显示总任务数、未完成数、已完成数
- **数据持久化**：自动保存到浏览器存储

### 🚀 高级功能
- **实时时钟**：显示当前日期和时间，秒数有动画效果
- **批量操作**：一键清除已完成任务或清空所有任务
- **智能切换**：添加任务时自动切换到未完成标签页
- **时间记录**：记录任务创建时间和完成时间
- **响应式设计**：适配不同尺寸的浏览器窗口

### 🎨 用户体验
- **流畅动画**：数字变化有平滑动画效果
- **直观界面**：清晰的标签页和状态指示
- **快捷键支持**：Enter键快速添加任务
- **状态反馈**：置顶、完成状态有视觉标识

## 安装使用

### Chrome浏览器安装
1. 打开Chrome浏览器，进入 `chrome://extensions/`
2. 开启"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择本插件文件夹

### 普通浏览器使用
1. 在浏览器中打开 `popup.html` 文件
2. 或通过本地服务器访问（如：`http://localhost:8000/popup.html`）

## 使用说明

### 添加任务
1. 在输入框中输入任务内容
2. 点击"添加"按钮或按Enter键
3. 任务会自动添加到未完成列表

### 管理任务
- **完成任务**：点击任务前的复选框
- **编辑任务**：点击任务右侧的"编辑"按钮
- **置顶任务**：点击"置顶"按钮（未完成任务最多置顶3个）
- **删除任务**：点击"删除任务"按钮

### 查看任务
- **未完成标签**：查看所有未完成任务，置顶任务会显示在最前面
- **已完成标签**：查看所有已完成任务，包含完成时间记录

### 批量操作
- **清除已完成**：一键删除所有已完成任务
- **清空全部**：清空所有任务（包含确认提示）

## 技术特性

### 代码架构
- **模块化设计**：使用utils对象封装公共功能
- **代码复用**：抽取重复逻辑，提高可维护性
- **事件管理**：统一的事件绑定机制
- **数据操作**：封装的数据操作方法

### 存储机制
- **Chrome扩展**：使用chrome.storage.sync进行数据同步
- **普通浏览器**：使用localStorage进行本地存储
- **自动保存**：操作后自动保存数据

### 兼容性
- 支持Chrome浏览器扩展模式
- 支持普通浏览器本地运行
- 响应式布局适配

## 文件结构

```
ai_extension/
├── images/                 # 图标文件
│   ├── icon16.png         # 16x16图标
│   ├── icon48.png         # 48x48图标
│   └── icon128.png        # 128x128图标
├── manifest.json          # 扩展配置文件
├── popup.html            # 主界面HTML
├── popup.js              # 核心功能JavaScript
├── styles.css            # 样式文件
└── README.md             # 说明文档
```

## 开发说明

### 核心函数
- `utils.findTodoById()` - 根据ID查找任务
- `utils.saveAndUpdate()` - 保存数据并更新UI
- `utils.data.addTodo()` - 添加新任务
- `utils.data.removeTodo()` - 删除任务
- `utils.data.filterByTab()` - 按标签页过滤任务

### 自定义扩展
插件采用模块化设计，易于扩展新功能：
1. 在utils对象中添加新方法
2. 在utils.data中添加数据操作
3. 使用现有的DOM创建和事件绑定工具

## 更新日志

### v1.0
- 初始版本发布
- 基础任务管理功能
- 置顶、分类查看功能
- 数据持久化存储

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个插件！