didi-lot3-frontend/extension/SNIPPING_TOOL_GUIDE.md

# 📸 DIDI Snipping Tool - Complete Guide

## ✨ Feature: Auto-Save Screenshots

Când folosești Snipping Tool, screenshot-ul se **salvează automat** în folderul Downloads!

---

## 🎯 Cum folosești:

### 1. **Activează Snipping Tool**
```
Click icon extensie → "✂️ Snipping Tool (Screenshot)"
```

### 2. **Selectează zona**
- **Click și DRAG** mouse-ul pentru a selecta zona dorită
- Vezi **chenarul TEAL** care crește live
- Vezi **dimensiunile** în colț (ex: "500 × 300")

### 3. **Release mouse-ul**
Screenshot-ul se salvează AUTOMAT!

### 4. **Găsește fișierul**
```
📂 C:\Users\YourName\Downloads\
📁 didi-snip-2025-01-15T14-30-45.png
```

---

## 📁 Format nume fișier:

```
didi-snip-YYYY-MM-DDTHH-MM-SS.png

Exemplu:
didi-snip-2025-01-15T14-30-45.png
        └─ 2025-01-15 la 14:30:45
```

---

## ✅ Ce se întâmplă după snip:

### **Notificare pe pagină:**
```
✅ Screenshot saved!
📁 didi-snip-2025-01-15T14-30-45.png
📂 Check your Downloads folder
```

### **În Console (F12):**
```
[BACKGROUND] Snip captured: {left: 100, top: 200, width: 500, height: 300}
[BACKGROUND] Screenshot captured, length: 75432
[BACKGROUND] Screenshot saved as: didi-snip-2025-01-15T14-30-45.png Download ID: 123
```

### **În Chrome Downloads (Ctrl+J):**
Vezi fișierul descărcat recent cu iconița ✅

---

## 🧪 Test Rapid:

### **1. Reload extensia**
```
chrome://extensions → Reload DIDI
```

### **2. Mergi pe orice pagină** (Facebook, Google, etc.)

### **3. Click extensie → "✂️ Snipping Tool"**

### **4. Drag un dreptunghi**

### **5. Release**

### **6. Verifică Downloads:**
```
Windows: C:\Users\YourName\Downloads\
Mac: ~/Downloads/
Linux: ~/Downloads/
```

**SAU**

Chrome Downloads page:
```
chrome://downloads/
sau
Ctrl+J (Windows/Linux)
Cmd+Shift+J (Mac)
```

---

## 📊 Screenshot Details:

- **Format:** PNG (high quality)
- **Conținut:** Întreaga fereastră vizibilă a tab-ului
- **Rezoluție:** Screen resolution (ex: 1920x1080)
- **Compresie:** None (lossless PNG)

**Note:** Screenshot-ul capturează întreaga fereastră vizibilă, NU doar zona selectată cu dreptunghiul. Coordonatele dreptunghiului sunt salvate în `chrome.storage` pentru procesare ulterioară.

---

## 🔍 Debugging:

### **Verifică dacă s-a salvat:**

**În Console (F12):**
```javascript
chrome.storage.local.get(['lastScreenshot', 'screenshotRect'], (data) => {
  console.log('Screenshot info:');
  console.log('- Data URL length:', data.lastScreenshot?.length);
  console.log('- Rectangle:', data.screenshotRect);

  // Deschide screenshot în tab nou
  if (data.lastScreenshot) {
    window.open(data.lastScreenshot);
  }
})
```

### **Verifică Downloads:**
```javascript
chrome.downloads.search({
  filename: 'didi-snip'
}, (items) => {
  console.log('DIDI Screenshots:', items);
})
```

---

## 🎨 Visual Features:

### **În timpul selecției:**
- ✅ Overlay semi-transparent (rgba(0, 0, 0, 0.3))
- ✅ Chenar teal (#00BFA6) 3px
- ✅ Background semi-transparent în interiorul dreptunghiului
- ✅ Shadow effect: `0 0 20px rgba(0, 191, 166, 0.6)`
- ✅ **Dimensiuni LIVE în colț:** "500 × 300"

### **După capture:**
- ✅ Notificare verde cu detalii
- ✅ Fișier PNG salvat automat
- ✅ Coordonate salvate în storage

---

## ⚙️ Settings & Customization:

### **Vrei să schimbi unde se salvează?**

Editează `background.js`:
```javascript
chrome.downloads.download({
  url: screenshotUrl,
  filename: `custom-folder/${filename}`, // Adaugă subfolder
  saveAs: true // TRUE = cere user unde să salveze
})
```

### **Vrei alt format de nume?**

Editează `background.js`:
```javascript
const filename = `my-custom-name-${timestamp}.png`;
// sau
const filename = `screenshot-${Date.now()}.png`;
```

---

## 🚀 Next Steps - Backend Integration:

Screenshot-ul salvat poate fi trimis la backend pentru analiză:

```javascript
// În background.js, după download:
fetch('http://localhost:3001/api/analyze-screenshot', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    screenshot: screenshotUrl, // base64 data URL
    rect: message.rect,
    pageUrl: message.pageUrl,
    timestamp: message.timestamp
  })
})
```

---

## ❓ Troubleshooting:

### **Nu se salvează în Downloads**

**Verifică permisiunile:**
```json
// manifest.json
"permissions": [
  "downloads" // ← Trebuie să fie aici!
]
```

**Reload extensia după orice modificare în manifest.json!**

### **Screenshot e negru/gol**

- Facebook poate bloca `captureVisibleTab` pe anumite zone
- Încearcă pe alte site-uri (Google, Twitter)
- Verifică Console pentru erori

### **Notificarea nu apare**

- Verifică dacă `response.filename` există în Console
- Verifică dacă `showNotification()` primește mesajul corect

---

## 📝 Summary:

✅ **Snipping Tool funcțional**
✅ **Auto-save în Downloads**
✅ **Nume fișier cu timestamp**
✅ **Notificare cu detalii**
✅ **Visual feedback live**
✅ **Coordonate salvate pentru backend**

**Gata de integrare cu backend pentru analiză AI!** 🎉