didi-lot3-frontend/extension/TESTING.md

🧪 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:

   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:

// 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! 🔍