feat: Chrome/Edge browser extension

- Manifest V3 extension with context menu, toolbar popup, content script
- Right-click any video → Analyze with Authrix
- Toolbar popup: auto-detects page videos, manual URL input, last result
- Content script overlay: radar loading animation, verdict display,
confidence bar, insight cards, audio result, re-analyze button
- Background service worker: fetches video URL, sends to localhost:8000
- AV_MISMATCH shown as DEEPFAKE in overlay
- Error state with server offline detection and instructions
- Icons generated (16/48/128px)

extension/README.md

@@ -0,0 +1,47 @@
+# Authrix Browser Extension
+
+Detect deepfake videos on any webpage without downloading them.
+
+## Install (Chrome / Edge / Brave)
+
+1. Open `chrome://extensions`
+2. Enable **Developer Mode** (top right toggle)
+3. Click **Load unpacked**
+4. Select this `extension/` folder
+5. The Authrix icon appears in your toolbar
+
+## Requirements
+
+The Authrix backend must be running locally:
+```bash
+cd backend
+python -m uvicorn main:app --host 0.0.0.0 --port 8000
+```
+
+## Usage
+
+### Method 1 — Right-click any video
+Right-click on a video element on any webpage → **"🔍 Analyze with Authrix"**
+
+### Method 2 — Toolbar popup
+Click the Authrix icon in the toolbar:
+- Auto-detects videos on the current page
+- Paste any direct video URL manually
+- Shows last analysis result
+
+### Method 3 — Right-click a link
+Right-click any link to a video file → **"🔍 Analyze video URL with Authrix"**
+
+## How it works
+
+1. Extension captures the video URL from the page
+2. Background service worker fetches the video and sends it to `localhost:8000/analyze`
+3. FastAPI backend runs the full 5-agent pipeline (visual + audio)
+4. Result overlay appears on the page with verdict, confidence, and insights
+
+## Limitations
+
+- **DRM-protected videos** (Netflix, Disney+) cannot be analyzed
+- **YouTube** — the extension detects the page URL but YouTube's video streams require yt-dlp; direct URL analysis works for non-DRM videos
+- Backend must be running on `localhost:8000`
+- Large videos (>100MB) may time out

extension/background.js

