# coconut-extension

**Repository Path**: zb224989/coconut-extension

## Basic Information

- **Project Name**: coconut-extension
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-24
- **Last Updated**: 2025-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🥥 椰子助手 Chrome 扩展

一个功能强大、架构清晰的 Chrome 扩展，专为提高开发和测试效率而设计。

## ✨ 核心特性

- 🔐 **智能账号管理** - 支持多环境、多项目的账号统一管理，告别手动输入
- 🚀 **一键自动登录** - 智能识别登录页面，自动填充验证码并登录
- 🎯 **验证码自动识别** - 支持计算类验证码自动识别，成功率高
- 📊 **接口错误监控** - 实时监控API错误，提供详细信息和cURL命令
- 🗑️ **快速清除缓存** - 一键清除localStorage、Cookie、浏览器缓存等
- 🎨 **现代化UI** - 精美的用户界面，流畅的交互体验
- 🧩 **高度可扩展** - 模块化架构，易于添加新功能和登录策略
- 📦 **配置导入导出** - 方便配置备份和团队共享

## 📸 效果预览

### 配置管理页面
现代化的配置界面，支持多环境、多账号管理：
- 清晰的标签页分类
- 环境和账号的快速添加/编辑/删除
- 一键复制账号信息
- 配置导入导出

### Popup快捷操作
简洁的快捷操作面板：
- 环境和账号数量统计
- 快速打开配置页面
- 一键清除当前页面缓存

### 错误监控
实时的接口错误提示：
- 详细的错误信息展示
- 一键复制URL、错误信息或cURL命令
- 自动消失，不干扰正常使用

## 📁 项目结构

```
coconut-extension/
├── 📄 manifest.json                 # Chrome扩展配置
├── 📄 README.md                     # 项目说明
├── 📄 INSTALL.md                    # 安装指南
├── 📄 USER_GUIDE.md                 # 使用指南
├── 📄 DEVELOPMENT.md                # 开发文档
├── 📄 CHANGELOG.md                  # 更新日志
├── 📁 src/
│   ├── 📁 background/               # 后台脚本（Service Worker）
│   │   ├── index.js                # 主入口，扩展初始化
│   │   ├── contextMenu.js          # 右键菜单管理
│   │   ├── messageHandler.js       # 消息处理中心
│   │   └── storageManager.js       # 存储管理器
│   ├── 📁 content/                  # 内容脚本
│   │   ├── index.js                # 主入口，功能协调
│   │   ├── autoLogin.js            # 自动登录引擎
│   │   └── errorMonitor.js         # 接口错误监控
│   ├── 📁 popup/                    # 弹出页面
│   │   ├── index.html              # 页面结构
│   │   ├── index.js                # 交互逻辑
│   │   └── style.css               # 样式
│   ├── 📁 options/                  # 配置页面
│   │   ├── index.html              # 页面结构
│   │   ├── index.js                # 配置管理逻辑
│   │   └── style.css               # 样式
│   └── 📁 common/                   # 通用模块
│       ├── constants.js            # 常量定义
│       ├── utils.js                # 工具函数库
│       ├── message.js              # 消息通信封装
│       └── storage.js              # 存储管理封装
├── 📁 assets/                       # 资源文件
│   ├── 📁 icons/                    # 扩展图标
│   └── 📁 styles/                   # 全局样式
├── 📁 lib/                          # 第三方库
│   ├── crypto-js.min.js            # 加密库
│   └── sm4.js                      # 国密SM4算法
└── 📁 config/                       # 配置文件
    └── defaultConfig.js            # 默认配置模板
```

## 🏗️ 架构设计

### 核心模块

1. **Storage Manager** - 统一的存储管理，提供配置的读取、保存和验证
2. **Message Bus** - 消息总线，统一管理各组件间的通信
3. **Auto Login Engine** - 自动登录引擎，支持策略模式扩展不同网站
4. **Error Monitor** - 接口错误监控，拦截请求并分析错误
5. **Context Menu Manager** - 右键菜单管理，动态生成菜单项

### 设计模式

- **策略模式** - 不同网站的登录策略
- **观察者模式** - 消息通知机制
- **单例模式** - 存储管理器
- **工厂模式** - 登录处理器的创建

## 🚀 快速开始

### 📦 安装

详细安装步骤请查看 [**安装指南 →**](./INSTALL.md)

