feat: auto-analyze + YouTube support in browser extension

Extension:
- Auto-analyze: popup detects video and starts analysis immediately (400ms delay)
- Comprehensive video detection: YouTube watch/shorts/youtu.be, Twitter/X,
Instagram, Facebook, generic <video>, og:video meta tags
- YouTube sends URL to /analyze-url backend endpoint
- Direct URLs fetched by background service worker
- Results saved to chrome.storage for popup last-result display

Backend:
- New POST /analyze-url endpoint for browser extension
- yt-dlp integration: downloads YouTube/Twitter/Instagram/TikTok videos
- httpx fallback for direct .mp4/.webm URLs
- Auto-cleanup of temp files
- Added yt-dlp and httpx to requirements.txt

backend/main.py

@@ -75,6 +75,71 @@ async def health():
     }
 
 
+@app.post("/analyze-url")
+async def analyze_from_url(payload: dict):
+    """Download a video from a URL and analyze it. Used by the browser extension."""
+    if not authenticator:
+        raise HTTPException(status_code=503, detail="Server is still initializing")
+
+    video_url = payload.get("url", "").strip()
+    if not video_url:
+        raise HTTPException(status_code=400, detail="No URL provided")
+
+    tmp_path = UPLOAD_DIR / f"ext_{uuid.uuid4().hex}.mp4"
+    downloaded = False
+
+    try:
+        # Try yt-dlp first (YouTube, Twitter, Instagram, TikTok, etc.)
+        try:
+            import yt_dlp
+            ydl_opts = {
+                "format": "bestvideo[ext=mp4][height<=720]+bestaudio[ext=m4a]/best[ext=mp4][height<=720]/best",
+                "outtmpl": str(tmp_path),
+                "quiet": True,
+                "no_warnings": True,
+                "merge_output_format": "mp4",
+            }
+            with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+                ydl.download([video_url])
+            downloaded = tmp_path.exists() and tmp_path.stat().st_size > 1000
+            if downloaded:
+                logger.info(f"yt-dlp downloaded {tmp_path.stat().st_size // 1024}KB")
+        except ImportError:
+            logger.info("yt-dlp not installed — trying direct HTTP fetch")
+        except Exception as e:
+            logger.warning(f"yt-dlp failed ({e}) — trying direct fetch")
+
+        # Fallback: direct HTTP fetch for plain .mp4/.webm URLs
+        if not downloaded:
+            try:
+                import httpx
+                async with httpx.AsyncClient(timeout=60, follow_redirects=True) as client:
+                    r = await client.get(video_url, headers={"User-Agent": "Mozilla/5.0"})
+                    if r.status_code == 200:
+                        tmp_path.write_bytes(r.content)
+                        downloaded = tmp_path.exists() and tmp_path.stat().st_size > 1000
+            except Exception as e:
+                logger.warning(f"Direct fetch failed: {e}")
+
+        if not downloaded:
+            raise HTTPException(
+                status_code=400,
+                detail="Could not download video. For YouTube, install yt-dlp: pip install yt-dlp"
+            )
+
+        result = authenticator.analyze(str(tmp_path))
+        return result
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.exception(f"analyze-url failed: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+    finally:
+        if tmp_path.exists():
+            tmp_path.unlink()
+
+
 @app.post("/analyze")
 async def analyze_video(file: UploadFile = File(...)):
     """

backend/requirements.txt

@@ -16,3 +16,7 @@ torchaudio
 moviepy>=1.0.3
 librosa>=0.10.0
 soundfile>=0.12.1
+
+# Browser extension support
+yt-dlp>=2024.1.0
+httpx>=0.27.0

extension/background.js

@@ -49,9 +49,23 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   if (msg.type === 'ANALYZE_URL') {
     analyzeVideoUrl(msg.url)
-      .then(result => sendResponse({ ok: true, result }))
-      .catch(err  => sendResponse({ ok: false, error: err.message }));
-    return true; // keep channel open for async
+      .then(result => {
+        chrome.storage.local.set({ lastResult: { ...result, file: msg.url.split('/').pop().slice(0,40) } });
+        sendResponse({ ok: true, result });
+      })
+      .catch(err => sendResponse({ ok: false, error: err.message }));
+    return true;
+  }
+
+  if (msg.type === 'ANALYZE_YOUTUBE') {
+    // Send YouTube URL directly to backend — backend handles yt-dlp download
+    analyzeYouTubeUrl(msg.url)
+      .then(result => {
+        chrome.storage.local.set({ lastResult: { ...result, file: 'YouTube video' } });
+        sendResponse({ ok: true, result });
+      })
+      .catch(err => sendResponse({ ok: false, error: err.message }));
+    return true;
   }
 
   if (msg.type === 'CHECK_HEALTH') {
@@ -63,26 +77,39 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   }
 
   if (msg.type === 'ANALYZE_FILE_BYTES') {
-    // Receive base64 video bytes from content script, send to backend
     analyzeBase64Video(msg.data, msg.filename, msg.mimeType)
-      .then(result => sendResponse({ ok: true, result }))
-      .catch(err   => sendResponse({ ok: false, error: err.message }));
+      .then(result => {
+        chrome.storage.local.set({ lastResult: { ...result, file: msg.filename } });
+        sendResponse({ ok: true, result });
+      })
+      .catch(err => sendResponse({ ok: false, error: err.message }));
     return true;
   }
 });
 
 // ── Analyze a video by URL ────────────────────────────────────────────────────
 async function analyzeVideoUrl(videoUrl) {
-  // First fetch the video as a blob
   const response = await fetch(videoUrl);
   if (!response.ok) throw new Error(`Failed to fetch video: ${response.status}`);
-
   const blob = await response.blob();
   const filename = videoUrl.split('/').pop().split('?')[0] || 'video.mp4';
-
   return sendToBackend(blob, filename);
 }
 
+// ── Analyze YouTube URL via backend ──────────────────────────────────────────
+async function analyzeYouTubeUrl(youtubeUrl) {
+  const res = await fetch(`${API_BASE}/analyze-url`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url: youtubeUrl }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.detail || `Backend error ${res.status}`);
+  }
+  return res.json();
+}
+
 // ── Analyze base64 video data ─────────────────────────────────────────────────
 async function analyzeBase64Video(base64Data, filename, mimeType) {
   const byteString = atob(base64Data);

extension/content.js

@@ -122,20 +122,26 @@ async function startAnalysis(videoUrl) {
   try {
     // Check if server is running first
     const health = await fetch('http://localhost:8000/health').catch(() => null);
-    if (!health?.ok) {
-      throw new Error('SERVER_OFFLINE');
-    }
+    if (!health?.ok) throw new Error('SERVER_OFFLINE');
 
-    // Send URL to background for fetching + analysis
-    const response = await chrome.runtime.sendMessage({
-      type: 'ANALYZE_URL',
-      url: videoUrl,
-    });
+    const isYouTube = videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be');
 
-    stopStepAnimation();
+    let response;
+    if (isYouTube) {
+      // For YouTube, send the URL to backend's /analyze-url endpoint
+      response = await chrome.runtime.sendMessage({
+        type: 'ANALYZE_YOUTUBE',
+        url: videoUrl,
+      });
+    } else {
+      response = await chrome.runtime.sendMessage({
+        type: 'ANALYZE_URL',
+        url: videoUrl,
+      });
+    }
 
+    stopStepAnimation();
     if (!response.ok) throw new Error(response.error || 'Analysis failed');
-
     renderResult(response.result, videoUrl);
   } catch (err) {
     stopStepAnimation();

extension/popup.js

@@ -1,20 +1,29 @@
 /**
  * Authrix Extension — Popup Script
+ * Auto-detects and auto-analyzes videos on the current page.
  */
 
 const API_BASE = 'http://localhost:8000';
 
 // ── Init ──────────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', async () => {
-  await checkHealth();
-  await detectPageVideo();
+  const [healthOk, found] = await Promise.all([checkHealth(), detectPageVideo()]);
   loadLastResult();
   wireButtons();
+
+  // AUTO-ANALYZE: if server is online and a video was found, start immediately
+  if (healthOk && found) {
+    const btn = document.getElementById('btnAnalyzePage');
+    if (!btn.disabled) {
+      // Small delay so user sees the popup before it closes
+      setTimeout(() => btn.click(), 400);
+    }
+  }
 });
 
-// ── Health check ──────────────────────────────────────────────────────────────
+// ── Health check — returns true if ready ─────────────────────────────────────
 async function checkHealth() {
-  const badge = document.getElementById('statusBadge');
+  const badge     = document.getElementById('statusBadge');
   const modelInfo = document.getElementById('modelInfo');
   try {
     const res = await fetch(`${API_BASE}/health`);
@@ -23,16 +32,18 @@ async function checkHealth() {
       badge.textContent = 'ONLINE';
       badge.classList.remove('offline');
       modelInfo.textContent = (d.model || 'VIT ENSEMBLE').toUpperCase().slice(0, 22);
-    } else {
-      badge.textContent = 'LOADING';
+      return true;
     }
+    badge.textContent = 'LOADING';
+    return false;
   } catch {
     badge.textContent = 'OFFLINE';
     badge.classList.add('offline');
+    return false;
   }
 }
 
-// ── Detect video on current tab ───────────────────────────────────────────────
+// ── Detect video on current tab — returns true if found ──────────────────────
 async function detectPageVideo() {
   const btn   = document.getElementById('btnAnalyzePage');
   const title = document.getElementById('pageTitle');
@@ -40,7 +51,7 @@ async function detectPageVideo() {
 
   try {
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-    if (!tab?.id) return;
+    if (!tab?.id) return false;
 
     const results = await chrome.scripting.executeScript({
       target: { tabId: tab.id },
@@ -49,54 +60,113 @@ async function detectPageVideo() {
 
     const found = results?.[0]?.result;
     if (found?.url) {
-      title.textContent = found.title || 'Video detected';
+      title.textContent = found.label || found.title || 'Video detected';
       sub.textContent   = truncateUrl(found.url);
-      btn.disabled = false;
-      btn.dataset.url = found.url;
+      btn.disabled      = false;
+      btn.dataset.url   = found.url;
+      return true;
     } else {
       title.textContent = 'No video detected';
       sub.textContent   = 'Try right-clicking a video element';
-      btn.disabled = true;
+      btn.disabled      = true;
+      return false;
     }
   } catch {
     title.textContent = 'Cannot access this page';
     sub.textContent   = 'Extension pages are restricted';
+    return false;
   }
 }
 
-// ── Runs in page context ──────────────────────────────────────────────────────
+// ── Runs in page context — comprehensive video detection ─────────────────────
 function detectVideosOnPage() {
-  // Check <video> elements
+  const url  = location.href;
+  const host = location.hostname;
+
+  // ── YouTube ──────────────────────────────────────────────────────────────
+  // youtube.com/watch?v=... or youtu.be/...
+  const ytWatch = url.match(/[?&]v=([a-zA-Z0-9_-]{11})/);
+  const ytShort = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
+  const ytShorts = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
+  const ytId = (ytWatch?.[1] || ytShort?.[1] || ytShorts?.[1]);
+  if (ytId) {
+    return {
+      url:   `https://www.youtube.com/watch?v=${ytId}`,
+      label: '▶ YouTube: ' + (document.title.replace(' - YouTube','').slice(0,40)),
+      title: document.title,
+      type:  'youtube',
+    };
+  }
+
+  // ── Twitter / X ───────────────────────────────────────────────────────────
+  if (host.includes('twitter.com') || host.includes('x.com')) {
+    const twitterVid = document.querySelector('video[src*="video.twimg.com"]');
+    if (twitterVid?.src) {
+      return { url: twitterVid.src, label: '▶ Twitter/X video', title: document.title, type: 'direct' };
+    }
+    // Try blob → find the highest quality source
+    const allVids = Array.from(document.querySelectorAll('video'));
+    for (const v of allVids) {
+      const sources = Array.from(v.querySelectorAll('source'));
+      for (const s of sources) {
+        if (s.src && s.src.startsWith('http')) {
+          return { url: s.src, label: '▶ Twitter/X video', title: document.title, type: 'direct' };
+        }
+      }
+    }
+  }
+
+  // ── Instagram ─────────────────────────────────────────────────────────────
+  if (host.includes('instagram.com')) {
+    const igVid = document.querySelector('video');
+    if (igVid?.src && igVid.src.startsWith('http')) {
+      return { url: igVid.src, label: '▶ Instagram video', title: document.title, type: 'direct' };
+    }
+  }
+
+  // ── Facebook ──────────────────────────────────────────────────────────────
+  if (host.includes('facebook.com') || host.includes('fb.watch')) {
+    const fbVid = document.querySelector('video[src*="fbcdn"]');
+    if (fbVid?.src) {
+      return { url: fbVid.src, label: '▶ Facebook video', title: document.title, type: 'direct' };
+    }
+  }
+
+  // ── Generic <video> with direct HTTP src ─────────────────────────────────
   const videos = Array.from(document.querySelectorAll('video'));
   for (const v of videos) {
-    const src = v.src || v.querySelector('source')?.src;
-    if (src && src.startsWith('http')) {
-      return { url: src, title: document.title };
+    // Direct src
+    if (v.src && v.src.startsWith('http') && !v.src.startsWith('blob:')) {
+      return { url: v.src, label: '▶ Video on page', title: document.title, type: 'direct' };
+    }
+    // <source> children
+    const sources = Array.from(v.querySelectorAll('source'));
+    for (const s of sources) {
+      if (s.src && s.src.startsWith('http')) {
+        return { url: s.src, label: '▶ Video on page', title: document.title, type: 'direct' };
+      }
     }
   }
-  // YouTube
-  const ytMatch = location.href.match(/[?&]v=([^&]+)/);
-  if (ytMatch) {
-    return { url: location.href, title: document.title };
+
+  // ── OG / meta video tag ───────────────────────────────────────────────────
+  const ogVideo = document.querySelector('meta[property="og:video"], meta[property="og:video:url"]');
+  if (ogVideo?.content) {
+    return { url: ogVideo.content, label: '▶ Embedded video', title: document.title, type: 'meta' };
   }
+
   return null;
 }
 
 // ── Wire buttons ──────────────────────────────────────────────────────────────
 function wireButtons() {
-  // Analyze page video
   document.getElementById('btnAnalyzePage').addEventListener('click', async () => {
-    const btn = document.getElementById('btnAnalyzePage');
-    const url = btn.dataset.url;
-    if (!url) return;
-    await injectAndAnalyze(url);
+    const url = document.getElementById('btnAnalyzePage').dataset.url;
+    if (url) await injectAndAnalyze(url);
   });
 
-  // Manual URL
   document.getElementById('btnGo').addEventListener('click', async () => {
     const url = document.getElementById('urlInput').value.trim();
-    if (!url) return;
-    await injectAndAnalyze(url);
+    if (url) await injectAndAnalyze(url);
   });
 
   document.getElementById('urlInput').addEventListener('keydown', async (e) => {
@@ -107,7 +177,7 @@ function wireButtons() {
   });
 }
 
-// ── Inject overlay into active tab and trigger analysis ───────────────────────
+// ── Inject overlay and trigger analysis ──────────────────────────────────────
 async function injectAndAnalyze(url) {
   try {
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
@@ -123,8 +193,7 @@ async function injectAndAnalyze(url) {
       args: [url],
     });
 
-    // Close popup so user can see the overlay
-    window.close();
+    window.close(); // close popup so overlay is visible
   } catch (err) {
     console.error('[Authrix popup]', err);
   }
@@ -154,12 +223,11 @@ function loadLastResult() {
   });
 }
 
-// ── Utilities ────────────────────────────────────────────────────��────────────
 function truncateUrl(url) {
   try {
     const u = new URL(url);
-    return u.hostname + u.pathname.slice(0, 25);
+    return u.hostname + u.pathname.slice(0, 28);
   } catch {
-    return url.slice(0, 40);
+    return url.slice(0, 45);
   }
 }