feat: extension v2 — tab capture instead of download

- Use chrome.tabCapture API to record live tab stream (no download needed)
- Works on YouTube, Twitter, Netflix, any platform
- MediaRecorder captures 12s of video+audio as WebM
- Background service worker handles tabCapture.getMediaStreamId
- Content script records stream and sends base64 chunks to background
- Background sends blob to /analyze endpoint
- Popup simplified: one big 'Capture & Analyze' button
- Shows recording progress in overlay
- Removed yt-dlp dependency for extension (still available for /analyze-url)

extension/background.js

@@ -1,70 +1,37 @@
 /**
- * Authrix Extension — Background Service Worker
- * Handles context menu, coordinates analysis requests
+ * Authrix Extension — Background Service Worker v2
+ *
+ * Strategy: Use chrome.tabCapture to record the tab's live video stream
+ * for N seconds, then send the recorded blob to the local FastAPI backend.
+ * No video download needed — works on any platform.
  */
 
-const API_BASE = 'http://localhost:8000';
+const API_BASE    = 'http://localhost:8000';
+const CAPTURE_SEC = 12;   // seconds to record (enough for frame sampling)
 
-// ── Create context menu on install ────────────────────────────────────────────
+// ── Context menu ──────────────────────────────────────────────────────────────
 chrome.runtime.onInstalled.addListener(() => {
   chrome.contextMenus.create({
-    id: 'authrix-analyze',
-    title: '🔍 Analyze with Authrix',
-    contexts: ['video', 'link', 'page'],
+    id:       'authrix-capture',
+    title:    '🔍 Analyze with Authrix (capture tab)',
+    contexts: ['page', 'video', 'frame'],
   });
-  chrome.contextMenus.create({
-    id: 'authrix-analyze-url',
-    title: '🔍 Analyze video URL with Authrix',
-    contexts: ['link'],
-  });
-  console.log('[Authrix] Extension installed, context menu created');
 });
 
-// ── Context menu click ────────────────────────────────────────────────────────
-chrome.contextMenus.onClicked.addListener(async (info, tab) => {
-  if (!tab?.id) return;
-
-  if (info.menuItemId === 'authrix-analyze') {
-    // Inject content script to find and analyze the video on the page
-    chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: triggerPageAnalysis,
-      args: [info.srcUrl || info.pageUrl || null],
-    });
-  }
-
-  if (info.menuItemId === 'authrix-analyze-url') {
-    const url = info.linkUrl || info.srcUrl;
-    if (url) {
-      chrome.scripting.executeScript({
-        target: { tabId: tab.id },
-        func: showAuthrixOverlay,
-        args: [url],
-      });
-    }
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === 'authrix-capture' && tab?.id) {
+    startCapture(tab.id);
   }
 });
 
-// ── Message handler (from content script / popup) ─────────────────────────────
+// ── Message handler ───────────────────────────────────────────────────────────
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-  if (msg.type === 'ANALYZE_URL') {
-    analyzeVideoUrl(msg.url)
-      .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 }));
+  if (msg.type === 'START_CAPTURE') {
+    const tabId = sender.tab?.id || msg.tabId;
+    startCapture(tabId)
+      .then(() => sendResponse({ ok: true }))
+      .catch(e => sendResponse({ ok: false, error: e.message }));
     return true;
   }
 
@@ -76,81 +43,76 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     return true;
   }
 
-  if (msg.type === 'ANALYZE_FILE_BYTES') {
-    analyzeBase64Video(msg.data, msg.filename, msg.mimeType)
+  if (msg.type === 'SEND_BLOB_CHUNKS') {
+    // Receive recorded video chunks from offscreen/content, send to backend
+    receiveAndAnalyze(msg.chunks, msg.mimeType, sender.tab?.id)
       .then(result => {
-        chrome.storage.local.set({ lastResult: { ...result, file: msg.filename } });
+        chrome.storage.local.set({ lastResult: { ...result, file: 'Tab capture' } });
+        // Send result back to the content script on that tab
+        if (sender.tab?.id) {
+          chrome.tabs.sendMessage(sender.tab.id, { type: 'ANALYSIS_RESULT', result });
+        }
         sendResponse({ ok: true, result });
       })
-      .catch(err => sendResponse({ ok: false, error: err.message }));
+      .catch(e => {
+        if (sender.tab?.id) {
+          chrome.tabs.sendMessage(sender.tab.id, { type: 'ANALYSIS_ERROR', error: e.message });
+        }
+        sendResponse({ ok: false, error: e.message });
+      });
     return true;
   }
+
+  if (msg.type === 'ANALYSIS_ERROR_FROM_CONTENT') {
+    // Bubble up errors from content script recording
+    console.error('[Authrix BG] Content error:', msg.error);
+  }
 });
 