**快速安装**:

1. 准备必需文件（库文件和图标）
2. 打开 `chrome://extensions/`
3. 开启「开发者模式」
4. 加载 `coconut-extension` 文件夹

### ⚙️ 配置

详细配置说明请查看 [**使用指南 →**](./USER_GUIDE.md)

**快速配置**:

1. 右键菜单 → 椰子助手 → 管理账号
2. 添加环境和账号信息
3. 保存配置

### 💡 使用

- **自动登录**: 右键菜单 → 椰子助手 → 选择环境 → 选择账号
- **清除缓存**: 右键菜单 → 椰子助手 → 清除缓存
- **配置管理**: 扩展图标 → 管理配置
- **错误监控**: 自动运行，错误时页面右下角显示

## 🔧 配置说明

### 自动登录配置

```javascript
{
  "envName": "环境名称",
  "urlPatterns": "登录页面URL",
  "requireEnterpriseLoginClick": false,  // 是否需要点击企业登录
  "bsLoginClick": false,  // 是否为大屏登录
  "accounts": [
    {
      "username": "用户名",
      "password": "密码",
      "remark": "备注",
      "submitSqlBool": false  // 是否自动提交SQL
    }
  ]
}
```

### 接口错误监控配置

在配置页面的「接口报错配置」中，输入需要监控的域名（用逗号分隔）：

```
localhost,test.example.com,prod.example.com
```

## 🛠️ 开发指南

### 添加新的登录策略

在 `src/content/autoLogin.js` 中添加新的登录策略：

```javascript
const loginStrategies = {
  'your-site': async (config) => {
    // 实现登录逻辑
  }
};
```

### 扩展右键菜单

在 `src/background/contextMenu.js` 中添加新的菜单项。

### 自定义错误监控规则

在 `src/content/errorMonitor.js` 中修改错误判断逻辑。

## 📚 文档

- [📖 安装指南](./INSTALL.md) - 详细的安装步骤和准备工作
- [💡 使用指南](./USER_GUIDE.md) - 完整的功能说明和使用技巧
- [🔧 开发文档](./DEVELOPMENT.md) - 架构设计和开发指南
- [📝 更新日志](./CHANGELOG.md) - 版本更新记录

## 🎯 为什么选择椰子助手？

### 对比原版本的改进

| 特性 | 原版本 | 椰子助手 v2.0 |
|------|--------|--------------|
| 代码组织 | ❌ 混乱，难以维护 | ✅ 模块化，清晰明了 |
| 可扩展性 | ❌ 硬编码，难以扩展 | ✅ 策略模式，易于扩展 |
| UI设计 | ⚠️ 基础可用 | ✅ 现代化，美观易用 |
| 文档 | ❌ 基本没有 | ✅ 完善的文档体系 |
| 错误处理 | ⚠️ 简单 | ✅ 完善的错误处理 |
| 配置管理 | ⚠️ 功能简单 | ✅ 强大的配置系统 |

### 适用场景

- ✅ 开发人员日常测试多个环境
- ✅ QA人员需要频繁切换测试账号
- ✅ 项目经理需要快速访问各个环境
- ✅ 运维人员需要监控接口错误
- ✅ 团队需要共享配置

## 🛠️ 技术栈

- **Manifest V3** - 最新的Chrome扩展规范
- **ES6+ Modules** - 现代JavaScript模块系统
- **Chrome Storage API** - 配置持久化
- **Chrome Scripting API** - 内容脚本注入
- **Fetch API** - 验证码识别
- **MutationObserver** - DOM变化监听
- **Crypto-JS** - 数据加密

## 🤝 贡献

欢迎贡献代码、报告问题或提出建议！

### 如何贡献

1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

查看 [开发文档](./DEVELOPMENT.md) 了解更多。

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](./LICENSE) 文件了解详情。

## 🙏 致谢

- 感谢所有贡献者
- 感谢原项目提供的基础功能
- 感谢Chrome扩展开发社区

## 📮 联系方式

- 问题反馈: [GitHub Issues](https://github.com/your-repo/coconut-extension/issues)
- 功能建议: [GitHub Discussions](https://github.com/your-repo/coconut-extension/discussions)

---

如果这个项目对你有帮助，请给一个 ⭐️ Star 支持一下！

**Made with ❤️ by Ethan**