# 🧪 DIDI Extension - Testing Guide

## 📦 Instalare Extensie

1. Deschide Chrome/Edge
2. Navighează la `chrome://extensions`
3. Activează **Developer mode** (toggle în dreapta sus)
4. Click **Load unpacked**
5. Selectează folderul `browser-extension`

## ✅ Test 1: Enhanced Post Extraction

### Pași:

1. **Mergi pe Facebook** (https://facebook.com)
2. **Deschide extensia** (click pe icon în toolbar)
3. **Click pe "📋 Extract Post Content"**
4. **Hover peste un post** - ar trebui să vezi bordură albastră
5. **Click pe post**

### Ce ar trebui să vezi:

✅ **Notificare pe pagină** (colț dreapta sus):
```
✓ Extracted: text+image
📝 Text: 250 chars
🖼️ Images: 2
🔗 Links: 1

Click extension icon to view details
```

✅ **În extensie** (când o redeschizi):
- Tab-ul Facebook activ
- Preview cu tot conținutul extras:
  ```
  📝 Type: text+image
  👤 Author: Numele Autorului

  💬 Text:
  Textul postării... (primele 200 caractere)

  🖼️ Images: 2 found
     1. 1200x800px
     2. 800x600px

  🔗 External Links: 1 found
     1. https://example.com/...

  🔗 Post URL: https://facebook.com/...
  ⏰ 2h ago
  ```

✅ **Butoane disponibile**:
- 🚀 Send to Analysis
- 💾 Save
- 🗑️ Clear

### Debug (dacă nu merge):

1. **Deschide Console** (F12) pe Facebook
2. Caută logging de tip:
   ```
   [DIDI] Content script initialized
   [FB] Starting Facebook extraction...
   [FB] Extraction complete: {...}
   [DIDI] Content stored in chrome.storage
   ```

3. **Verifică chrome storage**:
   - În Console scrie:
   ```javascript
   chrome.storage.local.get(null, (data) => console.log(data))
   ```

---

## ✂️ Test 2: Snipping Tool

### Pași:

1. **Mergi pe orice site** (inclusiv Facebook)
2. **Deschide extensia**
3. **Click pe "✂️ Snipping Tool (Screenshot)"**
4. **Click și drag** pentru a selecta o zonă

### Ce ar trebui să vezi:

✅ **Overlay semi-transparent** peste toată pagina
✅ **Dreptunghi de selecție** (bordură teal) când tragi mouse-ul
✅ **Notificare**: "📸 Screenshot captured! Coordinates: {...}"
✅ **ESC** pentru cancel

### Debug (dacă nu merge):

1. **Console logging**:
   ```
   [DIDI] Snipping mode activating...
   [DIDI] Snip complete: {left: 100, top: 200, width: 500, height: 300}
   [DIDI] Snip sent to background: {...}
   ```

---

## 🚀 Test 3: Send to Backend

### Pași:

1. **Extrage conținut** (Test 1)
2. **Click "🚀 Send to Analysis"**

### Ce ar trebui să vezi:

✅ Status message: "Sending to analysis..."
❌ Apoi error (normal, backend nu e pornit):
```
❌ Failed to send: Backend returned 404
sau
❌ Failed to send: Failed to fetch
```

### Pentru ca să meargă:

Trebuie să ai backend pornit la:
```
POST http://localhost:3001/api/analyze

Body:
{
  "platform": "facebook",
  "data": {
    "platform": "facebook",
    "type": "text+image",
    "author": "...",
    "text": "...",
    "images": [...],
    "links": [...],
    ...
  },
  "timestamp": "2025-01-15T..."
}
```

---

## 🐛 Common Issues

### "Please refresh the page"
- **Fix**: Refresh Facebook după ce instalezi extensia

### "No content found"
- **Verifică**: Click exact pe zona postării, nu pe butonul Like/Comment
- **Verifică**: Console pentru erori

### Popup-ul nu arată conținutul
- **Fix**: Click din nou pe icon extensie
- **Verifică**: Chrome storage (instrucțiuni mai sus)

### Snipping nu apare overlay-ul
- **Fix**: Refresh pagina
- **Verifică**: Console pentru erori

---

## 📊 Chrome DevTools Tips

### Debugging Popup:
1. Click dreapta pe icon extensie
2. "Inspect popup"
3. Console pentru logging

### Debugging Content Script:
1. F12 pe Facebook
2. Console tab
3. Caută `[DIDI]`, `[FB]`

### View Storage:
```javascript
// Get all storage
chrome.storage.local.get(null, console.log)

// Clear storage
chrome.storage.local.clear()

// Get specific key
chrome.storage.local.get(['facebook_content'], console.log)
```

---

## ✅ Checklist Complet

- [ ] Extensia se încarcă fără erori
- [ ] Logo "didi" apare corect în header
- [ ] Butonul "Extract Post Content" funcționează
- [ ] Butonul "Snipping Tool" funcționează
- [ ] Notificări apar pe pagină
- [ ] Content-ul apare în popup
- [ ] Toate imaginile sunt extrase
- [ ] Link-urile externe sunt extrase
- [ ] "Send to Analysis" trimite request (chiar dacă fail)
- [ ] "Save" salvează în storage
- [ ] Tab "Saved" arată extractions

---

**Întrebări? Issues? Check Console logging!** 🔍