# Setup Extension - Hướng dẫn từng bước

## 📋 Bước 1: Install Dependencies

```bash
cd extension
npm install
```

## 📋 Bước 2: Tạo Icons (Tạm thời)

Extension cần icons. Bạn có thể:
1. Tạo icons đơn giản (16x16, 48x48, 128x128)
2. Hoặc dùng placeholder icons từ internet
3. Hoặc để tôi tạo script generate icons đơn giản

**Tạm thời**: Tạo file placeholder trong `icons/`:
- `icon16.png`
- `icon48.png`
- `icon128.png`

## 📋 Bước 3: Build Extension

```bash
npm run build
```

Sau khi build, folder `dist/` sẽ được tạo với các file đã compile.

## 📋 Bước 4: Load vào Chrome

1. Mở Chrome: `chrome://extensions`
2. Bật **"Developer mode"** (góc trên bên phải)
3. Click **"Load unpacked"**
4. Chọn folder: `E:\opennotion\extension\dist`

## 📋 Bước 5: Test Extension

1. Mở một trang web bất kỳ (ví dụ: https://example.com)
2. **Bôi đen** một đoạn text
3. Popup "💾 Save to CuCu Note" sẽ hiện
4. Click popup → Form hiện
5. Điền tag → Save

## ⚠️ Lưu ý

### Backend URL
Hiện tại extension gọi API tại: `http://localhost:5000/api/v1`

Nếu backend chạy ở port khác, sửa trong:
- `src/shared/api-client.ts` → dòng `const API_BASE = ...`

### Auth Token
Extension cần auth token để gọi API. Hiện tại chưa implement auth.

**Tạm thời**: Backend có thể cho phép anonymous hoặc bạn cần:
1. Setup Clerk auth trong extension
2. Hoặc dùng API key

## 🐛 Troubleshooting

### Extension không load được
- Check `manifest.json` có đúng format không
- Check console trong `chrome://extensions` → "Errors"

### Popup không hiện khi bôi đen text
- Check Console trong DevTools (F12)
- Check content script có inject vào page không

### API call fail
- Check backend có chạy không: `http://localhost:5000`
- Check CORS settings trong backend
- Check auth token trong `chrome.storage.local`

## 📝 Next Steps

1. ✅ Setup icons
2. ✅ Test với backend thật
3. ✅ Setup auth (Clerk hoặc API key)
4. ✅ Config backend URL từ settings
5. ✅ Polish UI/UX