-// ── Analyze a video by URL ────────────────────────────────────────────────────
-async function analyzeVideoUrl(videoUrl) {
-  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);
-}
+// ── Start tab capture ─────────────────────────────────────────────────────────
+async function startCapture(tabId) {
+  if (!tabId) throw new Error('No tab ID');
 
-// ── 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 }),
+  // Tell content script to show loading overlay
+  await chrome.tabs.sendMessage(tabId, { type: 'SHOW_CAPTURE_OVERLAY' });
+
+  // Get a MediaStream for the tab using tabCapture
+  // tabCapture.getMediaStreamId gives us a stream ID usable in content scripts
+  const streamId = await new Promise((resolve, reject) => {
+    chrome.tabCapture.getMediaStreamId({ targetTabId: tabId }, (id) => {
+      if (chrome.runtime.lastError) reject(new Error(chrome.runtime.lastError.message));
+      else resolve(id);
+    });
   });
-  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);
-  const bytes = new Uint8Array(byteString.length);
-  for (let i = 0; i < byteString.length; i++) {
-    bytes[i] = byteString.charCodeAt(i);
-  }
-  const blob = new Blob([bytes], { type: mimeType || 'video/mp4' });
-  return sendToBackend(blob, filename || 'video.mp4');
+  // Send stream ID to content script — it will record and send back chunks
+  await chrome.tabs.sendMessage(tabId, {
+    type:       'RECORD_STREAM',
+    streamId:   streamId,
+    durationMs: CAPTURE_SEC * 1000,
+  });
 }
 
-// ── Send blob to FastAPI backend ──────────────────────────────────────────────
-async function sendToBackend(blob, filename) {
+// ── Receive chunks and analyze ────────────────────────────────────────────────
+async function receiveAndAnalyze(base64Chunks, mimeType, tabId) {
+  // Reconstruct blob from base64 chunks
+  const byteArrays = base64Chunks.map(chunk => {
+    const binary = atob(chunk);
+    const bytes  = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return bytes;
+  });
+
+  const blob     = new Blob(byteArrays, { type: mimeType || 'video/webm' });
+  const filename = `capture_${Date.now()}.webm`;
+
   const fd = new FormData();
   fd.append('file', blob, filename);
 
-  const res = await fetch(`${API_BASE}/analyze`, {
-    method: 'POST',
-    body: fd,
-  });
-
+  const res = await fetch(`${API_BASE}/analyze`, { method: 'POST', body: fd });
   if (!res.ok) {
     const err = await res.json().catch(() => ({}));
     throw new Error(err.detail || `Backend error ${res.status}`);
   }
-
   return res.json();
 }
-
-// ── Injected functions (run in page context) ──────────────────────────────────
-function triggerPageAnalysis(srcUrl) {
-  // This runs in the page — calls showAuthrixOverlay which is defined in content.js
-  if (typeof window.__authrixAnalyze === 'function') {
-    window.__authrixAnalyze(srcUrl);
-  } else {
-    console.warn('[Authrix] Content script not ready');
-  }
-}
-
-function showAuthrixOverlay(url) {
-  if (typeof window.__authrixAnalyze === 'function') {
-    window.__authrixAnalyze(url);
-  }
-}

extension/content.js

@@ -1,42 +1,113 @@
 /**
- * Authrix Extension — Content Script
- * Injected into every page. Handles overlay UI and video detection.
+ * Authrix Extension — Content Script v2
+ *
+ * Handles:
+ * 1. Overlay UI (loading, result, error)
+ * 2. Tab stream recording via MediaRecorder (using streamId from background)
+ * 3. Sending recorded chunks back to background for analysis
  */
 
-// ── Register global trigger ───────────────────────────────────────────────────
-window.__authrixAnalyze = function(hintUrl) {
-  const url = hintUrl || findBestVideoUrl();
-  if (!url) {
-    showToast('⚠ No video found on this page', 'warn');
-    return;
+// ── Message listener from background ─────────────────────────────────────────
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  if (msg.type === 'SHOW_CAPTURE_OVERLAY') {
+    showOverlay();
+    sendResponse({ ok: true });
+  }
+
+  if (msg.type === 'RECORD_STREAM') {
+    recordStream(msg.streamId, msg.durationMs);
+    sendResponse({ ok: true });
+  }
+
+  if (msg.type === 'ANALYSIS_RESULT') {
+    renderResult(msg.result);
   }
-  showAnalysisOverlay(url);
-};
 
-// ── Find best video URL on the page ──────────────────────────────────────────
-function findBestVideoUrl() {
-  // 1. <video> element with src
-  const videos = Array.from(document.querySelectorAll('video'));
-  for (const v of videos) {
-    if (v.src && v.src.startsWith('http')) return v.src;
-    const src = v.querySelector('source');
-    if (src?.src) return src.src;
+  if (msg.type === 'ANALYSIS_ERROR') {
+    showError(msg.error);
   }
+});
 
-  // 2. YouTube — extract video ID and use yt-dlp-style URL
-  const ytMatch = location.href.match(/[?&]v=([^&]+)/);
-  if (ytMatch) return `https://www.youtube.com/watch?v=${ytMatch[1]}`;
+// ── Global trigger (from background context menu) ─────────────────────────────
+window.__authrixCapture = function() {
+  chrome.runtime.sendMessage({ type: 'START_CAPTURE' });
+};
 
-  // 3. Twitter/X video
-  const twitterVideo = document.querySelector('video[src*="video.twimg.com"]');
-  if (twitterVideo?.src) return twitterVideo.src;
+// ── Record stream ─────────────────────────────────────────────────────────────
+async function recordStream(streamId, durationMs) {
+  try {
+    updateLoadingText('Connecting to video stream...');
+
+    // Get the MediaStream from the stream ID
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { mandatory: { chromeMediaSource: 'tab', chromeMediaSourceId: streamId } },
+      audio: { mandatory: { chromeMediaSource: 'tab', chromeMediaSourceId: streamId } },
+    });
+
+    updateLoadingText('Recording video stream...');
+    activateStep(0);
+
+    // Pick best supported format
+    const mimeType = getSupportedMimeType();
+    const recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 2_000_000 });
+    const chunks   = [];
+
+    recorder.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
+
+    recorder.onstop = async () => {
+      stream.getTracks().forEach(t => t.stop());
+      activateStep(1);
+      updateLoadingText('Processing captured frames...');
+
+      try {
+        // Convert chunks to base64 for message passing
+        const blob    = new Blob(chunks, { type: mimeType });
+        const base64  = await blobToBase64(blob);
+
+        activateStep(2);
+        updateLoadingText('Running AI analysis...');
+
+        // Send to background for backend submission
+        chrome.runtime.sendMessage({
+          type:       'SEND_BLOB_CHUNKS',
+          chunks:     [base64],   // single base64 string of full blob
+          mimeType:   mimeType,
+        });
+      } catch (err) {
+        showError('Failed to process recording: ' + err.message);
+        chrome.runtime.sendMessage({ type: 'ANALYSIS_ERROR_FROM_CONTENT', error: err.message });
+      }
+    };
+
+    recorder.onerror = e => {
+      showError('Recording error: ' + e.error?.message);
+    };
+
+    // Record for durationMs then stop
+    recorder.start(1000); // collect data every 1s
+    setTimeout(() => {
+      if (recorder.state === 'recording') recorder.stop();
+    }, durationMs);
+
+    // Update progress during recording
+    const startTime = Date.now();
+    const progressInterval = setInterval(() => {
+      if (recorder.state !== 'recording') { clearInterval(progressInterval); return; }
+      const elapsed = (Date.now() - startTime) / 1000;
+      const total   = durationMs / 1000;
+      const pct     = Math.min(99, Math.round((elapsed / total) * 60));
+      updateLoadingText(`Recording: ${elapsed.toFixed(0)}s / ${total}s (${pct}% captured)`);
+    }, 500);
 
