# easynote

**Repository Path**: chrunlee/easynote

## Basic Information

- **Project Name**: easynote
- **Description**: chrome 谷歌插件，用于随时记录碎片信息
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-18
- **Last Updated**: 2025-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简易笔记 Chrome 插件

一个简洁实用的Chrome浏览器插件，用于快速记录笔记、灵感和待办事项。

## 功能特性

- ✨ **快速记录**：点击插件图标即可快速记录
- 📝 **富文本编辑**：支持文字格式化、列表、图片粘贴
- 🏷️ **分类管理**：支持笔记、待办、灵感、提醒四种类别
- ⏰ **提醒功能**：待办和提醒类别支持设置提醒时间
- 📋 **列表管理**：查看、编辑、删除所有记录
- 🔍 **搜索过滤**：按类别筛选和关键词搜索
- 💾 **数据导出**：一键导出所有数据为JSON格式
- 🔔 **通知提醒**：到达提醒时间自动弹出通知

## 安装方法

### 开发环境设置

1. 安装Node.js（推荐v18+）
2. 安装依赖：
```bash
npm install
```

3. 构建项目：
```bash
npm run build
```

4. 加载插件：
   - 打开Chrome浏览器，进入扩展程序管理页面（`chrome://extensions/`）
   - 开启右上角的"开发者模式"
   - 点击"加载已解压的扩展程序"
   - 选择项目中的 `dist` 目录
   - 插件安装完成！

### 开发模式

使用 `npm run dev` 可以启动监听模式，代码修改后会自动重新构建。

## 使用说明

### 快速记录

1. 点击浏览器工具栏上的插件图标
2. 选择笔记类别（笔记/待办/灵感/提醒）
3. 输入标题（可选）
4. 在编辑器中输入内容，支持：
   - 文字格式化（粗体、斜体、下划线）
   - 有序/无序列表
   - 粘贴图片（Ctrl+V 或点击图片按钮）
5. 如果是待办或提醒类别，可以设置提醒时间
6. 点击"保存"按钮

### 查看和管理笔记

1. 在弹窗中点击"查看所有笔记"按钮，或在列表页面中：
   - 使用类别筛选下拉框筛选笔记
   - 使用搜索框搜索标题或内容
   - 点击笔记卡片的操作按钮：
     - ✏️ 编辑：修改笔记内容
     - 👁️ 查看：查看笔记详情
     - 🗑️ 删除：删除笔记

### 导出数据

1. 在弹窗或列表页面点击"导出数据"按钮
2. 浏览器会自动下载JSON格式的数据文件
3. 文件名为：`easynote_export_YYYY-MM-DD.json`

## 技术栈

- Vue 3（使用Vite编译）
- Vite（构建工具）
- Chrome Extension Manifest V3
- Chrome Storage API（数据存储）
- Chrome Alarms API（提醒功能）
- Chrome Notifications API（通知功能）

## 项目结构

```
easynote/
├── src/                   # 源代码目录
│   ├── components/        # Vue组件
│   │   └── RichTextEditor.vue
│   ├── utils/            # 工具函数
│   │   └── storage.js
│   ├── App.vue           # Popup主组件
│   ├── ListApp.vue       # List主组件
│   ├── popup.html        # Popup入口HTML
│   ├── popup.js          # Popup入口JS
│   ├── popup.css         # Popup样式
│   ├── list.html         # List入口HTML
│   ├── list.js           # List入口JS
│   └── list.css          # List样式
├── dist/                  # 构建输出目录（构建后生成）
├── manifest.json          # 插件配置文件
├── background.js          # 后台服务（处理提醒）
├── icons/                 # 图标文件夹
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── vite.config.js         # Vite配置
├── build.js               # 构建后处理脚本
├── package.json           # 项目配置
└── README.md              # 说明文档
```

## 图标说明

插件需要以下尺寸的图标：
- 16x16px：工具栏图标
- 48x48px：扩展程序管理页面
- 128x128px：Chrome Web Store

请将图标文件放置在 `icons/` 文件夹中，或使用在线工具生成图标。

## 注意事项

1. 数据存储在Chrome本地存储中，清除浏览器数据可能会丢失笔记
2. 建议定期导出数据备份
3. 提醒功能需要在浏览器运行时才能触发
4. 图片以Base64格式存储，大量图片可能占用较多存储空间

## 开发说明

### 本地开发

1. 修改代码后，在扩展程序管理页面点击"重新加载"按钮
2. 刷新相关页面查看效果

### 调试

- 弹窗页面：右键点击插件图标 → "检查弹出内容"
- 列表页面：右键点击页面 → "检查"
- 后台脚本：在扩展程序管理页面点击"service worker"链接

## 许可证

MIT License

## 更新日志

### v1.0.0
- 初始版本发布
- 实现基础笔记功能
- 支持富文本编辑
- 支持提醒功能
- 支持数据导出