@@ -0,0 +1,129 @@
+/**
+ * Authrix Extension — Background Service Worker
+ * Handles context menu, coordinates analysis requests
+ */
+
+const API_BASE = 'http://localhost:8000';
+
+// ── Create context menu on install ────────────────────────────────────────────
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'authrix-analyze',
+    title: '🔍 Analyze with Authrix',
+    contexts: ['video', 'link', 'page'],
+  });
+  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],
+      });
+    }
+  }
+});
+
+// ── Message handler (from content script / popup) ─────────────────────────────
+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
+  }
+
+  if (msg.type === 'CHECK_HEALTH') {
+    fetch(`${API_BASE}/health`)
+      .then(r => r.json())
+      .then(d => sendResponse({ ok: true, data: d }))
+      .catch(() => sendResponse({ ok: false }));
+    return true;
+  }
+
+  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 }));
+    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 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 blob to FastAPI backend ──────────────────────────────────────────────
+async function sendToBackend(blob, filename) {
+  const fd = new FormData();
+  fd.append('file', blob, filename);
+
+  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

@@ -0,0 +1,276 @@
+/**
+ * Authrix Extension — Content Script
+ * Injected into every page. Handles overlay UI and video detection.
+ */
+
+// ── Register global trigger ───────────────────────────────────────────────────
+window.__authrixAnalyze = function(hintUrl) {
+  const url = hintUrl || findBestVideoUrl();
+  if (!url) {
+    showToast('⚠ No video found on this page', 'warn');
+    return;
+  }
+  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;
+  }
+
+  // 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]}`;
+
+  // 3. Twitter/X video
+  const twitterVideo = document.querySelector('video[src*="video.twimg.com"]');
+  if (twitterVideo?.src) return twitterVideo.src;
+
+  return null;
+}
+
+// ── Main overlay ──────────────────────────────────────────────────────────────
+function showAnalysisOverlay(videoUrl) {
+  // Remove existing overlay
+  document.getElementById('authrix-overlay')?.remove();
+
+  const overlay = document.createElement('div');
+  overlay.id = 'authrix-overlay';
+  overlay.innerHTML = `
+    <div id="authrix-panel">
+      <div id="authrix-header">
+        <div id="authrix-logo">
+          <span id="authrix-logo-icon">◉</span>
+          <span>AUTHRIX AI</span>
+        </div>
+        <button id="authrix-close">✕</button>
+      </div>
+
+      <div id="authrix-url-bar">
+        <span id="authrix-url-text">${truncateUrl(videoUrl)}</span>
+      </div>
+
+      <!-- Loading state -->
+      <div id="authrix-loading">
+        <div id="authrix-radar">
+          <div class="authrix-ring r1"></div>
+          <div class="authrix-ring r2"></div>
+          <div class="authrix-ring r3"></div>
+          <div id="authrix-radar-dot"></div>
+        </div>
+        <div id="authrix-loading-text">Initializing analysis...</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="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>
+
+      <!-- Result state -->
+      <div id="authrix-result" style="display:none;">
+        <div id="authrix-verdict-row">
+          <div id="authrix-badge"></div>
+          <div id="authrix-verdict-text"></div>
+          <div id="authrix-conf"></div>
+        </div>
+        <div id="authrix-conf-bar-wrap">
+          <div id="authrix-conf-bar"></div>
+        </div>
+        <div id="authrix-details"></div>
+        <div id="authrix-audio-row" style="display:none;">
+          <span id="authrix-audio-icon">🎙️</span>
+          <span id="authrix-audio-label"></span>
+        </div>
+        <div id="authrix-actions">
+          <button id="authrix-reanalyze">↺ Re-analyze</button>
+          <button id="authrix-open-app">Open Authrix App ↗</button>
+        </div>
+      </div>
+
+      <!-- Error state -->
+      <div id="authrix-error" style="display:none;">
+        <div id="authrix-error-icon">⚠</div>
+        <div id="authrix-error-msg"></div>
+        <div id="authrix-error-hint"></div>
+        <button id="authrix-retry">↺ Retry</button>
+      </div>
+    </div>
+  `;
+
+  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);
+}
+
+// ── Run analysis ──────────────────────────────────────────────────────────────
+async function startAnalysis(videoUrl) {
+  showState('loading');
+  animateSteps();
+
+  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');
+    }
+
+    // Send URL to background for fetching + analysis
+    const 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();
+    showError(err.message, videoUrl);
+  }
+}
+
+// ── Render result ─────────────────────────────────────────────────────────────
+function renderResult(data, videoUrl) {
+  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`;
+
+  // Verdict
+  const vt = document.getElementById('authrix-verdict-text');
+  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;
+
+  // 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);
+
+  // 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('');
+
+  // Audio
+  const audioRow = document.getElementById('authrix-audio-row');
+  if (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;
+    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);
+  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';
+}
+
+// ── 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 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/generate_icons.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- Run this file in a browser to generate icons, then save the PNGs -->
+<html><body>
+<canvas id="c16" width="16" height="16"></canvas>
+<canvas id="c48" width="48" height="48"></canvas>
+<canvas id="c128" width="128" height="128"></canvas>
+<script>
+function drawIcon(canvas) {
+  const ctx = canvas.getContext('2d');
+  const s = canvas.width;
+  const cx = s/2, cy = s/2, r = s*0.42;
+
+  // Background
+  ctx.fillStyle = '#0c150f';
+  ctx.beginPath();
+  ctx.roundRect(0, 0, s, s, s*0.18);
+  ctx.fill();
+
+  // Outer ring
+  ctx.strokeStyle = 'rgba(0,255,156,0.4)';
+  ctx.lineWidth = s*0.04;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI*2);
+  ctx.stroke();
+
+  // Inner dot
+  ctx.fillStyle = '#00ff9c';
+  ctx.shadowColor = '#00ff9c';
+  ctx.shadowBlur = s*0.15;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r*0.35, 0, Math.PI*2);
+  ctx.fill();
+
+  // Cross-hair lines
+  ctx.strokeStyle = 'rgba(0,255,156,0.6)';
+  ctx.lineWidth = s*0.03;
+  ctx.shadowBlur = 0;
+  ctx.beginPath();
+  ctx.moveTo(cx - r*0.7, cy); ctx.lineTo(cx - r*0.45, cy);
+  ctx.moveTo(cx + r*0.45, cy); ctx.lineTo(cx + r*0.7, cy);
+  ctx.moveTo(cx, cy - r*0.7); ctx.lineTo(cx, cy - r*0.45);
+  ctx.moveTo(cx, cy + r*0.45); ctx.lineTo(cx, cy + r*0.7);
+  ctx.stroke();
+}
+
+['c16','c48','c128'].forEach(id => {
+  const c = document.getElementById(id);
+  drawIcon(c);
+  const link = document.createElement('a');
+  link.download = `icon${c.width}.png`;
+  link.href = c.toDataURL();
+  link.textContent = `Download icon${c.width}.png`;
+  link.style.display = 'block';
+  link.style.margin = '8px';
+  document.body.appendChild(link);
+});
+</script>
+</body></html>

extension/manifest.json

@@ -0,0 +1,47 @@
+{
+  "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.",
+
+  "permissions": [
+    "contextMenus",
+    "activeTab",
+    "scripting",
+    "storage",
+    "notifications"
+  ],
+
+  "host_permissions": [
+    "http://localhost:8000/*",
+    "<all_urls>"
+  ],
+
+  "background": {
+    "service_worker": "background.js"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["overlay.css"]
+    }
+  ],
+
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "Authrix Deepfake Detector",
+    "default_icon": {
+      "16":  "icons/icon16.png",
+      "48":  "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+
+  "icons": {
+    "16":  "icons/icon16.png",
+    "48":  "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}

extension/overlay.css

@@ -0,0 +1,347 @@
+/* Authrix Extension — Overlay Styles */
+
+#authrix-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  animation: authrix-fade-in 0.2s ease;
+}
+
+@keyframes authrix-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+#authrix-panel {
+  background: #0c150f;
+  border: 1px solid rgba(0, 255, 156, 0.25);
+  border-radius: 14px;
+  width: 420px;
+  max-width: calc(100vw - 32px);
+  box-shadow: 0 0 60px rgba(0, 255, 156, 0.12), 0 24px 48px rgba(0,0,0,0.6);
+  overflow: hidden;
+  animation: authrix-slide-up 0.25s ease;
+}
+
+@keyframes authrix-slide-up {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* ── Header ── */
+#authrix-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(0, 255, 156, 0.1);
+  background: rgba(0, 255, 156, 0.04);
+}
+
+#authrix-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: #00ff9c;
+  text-shadow: 0 0 10px rgba(0,255,156,0.5);
+}
+
+#authrix-logo-icon {
+  font-size: 18px;
+  animation: authrix-pulse 2s ease-in-out infinite;
+}
+
+@keyframes authrix-pulse {
+  0%,100% { opacity: 1; text-shadow: 0 0 8px #00ff9c; }
+  50%      { opacity: 0.5; text-shadow: none; }
+}
+
+#authrix-close {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.3);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: color 0.2s, background 0.2s;
+  line-height: 1;
+}
+#authrix-close:hover { color: #ff4466; background: rgba(255,68,102,0.1); }
+
+/* ── URL bar ── */
+#authrix-url-bar {
+  padding: 8px 18px;
+  background: rgba(255,255,255,0.03);
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+#authrix-url-text {
+  font-size: 10px;
+  color: rgba(255,255,255,0.3);
+  font-family: monospace;
+  letter-spacing: 0.03em;
+}
+
+/* ── Loading ── */
+#authrix-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 28px 20px 24px;
+  gap: 16px;
+}
+
+#authrix-radar {
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.authrix-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid rgba(0,255,156,0.2);
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+}
+.r1 { width: 80px; height: 80px; }
+.r2 { width: 56px; height: 56px; border-color: rgba(0,255,156,0.3); }
+.r3 { width: 32px; height: 32px; border-color: rgba(0,255,156,0.5); }
+
+#authrix-radar-dot {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  width: 10px; height: 10px;
+  border-radius: 50%;
+  background: #00ff9c;
+  box-shadow: 0 0 12px #00ff9c;
+  animation: authrix-radar-spin 2s linear infinite;
+}
+
+@keyframes authrix-radar-spin {
+  0%   { box-shadow: 0 0 12px #00ff9c; transform: translate(-50%,-50%) scale(1); }
+  50%  { box-shadow: 0 0 24px #00ff9c; transform: translate(-50%,-50%) scale(1.3); }
+  100% { box-shadow: 0 0 12px #00ff9c; transform: translate(-50%,-50%) scale(1); }
+}
+
+#authrix-loading-text {
+  font-size: 12px;
+  color: #00ff9c;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-align: center;
+}
+
+#authrix-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.authrix-step {
+  font-size: 11px;
+  color: rgba(255,255,255,0.2);
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  transition: all 0.3s ease;
+  letter-spacing: 0.03em;
+}
+.authrix-step.active {
+  color: #00ff9c;
+  background: rgba(0,255,156,0.06);
+  border-color: rgba(0,255,156,0.2);
+}
+.authrix-step.done {
+  color: rgba(0,255,156,0.4);
+}
+
+#authrix-note {
+  font-size: 10px;
+  color: rgba(255,255,255,0.2);
+  text-align: center;
+}
+
+/* ── Result ── */
+#authrix-result {
+  padding: 20px 18px;
+}
+
+#authrix-verdict-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+#authrix-badge {
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  border: 2px solid;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+#authrix-verdict-text {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  flex: 1;
+}
+
+#authrix-conf {
+  font-size: 22px;
+  font-weight: 700;
+  font-family: monospace;
+}
+
+#authrix-conf-bar-wrap {
+  height: 6px;
+  background: rgba(255,255,255,0.06);
+  border-radius: 99px;
+  overflow: hidden;
+  margin-bottom: 14px;
+}
+
+#authrix-conf-bar {
+  height: 100%;
+  border-radius: 99px;
+  width: 0%;
+  transition: width 1s cubic-bezier(0.22,1,0.36,1);
+}
+
+#authrix-details {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.authrix-detail {
+  font-size: 11px;
+  color: rgba(255,255,255,0.55);
+  padding: 7px 10px;
+  background: rgba(255,255,255,0.03);
+  border-left: 2px solid;
+  border-radius: 0 6px 6px 0;
+  line-height: 1.5;
+}
+
+#authrix-audio-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: rgba(255,255,255,0.03);
+  border-radius: 6px;
+  margin-bottom: 14px;
+  font-size: 11px;
+  border: 1px solid rgba(255,255,255,0.06);
+}
+
+#authrix-actions {
+  display: flex;
+  gap: 8px;
+}
+
+#authrix-actions button {
+  flex: 1;
+  padding: 9px;
+  border-radius: 7px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+#authrix-reanalyze {
+  background: none;
+  border: 1px solid rgba(255,255,255,0.12);
+  color: rgba(255,255,255,0.5);
+}
+#authrix-reanalyze:hover {
+  border-color: rgba(0,255,156,0.4);
+  color: #00ff9c;
+  background: rgba(0,255,156,0.06);
+}
+
+#authrix-open-app {
+  background: rgba(0,255,156,0.1);
+  border: 1px solid rgba(0,255,156,0.3);
+  color: #00ff9c;
+}
+#authrix-open-app:hover {
+  background: rgba(0,255,156,0.18);
+  box-shadow: 0 0 16px rgba(0,255,156,0.2);
+}
+
+/* ── Error ── */
+#authrix-error {
+  flex-direction: column;
+  align-items: center;
+  padding: 28px 20px 24px;
+  gap: 10px;
+  text-align: center;
+}
+
+#authrix-error-icon { font-size: 32px; }
+
+#authrix-error-msg {
+  font-size: 13px;
+  font-weight: 600;
+  color: #ff4466;
+}
+
+#authrix-error-hint {
+  font-size: 11px;
+  color: rgba(255,255,255,0.35);
+  line-height: 1.5;
+  max-width: 300px;
+  font-family: monospace;
+}
+
+#authrix-retry {
+  background: rgba(255,68,102,0.1);
+  border: 1px solid rgba(255,68,102,0.3);
+  color: #ff4466;
+  padding: 8px 20px;
+  border-radius: 7px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+  margin-top: 4px;
+}
+#authrix-retry:hover { background: rgba(255,68,102,0.2); }
+
+/* ── Toast ── */
+.authrix-toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 2147483647;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  animation: authrix-fade-in 0.2s ease;
+  pointer-events: none;
+}
+.authrix-toast-info { background: #0c150f; border: 1px solid rgba(0,255,156,0.3); color: #00ff9c; }
+.authrix-toast-warn { background: #1a0f00; border: 1px solid rgba(255,170,0,0.3); color: #ffaa00; }
+.authrix-toast-error { background: #1a0005; border: 1px solid rgba(255,68,102,0.3); color: #ff4466; }

extension/popup.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<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;
+      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);
+      background: rgba(0,255,156,0.04);
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .logo {
+      display: flex; align-items: center; gap: 8px;
+      font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
+      color: #00ff9c; text-shadow: 0 0 10px rgba(0,255,156,0.4);
+    }
+    .logo-dot {
+      width: 8px; height: 8px; border-radius: 50%;
+      background: #00ff9c; box-shadow: 0 0 8px #00ff9c;
+      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; }
+    }
+    .status-badge {
+      font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
+      padding: 3px 8px; border-radius: 99px;
+      border: 1px solid rgba(0,255,156,0.3);
+      color: #00ff9c; background: rgba(0,255,156,0.08);
+    }
+    .status-badge.offline {
+      border-color: rgba(255,68,102,0.3);
+      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 {
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.07);
+      border-radius: 8px; padding: 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 {
+      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; }
+
+    .btn-analyze-page {
+      width: 100%; padding: 11px;
+      background: linear-gradient(135deg, #00ff9c, #00cc6a);
+      color: #002110; border: none; border-radius: 8px;
+      font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
+      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);
+    }
+    .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;
+    }
+
+    /* URL input */
+    .url-input-wrap {
+      display: flex; gap: 6px;
+    }
+    .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;
+    }
+    .btn-go:hover { background: rgba(0,255,156,0.18); }
+
+    /* Divider */
+    .divider {
+      display: flex; align-items: center; gap: 8px;
+      color: rgba(255,255,255,0.15); font-size: 10px;
+    }
+    .divider::before, .divider::after {
+      content: ''; flex: 1; height: 1px;
+      background: rgba(255,255,255,0.08);
+    }
+
+    /* 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;
+      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-conf { font-size: 18px; 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;
+    }
+    .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; }
+
+    /* Footer */
+    .footer {
+      padding: 10px 16px;
+      border-top: 1px solid rgba(255,255,255,0.05);
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .footer-link {
+      font-size: 10px; color: rgba(0,255,156,0.5);
+      text-decoration: none; letter-spacing: 0.08em;
+      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; }
+  </style>
+</head>
+<body>
+
+  <!-- Header -->
+  <div class="header">
+    <div class="logo">
+      <div class="logo-dot"></div>
+      AUTHRIX AI
+    </div>
+    <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>
+      </div>
+    </div>
+
+    <button class="btn-analyze-page" id="btnAnalyzePage" disabled>
+      ▶ &nbsp;Analyze Video on This Page
+    </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>
+    </div>
+
+    <!-- Last result -->
+    <div id="last-result">
+      <div class="section-label" style="margin-bottom:8px;">Last Result</div>
+      <div class="result-row">
+        <div id="lastVerdict" class="result-verdict">—</div>
+        <div id="lastConf" class="result-conf">—</div>
+      </div>
+      <div class="result-bar-wrap">
+        <div id="lastBar" class="result-bar" style="width:0%"></div>
+      </div>
+      <div id="lastFile" class="result-file">—</div>
+    </div>
+
+  </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>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

extension/popup.js

@@ -0,0 +1,165 @@
+/**
+ * Authrix Extension — Popup Script
+ */
+
+const API_BASE = 'http://localhost:8000';
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', async () => {
+  await checkHealth();
+  await detectPageVideo();
+  loadLastResult();
+  wireButtons();
+});
+
+// ── Health check ──────────────────────────────────────────────────────────────
+async function checkHealth() {
+  const badge = document.getElementById('statusBadge');
+  const modelInfo = document.getElementById('modelInfo');
+  try {
+    const res = await fetch(`${API_BASE}/health`);
+    const d   = await res.json();
+    if (d.ready) {
+      badge.textContent = 'ONLINE';
+      badge.classList.remove('offline');
+      modelInfo.textContent = (d.model || 'VIT ENSEMBLE').toUpperCase().slice(0, 22);
+    } else {
+      badge.textContent = 'LOADING';
+    }
+  } catch {
+    badge.textContent = 'OFFLINE';
+    badge.classList.add('offline');
+  }
+}
+
+// ── Detect video on current tab ───────────────────────────────────────────────
+async function detectPageVideo() {
+  const btn   = document.getElementById('btnAnalyzePage');
+  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;
+
+    const results = await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      func: detectVideosOnPage,
+    });
+
+    const found = results?.[0]?.result;
+    if (found?.url) {
+      title.textContent = found.title || 'Video detected';
+      sub.textContent   = truncateUrl(found.url);
+      btn.disabled = false;
+      btn.dataset.url = found.url;
+    } else {
+      title.textContent = 'No video detected';
+      sub.textContent   = 'Try right-clicking a video element';
+      btn.disabled = true;
+    }
+  } catch {
+    title.textContent = 'Cannot access this page';
+    sub.textContent   = 'Extension pages are restricted';
+  }
+}
+
+// ── Runs in page context ──────────────────────────────────────────────────────
+function detectVideosOnPage() {
+  // Check <video> elements
+  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 };
+    }
+  }
+  // YouTube
+  const ytMatch = location.href.match(/[?&]v=([^&]+)/);
+  if (ytMatch) {
+    return { url: location.href, title: document.title };
+  }
+  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);
+  });
+
+  // Manual URL
+  document.getElementById('btnGo').addEventListener('click', async () => {
+    const url = document.getElementById('urlInput').value.trim();
+    if (!url) return;
+    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 into active tab and trigger analysis ───────────────────────
+async function injectAndAnalyze(url) {
+  try {
+    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],
+    });
+
+    // Close popup so user can see the overlay
+    window.close();
+  } catch (err) {
+    console.error('[Authrix popup]', err);
+  }
+}
+
+// ── Load last result from storage ────────────────────────────────────────────
+function loadLastResult() {
+  chrome.storage.local.get('lastResult', ({ lastResult }) => {
+    if (!lastResult) return;
+    const el = document.getElementById('last-result');
+    el.style.display = 'block';
+
+    const isFake = lastResult.result === 'FAKE';
+    const color  = isFake ? '#ff4466' : '#00ff9c';
+
+    document.getElementById('lastVerdict').textContent = lastResult.result;
+    document.getElementById('lastVerdict').style.color = color;
+    document.getElementById('lastConf').textContent    = lastResult.confidence + '%';
+    document.getElementById('lastConf').style.color    = color;
+    document.getElementById('lastFile').textContent    = lastResult.file || '';
+
+    const bar = document.getElementById('lastBar');
+    bar.style.background = isFake
+      ? 'linear-gradient(90deg,#880022,#ff4466)'
+      : 'linear-gradient(90deg,#006633,#00ff9c)';
+    setTimeout(() => { bar.style.width = lastResult.confidence + '%'; }, 80);
+  });
+}
+
+// ── Utilities ─────────────────────────────────────────────────────────────────
+function truncateUrl(url) {
+  try {
+    const u = new URL(url);
+    return u.hostname + u.pathname.slice(0, 25);
+  } catch {
+    return url.slice(0, 40);
+  }
+}