-  return null;
+  } catch (err) {
+    showError(err.message.includes('Permission')
+      ? 'Tab capture permission denied. Try reloading the page.'
+      : 'Stream capture failed: ' + err.message);
+  }
 }
 
-// ── Main overlay ──────────────────────────────────────────────────────────────
-function showAnalysisOverlay(videoUrl) {
-  // Remove existing overlay
+// ── Overlay UI ────────────────────────────────────────────────────────────────
+function showOverlay() {
   document.getElementById('authrix-overlay')?.remove();
 
   const overlay = document.createElement('div');
@@ -51,11 +122,7 @@ function showAnalysisOverlay(videoUrl) {
         <button id="authrix-close">✕</button>
       </div>
 
-      <div id="authrix-url-bar">
-        <span id="authrix-url-text">${truncateUrl(videoUrl)}</span>
-      </div>
-
-      <!-- Loading state -->
+      <!-- Loading -->
       <div id="authrix-loading">
         <div id="authrix-radar">
           <div class="authrix-ring r1"></div>
@@ -63,17 +130,17 @@ function showAnalysisOverlay(videoUrl) {
           <div class="authrix-ring r3"></div>
           <div id="authrix-radar-dot"></div>
         </div>
-        <div id="authrix-loading-text">Initializing analysis...</div>
+        <div id="authrix-loading-text">Initializing capture...</div>
         <div id="authrix-steps">
-          <div class="authrix-step" id="as0">🎬 Extracting frames</div>
-          <div class="authrix-step" id="as1">👤 Detecting faces</div>
+          <div class="authrix-step" id="as0">🎬 Recording tab stream</div>
+          <div class="authrix-step" id="as1">🖼️ Extracting frames</div>
           <div class="authrix-step" id="as2">🧠 Running AI models</div>
           <div class="authrix-step" id="as3">📊 Generating report</div>
         </div>
-        <div id="authrix-note">⚠ Large videos may take 15-30s</div>
+        <div id="authrix-note">Recording ~12 seconds of video for analysis</div>
       </div>
 
-      <!-- Result state -->
+      <!-- Result -->
       <div id="authrix-result" style="display:none;">
         <div id="authrix-verdict-row">
           <div id="authrix-badge"></div>
@@ -89,12 +156,12 @@ function showAnalysisOverlay(videoUrl) {
           <span id="authrix-audio-label"></span>
         </div>
         <div id="authrix-actions">
-          <button id="authrix-reanalyze">↺ Re-analyze</button>
+          <button id="authrix-reanalyze">↺ Capture Again</button>
           <button id="authrix-open-app">Open Authrix App ↗</button>
         </div>
       </div>
 
-      <!-- Error state -->
+      <!-- Error -->
       <div id="authrix-error" style="display:none;">
         <div id="authrix-error-icon">⚠</div>
         <div id="authrix-error-msg"></div>
@@ -106,177 +173,126 @@ function showAnalysisOverlay(videoUrl) {
 
   document.body.appendChild(overlay);
 
-  // Wire close
   document.getElementById('authrix-close').onclick = () => overlay.remove();
   overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
-
-  // Start analysis
-  startAnalysis(videoUrl);
+  document.getElementById('authrix-open-app').onclick = () =>
+    window.open('http://localhost:8000', '_blank');
+  document.getElementById('authrix-reanalyze').onclick = () =>
+    chrome.runtime.sendMessage({ type: 'START_CAPTURE' });
+  document.getElementById('authrix-retry').onclick = () =>
+    chrome.runtime.sendMessage({ type: 'START_CAPTURE' });
 }
 
-// ── Run analysis ──────────────────────────────────────────────────────────────
-async function startAnalysis(videoUrl) {
-  showState('loading');
-  animateSteps();
+function updateLoadingText(text) {
+  const el = document.getElementById('authrix-loading-text');
+  if (el) el.textContent = text;
+}
 
-  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');
-
-    const isYouTube = videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be');
-
-    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,
-      });
-    }
+function activateStep(idx) {
+  document.querySelectorAll('.authrix-step').forEach((el, i) => {
+    el.classList.toggle('active', i === idx);
+    el.classList.toggle('done',   i < idx);
+  });
+}
 
-    stopStepAnimation();
-    if (!response.ok) throw new Error(response.error || 'Analysis failed');
-    renderResult(response.result, videoUrl);
-  } catch (err) {
-    stopStepAnimation();
-    showError(err.message, videoUrl);
-  }
+function showState(state) {
+  const loading = document.getElementById('authrix-loading');
+  const result  = document.getElementById('authrix-result');
+  const error   = document.getElementById('authrix-error');
+  if (loading) loading.style.display = state === 'loading' ? 'flex' : 'none';
+  if (result)  result.style.display  = state === 'result'  ? 'block' : 'none';
+  if (error)   error.style.display   = state === 'error'   ? 'flex'  : 'none';
 }
 
-// ── Render result ─────────────────────────────────────────────────────────────
-function renderResult(data, videoUrl) {
+function renderResult(data) {
+  activateStep(3);
+
   const isFake = data.result === 'FAKE';
   const conf   = data.confidence || 0;
   const color  = isFake ? '#ff4466' : '#00ff9c';
 
-  // Badge
   const badge = document.getElementById('authrix-badge');
-  badge.textContent = isFake ? '⚠' : '✓';
-  badge.style.color = color;
-  badge.style.borderColor = color;
-  badge.style.boxShadow = `0 0 16px ${color}44`;
+  if (badge) {
+    badge.textContent   = isFake ? '⚠' : '✓';
+    badge.style.color   = color;
+    badge.style.borderColor = color;
+    badge.style.boxShadow   = `0 0 16px ${color}44`;
+  }
 
-  // Verdict
   const vt = document.getElementById('authrix-verdict-text');
-  vt.textContent = isFake ? 'DEEPFAKE DETECTED' : 'AUTHENTIC VIDEO';
-  vt.style.color = color;
+  if (vt) { vt.textContent = isFake ? 'DEEPFAKE DETECTED' : 'AUTHENTIC VIDEO'; vt.style.color = color; }
 
-  // Confidence
-  document.getElementById('authrix-conf').textContent = conf + '%';
-  document.getElementById('authrix-conf').style.color = color;
+  const cv = document.getElementById('authrix-conf');
+  if (cv) { cv.textContent = conf + '%'; cv.style.color = color; }
 
-  // Bar
   const bar = document.getElementById('authrix-conf-bar');
-  bar.style.background = isFake
-    ? 'linear-gradient(90deg,#880022,#ff4466)'
-    : 'linear-gradient(90deg,#006633,#00ff9c)';
-  bar.style.boxShadow = `0 0 8px ${color}66`;
-  setTimeout(() => { bar.style.width = conf + '%'; }, 80);
+  if (bar) {
+    bar.style.background = isFake
+      ? 'linear-gradient(90deg,#880022,#ff4466)'
+      : 'linear-gradient(90deg,#006633,#00ff9c)';
+    bar.style.boxShadow = `0 0 8px ${color}66`;
+    setTimeout(() => { bar.style.width = conf + '%'; }, 80);
+  }
 
-  // Details (first 3)
   const dl = document.getElementById('authrix-details');
-  dl.innerHTML = (data.details || []).slice(0, 3).map(d =>
-    `<div class="authrix-detail" style="border-left-color:${color};">${escHtml(d)}</div>`
-  ).join('');
+  if (dl) {
+    dl.innerHTML = (data.details || []).slice(0, 3).map(d =>
+      `<div class="authrix-detail" style="border-left-color:${color};">${escHtml(d)}</div>`
+    ).join('');
+  }
 
-  // Audio
   const audioRow = document.getElementById('authrix-audio-row');
-  if (data.audio?.available) {
+  if (audioRow && data.audio?.available) {
     const isAI = data.audio.result === 'AI_VOICE';
     const isMismatch = data.audio.result === 'AV_MISMATCH';
     const aColor = (isAI || isMismatch) ? '#ff4466' : '#00ff9c';
-    document.getElementById('authrix-audio-icon').textContent =
-      (isAI || isMismatch) ? '🤖' : '🎙️';
-    document.getElementById('authrix-audio-label').textContent =
-      isMismatch ? 'AV Mismatch — face-swap detected' :
-      isAI ? `AI Voice (${data.audio.confidence}%)` :
-      `Human Voice (${data.audio.confidence}%)`;
-    document.getElementById('authrix-audio-label').style.color = aColor;
+    const audioIcon  = document.getElementById('authrix-audio-icon');
+    const audioLabel = document.getElementById('authrix-audio-label');
+    if (audioIcon)  audioIcon.textContent  = (isAI || isMismatch) ? '🤖' : '🎙️';
+    if (audioLabel) {
+      audioLabel.textContent = isMismatch
+        ? 'AV Mismatch — face-swap detected'
+        : isAI ? `AI Voice (${data.audio.confidence}%)`
+               : `Human Voice (${data.audio.confidence}%)`;
+      audioLabel.style.color = aColor;
+    }
     audioRow.style.display = 'flex';
   }
 
-  // Actions
-  document.getElementById('authrix-reanalyze').onclick = () => startAnalysis(videoUrl);
-  document.getElementById('authrix-open-app').onclick  = () => window.open('http://localhost:8000', '_blank');
-
   showState('result');
 }
 
-// ── Show error ────────────────────────────────────────────────────────────────
-function showError(message, videoUrl) {
-  const isOffline = message === 'SERVER_OFFLINE';
-  document.getElementById('authrix-error-msg').textContent =
-    isOffline ? 'Authrix server is not running' : message;
-  document.getElementById('authrix-error-hint').textContent =
-    isOffline
-      ? 'Start the server: cd backend && python -m uvicorn main:app --port 8000'
-      : 'The video may be DRM-protected or require authentication.';
-  document.getElementById('authrix-retry').onclick = () => startAnalysis(videoUrl);
+function showError(message) {
+  const isOffline = message?.includes('fetch') || message?.includes('Failed to fetch');
+  const errMsg  = document.getElementById('authrix-error-msg');
+  const errHint = document.getElementById('authrix-error-hint');
+  if (errMsg)  errMsg.textContent  = isOffline ? 'Authrix server is not running' : (message || 'Unknown error');
+  if (errHint) errHint.textContent = isOffline
+    ? 'Run: cd backend && python -m uvicorn main:app --port 8000'
+    : 'Make sure the video is playing before capturing.';
   showState('error');
 }
 
-// ── State management ──────────────────────────────────────────────────────────
-function showState(state) {
-  document.getElementById('authrix-loading').style.display = state === 'loading' ? 'flex' : 'none';
-  document.getElementById('authrix-result').style.display  = state === 'result'  ? 'block' : 'none';
-  document.getElementById('authrix-error').style.display   = state === 'error'   ? 'flex' : 'none';
+// ── Utilities ─────────────────────────────────────────────────────────────────
+function getSupportedMimeType() {
+  const types = [
+    'video/webm;codecs=vp9,opus',
+    'video/webm;codecs=vp8,opus',
+    'video/webm',
+    'video/mp4',
+  ];
+  return types.find(t => MediaRecorder.isTypeSupported(t)) || 'video/webm';
 }
 
-// ── Step animation ────────────────────────────────────────────────────────────
-let _stepTimers = [];
-const _stepDelays = [0, 2000, 5000, 9000];
-const _stepMsgs = [
-  'Downloading video frames...',
-  'Detecting facial regions...',
-  'Running ViT ensemble inference...',
-  'Compiling authenticity report...',
-];
-
-function animateSteps() {
-  _stepTimers = [];
-  _stepDelays.forEach((delay, i) => {
-    const t = setTimeout(() => {
-      document.querySelectorAll('.authrix-step').forEach((el, j) => {
-        el.classList.toggle('active', j === i);
-        el.classList.toggle('done', j < i);
-      });
-      document.getElementById('authrix-loading-text').textContent = _stepMsgs[i];
-    }, delay);
-    _stepTimers.push(t);
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload  = () => resolve(reader.result.split(',')[1]);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
   });
 }
 
-function stopStepAnimation() {
-  _stepTimers.forEach(clearTimeout);
-  _stepTimers = [];
-}
-
-// ── Toast notification ────────────────────────────────────────────────────────
-function showToast(msg, type = 'info') {
-  const t = document.createElement('div');
-  t.className = 'authrix-toast authrix-toast-' + type;
-  t.textContent = msg;
-  document.body.appendChild(t);
-  setTimeout(() => t.remove(), 3500);
-}
-
-// ── Utilities ─────────────────────────────────────────────────────────────────
-function truncateUrl(url) {
-  try {
-    const u = new URL(url);
-    const path = u.pathname.split('/').pop() || u.hostname;
-    return u.hostname + '/…/' + path.slice(0, 30);
-  } catch {
-    return url.slice(0, 50);
-  }
-}
-
 function escHtml(s) {
   return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }

extension/manifest.json

@@ -1,20 +1,20 @@
 {
   "manifest_version": 3,
   "name": "Authrix — Deepfake Detector",
-  "version": "1.0.0",
-  "description": "Detect deepfake videos on any webpage using AI. Right-click any video or use the toolbar popup.",
+  "version": "2.0.0",
+  "description": "Detect deepfake videos on any webpage. Captures tab stream directly — no download needed. Works on YouTube, Twitter, any platform.",
 
   "permissions": [
     "contextMenus",
     "activeTab",
     "scripting",
     "storage",
-    "notifications"
+    "tabCapture",
+    "tabs"
   ],
 
   "host_permissions": [
-    "http://localhost:8000/*",
-    "<all_urls>"
+    "http://localhost:8000/*"
   ],
 
   "background": {
@@ -31,7 +31,7 @@
 
   "action": {
     "default_popup": "popup.html",
-    "default_title": "Authrix Deepfake Detector",
+    "default_title": "Authrix — Analyze this video",
     "default_icon": {
       "16":  "icons/icon16.png",
       "48":  "icons/icon48.png",

extension/popup.html

@@ -2,19 +2,17 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Authrix</title>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      width: 340px;
+      width: 320px;
       background: #0c150f;
       color: #dae5da;
       font-family: 'Segoe UI', system-ui, sans-serif;
       font-size: 13px;
     }
 
-    /* Header */
     .header {
       padding: 14px 16px 12px;
       border-bottom: 1px solid rgba(0,255,156,0.12);
@@ -32,8 +30,8 @@
       animation: pulse 2s ease-in-out infinite;
     }
     @keyframes pulse {
-      0%,100% { opacity:1; box-shadow: 0 0 8px #00ff9c; }
-      50%      { opacity:0.4; box-shadow: none; }
+      0%,100% { opacity:1; box-shadow:0 0 8px #00ff9c; }
+      50%      { opacity:0.4; box-shadow:none; }
     }
     .status-badge {
       font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
@@ -46,105 +44,81 @@
       color: #ff4466; background: rgba(255,68,102,0.08);
     }
 
-    /* Body */
     .body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
 
-    /* Current page section */
-    .section-label {
-      font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
-      color: rgba(255,255,255,0.3); text-transform: uppercase; margin-bottom: 8px;
-    }
-
-    .page-video-card {
+    /* Page info */
+    .page-card {
       background: rgba(255,255,255,0.03);
       border: 1px solid rgba(255,255,255,0.07);
-      border-radius: 8px; padding: 12px;
+      border-radius: 8px; padding: 10px 12px;
       display: flex; align-items: center; gap: 10px;
     }
-    .page-video-icon { font-size: 20px; flex-shrink: 0; }
-    .page-video-info { flex: 1; min-width: 0; }
-    .page-video-title {
+    .page-icon { font-size: 18px; flex-shrink: 0; }
+    .page-title {
       font-size: 11px; font-weight: 600; color: #dae5da;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
-    .page-video-sub { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; }
+    .page-sub { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; }
 
-    .btn-analyze-page {
-      width: 100%; padding: 11px;
+    /* Main capture button */
+    .btn-capture {
+      width: 100%; padding: 14px;
       background: linear-gradient(135deg, #00ff9c, #00cc6a);
-      color: #002110; border: none; border-radius: 8px;
-      font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
+      color: #002110; border: none; border-radius: 10px;
+      font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
       cursor: pointer; transition: all 0.2s;
-      box-shadow: 0 0 20px rgba(0,255,156,0.25);
-    }
-    .btn-analyze-page:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 0 30px rgba(0,255,156,0.4);
+      box-shadow: 0 0 24px rgba(0,255,156,0.3);
+      display: flex; align-items: center; justify-content: center; gap: 8px;
     }
-    .btn-analyze-page:disabled {
-      background: rgba(255,255,255,0.08);
-      color: rgba(255,255,255,0.2);
-      cursor: not-allowed; transform: none;
-      box-shadow: none;
+    .btn-capture:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 0 36px rgba(0,255,156,0.5);
     }
+    .btn-capture:active { transform: scale(0.98); }
 
-    /* URL input */
-    .url-input-wrap {
-      display: flex; gap: 6px;
+    /* How it works */
+    .how-it-works {
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.05);
+      border-radius: 8px; padding: 10px 12px;
     }
-    .url-input {
-      flex: 1; padding: 9px 12px;
-      background: rgba(255,255,255,0.05);
-      border: 1px solid rgba(255,255,255,0.1);
-      border-radius: 7px; color: #dae5da;
-      font-size: 11px; font-family: monospace;
-      outline: none; transition: border-color 0.2s;
-    }
-    .url-input:focus { border-color: rgba(0,255,156,0.4); }
-    .url-input::placeholder { color: rgba(255,255,255,0.2); }
-
-    .btn-go {
-      padding: 9px 14px;
-      background: rgba(0,255,156,0.1);
-      border: 1px solid rgba(0,255,156,0.3);
-      color: #00ff9c; border-radius: 7px;
-      font-size: 11px; font-weight: 700;
-      cursor: pointer; transition: all 0.2s; white-space: nowrap;
+    .how-label {
+      font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
+      color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 8px;
     }
-    .btn-go:hover { background: rgba(0,255,156,0.18); }
-
-    /* Divider */
-    .divider {
+    .how-step {
       display: flex; align-items: center; gap: 8px;
-      color: rgba(255,255,255,0.15); font-size: 10px;
+      font-size: 10px; color: rgba(255,255,255,0.4);
+      padding: 3px 0;
     }
-    .divider::before, .divider::after {
-      content: ''; flex: 1; height: 1px;
-      background: rgba(255,255,255,0.08);
+    .how-step-num {
+      width: 16px; height: 16px; border-radius: 50%;
+      background: rgba(0,255,156,0.1); border: 1px solid rgba(0,255,156,0.2);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 9px; font-weight: 700; color: #00ff9c; flex-shrink: 0;
     }
 
     /* Last result */
     #last-result {
       background: rgba(255,255,255,0.03);
       border: 1px solid rgba(255,255,255,0.07);
-      border-radius: 8px; padding: 12px;
+      border-radius: 8px; padding: 10px 12px;
       display: none;
     }
-    .result-row {
-      display: flex; align-items: center; justify-content: space-between;
-    }
-    .result-verdict {
-      font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
+    .result-label {
+      font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
+      color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 6px;
     }
-    .result-conf { font-size: 18px; font-weight: 700; font-family: monospace; }
+    .result-row { display: flex; align-items: center; justify-content: space-between; }
+    .result-verdict { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
+    .result-conf { font-size: 16px; font-weight: 700; font-family: monospace; }
     .result-bar-wrap {
-      height: 4px; background: rgba(255,255,255,0.06);
-      border-radius: 99px; overflow: hidden; margin: 8px 0;
+      height: 3px; background: rgba(255,255,255,0.06);
+      border-radius: 99px; overflow: hidden; margin: 6px 0;
     }
     .result-bar { height: 100%; border-radius: 99px; transition: width 0.8s ease; }
-    .result-file { font-size: 10px; color: rgba(255,255,255,0.25); font-family: monospace; }
+    .result-file { font-size: 9px; color: rgba(255,255,255,0.2); font-family: monospace; }
 
-    /* Footer */
     .footer {
       padding: 10px 16px;
       border-top: 1px solid rgba(255,255,255,0.05);
@@ -152,8 +126,7 @@
     }
     .footer-link {
       font-size: 10px; color: rgba(0,255,156,0.5);
-      text-decoration: none; letter-spacing: 0.08em;
-      transition: color 0.2s;
+      text-decoration: none; letter-spacing: 0.06em; transition: color 0.2s;
     }
     .footer-link:hover { color: #00ff9c; }
     .model-info { font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: 0.06em; }
@@ -161,7 +134,6 @@
 </head>
 <body>
 
-  <!-- Header -->
   <div class="header">
     <div class="logo">
       <div class="logo-dot"></div>
@@ -170,40 +142,33 @@
     <div id="statusBadge" class="status-badge offline">OFFLINE</div>
   </div>
 
-  <!-- Body -->
   <div class="body">
 
-    <!-- Analyze current page -->
-    <div>
-      <div class="section-label">Current Page</div>
-      <div class="page-video-card">
-        <div class="page-video-icon">🎬</div>
-        <div class="page-video-info">
-          <div class="page-video-title" id="pageTitle">Detecting videos...</div>
-          <div class="page-video-sub" id="pageSub">Scanning page</div>
-        </div>
+    <!-- Current page -->
+    <div class="page-card">
+      <div class="page-icon">🎬</div>
+      <div style="flex:1;min-width:0;">
+        <div class="page-title" id="pageTitle">Loading...</div>
+        <div class="page-sub" id="pageSub">Detecting page</div>
       </div>
     </div>
 
-    <button class="btn-analyze-page" id="btnAnalyzePage" disabled>
-      ▶ &nbsp;Analyze Video on This Page
+    <!-- Main button -->
+    <button class="btn-capture" id="btnCapture">
+      <span>⬤</span> Capture &amp; Analyze Video
     </button>
 
-    <div class="divider">OR</div>
-
-    <!-- Manual URL -->
-    <div>
-      <div class="section-label">Paste Video URL</div>
-      <div class="url-input-wrap">
-        <input class="url-input" id="urlInput" type="url"
-               placeholder="https://example.com/video.mp4"/>
-        <button class="btn-go" id="btnGo">Analyze</button>
-      </div>
+    <!-- How it works -->
+    <div class="how-it-works">
+      <div class="how-label">How it works</div>
+      <div class="how-step"><div class="how-step-num">1</div>Records 12s of the playing video</div>
+      <div class="how-step"><div class="how-step-num">2</div>Sends to local AI for analysis</div>
+      <div class="how-step"><div class="how-step-num">3</div>Shows FAKE / REAL verdict</div>
     </div>
 
     <!-- Last result -->
     <div id="last-result">
-      <div class="section-label" style="margin-bottom:8px;">Last Result</div>
+      <div class="result-label">Last Result</div>
       <div class="result-row">
         <div id="lastVerdict" class="result-verdict">—</div>
         <div id="lastConf" class="result-conf">—</div>
@@ -216,7 +181,6 @@
 
   </div>
 
-  <!-- Footer -->
   <div class="footer">
     <a class="footer-link" href="http://localhost:8000" target="_blank">Open Full App ↗</a>
     <div class="model-info" id="modelInfo">VIT ENSEMBLE</div>

extension/popup.js

@@ -1,27 +1,18 @@
 /**
- * Authrix Extension — Popup Script
- * Auto-detects and auto-analyzes videos on the current page.
+ * Authrix Extension — Popup Script v2
+ * Simple popup: check health, show status, trigger capture on click.
  */
 
 const API_BASE = 'http://localhost:8000';
 
-// ── Init ──────────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', async () => {
-  const [healthOk, found] = await Promise.all([checkHealth(), detectPageVideo()]);
+  await checkHealth();
   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);
-    }
-  }
+  updatePageInfo();
 });
 
-// ── Health check — returns true if ready ─────────────────────────────────────
+// ── Health check ──────────────────────────────────────────────────────────────
 async function checkHealth() {
   const badge     = document.getElementById('statusBadge');
   const modelInfo = document.getElementById('modelInfo');
@@ -34,7 +25,7 @@ async function checkHealth() {
       modelInfo.textContent = (d.model || 'VIT ENSEMBLE').toUpperCase().slice(0, 22);
       return true;
     }
-    badge.textContent = 'LOADING';
+    badge.textContent = 'LOADING...';
     return false;
   } catch {
     badge.textContent = 'OFFLINE';
@@ -43,163 +34,35 @@ async function checkHealth() {
   }
 }
 
-// ── Detect video on current tab — returns true if found ──────────────────────
-async function detectPageVideo() {
-  const btn   = document.getElementById('btnAnalyzePage');
+// ── Update page info ──────────────────────────────────────────────────────────
+async function updatePageInfo() {
   const title = document.getElementById('pageTitle');
   const sub   = document.getElementById('pageSub');
-
   try {
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-    if (!tab?.id) return false;
-
-    const results = await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: detectVideosOnPage,
-    });
-
-    const found = results?.[0]?.result;
-    if (found?.url) {
-      title.textContent = found.label || found.title || 'Video detected';
-      sub.textContent   = truncateUrl(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;
-      return false;
+    if (tab?.title) {
+      title.textContent = tab.title.slice(0, 45);
+      sub.textContent   = new URL(tab.url).hostname;
     }
   } catch {
-    title.textContent = 'Cannot access this page';
-    sub.textContent   = 'Extension pages are restricted';
-    return false;
-  }
-}
-
-// ── Runs in page context — comprehensive video detection ─────────────────────
-function detectVideosOnPage() {
-  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) {
-    // 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' };
-      }
-    }
+    title.textContent = 'Current page';
+    sub.textContent   = 'Ready to capture';
   }
-
-  // ── 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() {
-  document.getElementById('btnAnalyzePage').addEventListener('click', async () => {
-    const url = document.getElementById('btnAnalyzePage').dataset.url;
-    if (url) await injectAndAnalyze(url);
-  });
-
-  document.getElementById('btnGo').addEventListener('click', async () => {
-    const url = document.getElementById('urlInput').value.trim();
-    if (url) await injectAndAnalyze(url);
-  });
-
-  document.getElementById('urlInput').addEventListener('keydown', async (e) => {
-    if (e.key === 'Enter') {
-      const url = e.target.value.trim();
-      if (url) await injectAndAnalyze(url);
-    }
-  });
-}
-
-// ── Inject overlay and trigger analysis ──────────────────────────────────────
-async function injectAndAnalyze(url) {
-  try {
+  document.getElementById('btnCapture').addEventListener('click', async () => {
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
     if (!tab?.id) return;
 
-    await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: (videoUrl) => {
-        if (typeof window.__authrixAnalyze === 'function') {
-          window.__authrixAnalyze(videoUrl);
-        }
-      },
-      args: [url],
-    });
-
+    // Trigger capture from background (needs to be initiated from background for tabCapture)
+    await chrome.runtime.sendMessage({ type: 'START_CAPTURE', tabId: tab.id });
     window.close(); // close popup so overlay is visible
-  } catch (err) {
-    console.error('[Authrix popup]', err);
-  }
+  });
 }
 
-// ── Load last result from storage ────────────────────────────────────────────
+// ── Load last result ──────────────────────────────────────────────────────────
 function loadLastResult() {
   chrome.storage.local.get('lastResult', ({ lastResult }) => {
     if (!lastResult) return;
@@ -213,7 +76,7 @@ function loadLastResult() {
     document.getElementById('lastVerdict').style.color = color;
     document.getElementById('lastConf').textContent    = lastResult.confidence + '%';
     document.getElementById('lastConf').style.color    = color;
-    document.getElementById('lastFile').textContent    = lastResult.file || '';
+    document.getElementById('lastFile').textContent    = lastResult.file || 'Tab capture';
 
     const bar = document.getElementById('lastBar');
     bar.style.background = isFake
@@ -222,12 +85,3 @@ function loadLastResult() {
     setTimeout(() => { bar.style.width = lastResult.confidence + '%'; }, 80);
   });
 }
-
-function truncateUrl(url) {
-  try {
-    const u = new URL(url);
-    return u.hostname + u.pathname.slice(0, 28);
-  } catch {
-    return url.slice(0, 45);
-  }
-}