MP improvements

Author: ivantha

browser-extension/src/content/dom/selectors.ts

@@ -2,7 +2,6 @@
 
 export const POST_CONTENT_SELECTOR = '[data-ad-comet-preview="message"]';
 
-export const ALLOWED_GROUP_NAMES: string[] = [
-  'Artificial Intelligence & Deep Learning Memes For Back-propagated Poets',
-  'Social Media for People',
-];
+// Allowed Facebook group IDs. The extension activates only for these groups.
+// Checked directly from the URL (e.g., /groups/<id>/...).
+export const ALLOWED_GROUP_IDS: string[] = ['1280044857038905', '1638417209555402'];

browser-extension/src/content/index.ts

@@ -3,6 +3,7 @@ import { FacebookPostObserver } from './observer';
 import { FloatingChatWindow } from './ui/components/ChatWindow';
 import { metricsManager } from './metrics/MetricsManager';
 import { analytics } from '@/shared/analytics';
+import { isInAllowedGroupNow } from '@/content/utils/group';
 
 declare const __DEV__: boolean;
 if (!__DEV__) {
@@ -16,8 +17,10 @@ if (!__DEV__) {
 // Entry bootstrap: initialize metrics, observer and chat UI
 (async () => {
   try {
-    // Initialize Mixpanel as early as possible
-    analytics.init();
+    // Enable Mixpanel analytics only for allowed groups
+    const allowed = isInAllowedGroupNow();
+    analytics.setEnabled(allowed);
+    if (allowed) analytics.init();
 
     // Initialize metrics collection first
     await metricsManager.initialize();

browser-extension/src/content/metrics/MetricsCollector.ts

@@ -25,6 +25,7 @@ export class MetricsCollector {
   private lastScrollY: number = 0;
   private scrollSpeeds: number[] = [];
   private postViewTimes: Map<string, number> = new Map();
+  private postCumulativeView: Map<string, number> = new Map();
 
   constructor(config: MetricsConfig) {
     this.config = config;
@@ -75,6 +76,17 @@ export class MetricsCollector {
         // Post entered viewport
         this.postViewTimes.set(postId, currentTime);
 
+        // Fire explicit read start
+        this.addEvent({
+          type: 'post_read_start',
+          category: 'interaction',
+          metadata: {
+            postId,
+            intersectionRatio: entry.intersectionRatio,
+          },
+          clientTimestamp: new Date().toISOString(),
+        });
+
         this.addEvent({
           type: 'post_viewport_enter',
           category: 'interaction',
@@ -96,6 +108,11 @@ export class MetricsCollector {
           const viewportTime = currentTime - startTime;
           this.postViewTimes.delete(postId);
 
+          // Update cumulative time
+          const prev = this.postCumulativeView.get(postId) || 0;
+          const total = prev + viewportTime;
+          this.postCumulativeView.set(postId, total);
+
           this.addEvent({
             type: 'post_viewport_exit',
             category: 'interaction',
@@ -106,6 +123,19 @@ export class MetricsCollector {
             },
             clientTimestamp: new Date().toISOString(),
           });
+
+          // Fire explicit read end with cumulative total so far
+          this.addEvent({
+            type: 'post_read_end',
+            category: 'interaction',
+            value: viewportTime,
+            metadata: {
+              postId,
+              sessionViewMs: viewportTime,
+              cumulativeViewMs: total,
+            },
+            clientTimestamp: new Date().toISOString(),
+          });
         }
       }
     });

browser-extension/src/content/observer.ts

@@ -10,10 +10,8 @@ import {
   sendChatSessionMetrics,
 } from '@/content/messaging';
 import { metricsManager } from './metrics/MetricsManager';
-import {
-  POST_CONTENT_SELECTOR as POST_SELECTOR,
-  ALLOWED_GROUP_NAMES as GROUPS,
-} from '@/content/dom/selectors';
+import { POST_CONTENT_SELECTOR as POST_SELECTOR } from '@/content/dom/selectors';
+import { isInAllowedGroupNow } from '@/content/utils/group';
 import { ChatMessage } from '@/content/types';
 // Chat session metrics state attached to chat window elements
 interface ChatMetrics {
@@ -49,29 +47,14 @@ export class FacebookPostObserver {
   /** Selector for extracting post content */
   private readonly POST_CONTENT_SELECTOR = POST_SELECTOR;
 
-  /** List of allowed Facebook group names where the extension should work */
-  private readonly ALLOWED_GROUP_NAMES = GROUPS;
-
   /**
    * Checks if the current page is in an allowed Facebook group
    * @returns boolean indicating if the extension should be active
    */
   private isInAllowedGroup(): boolean {
-    const currentGroupName = this.getCurrentGroupName();
-
-    if (!currentGroupName) {
-      // Not in a group, extension should NOT work
-      return false;
-    }
-
-    const isAllowed = this.ALLOWED_GROUP_NAMES.some(
-      allowedName =>
-        currentGroupName.toLowerCase().includes(allowedName.toLowerCase()) ||
-        allowedName.toLowerCase().includes(currentGroupName.toLowerCase())
-    );
-
-    log(`[AI-Slop] Group filtering - Current group: "${currentGroupName}", Allowed: ${isAllowed}`);
-    return isAllowed;
+    const allowed = isInAllowedGroupNow();
+    log(`[AI-Slop] Group filtering - Allowed: ${allowed}`);
+    return allowed;
   }
 
   /**
@@ -543,6 +526,11 @@ export class FacebookPostObserver {
       // Allow posts with no text content if they have media (media-only posts)
       if (trimmedContent.length === 0 && !hasMedia) {
         log(`[AI-Slop] ⏭️ Post ${postId} has no content and no media, skipping analysis`);
+        metricsManager.trackEvent({
+          type: 'post_skipped_empty',
+          category: 'post',
+          metadata: { postId },
+        });
         return;
       }
 
@@ -562,6 +550,11 @@ export class FacebookPostObserver {
           log(
             `[AI-Slop] ⏭️ Post ${postId} has repetitive text content (${trimmedContent.length} chars, ${facebookCount} "Facebook" occurrences), skipping analysis`
           );
+          metricsManager.trackEvent({
+            type: 'post_skipped_repetitive',
+            category: 'post',
+            metadata: { postId, length: trimmedContent.length, facebookCount },
+          });
           return;
         }
       }
@@ -619,12 +612,88 @@ export class FacebookPostObserver {
 
       // Store analysis result and inject icon
       this.injectFactCheckIcon(postElement, postId, content, response);
+
+      // Setup media/video tracking inside this post (if present)
+      this.setupVideoTracking(postElement, postId);
     } catch (error) {
       logError(`[AI-Slop] ❌ Error analyzing post ${postId}:`, error);
       // Don't show icon if analysis fails to avoid confusion
     }
   }
 
+  /**
+   * Tracks video interactions inside a post
+   */
+  private videoState = new WeakMap<HTMLElement, { lastPlayTs: number | null; playAccumMs: number; lastProgressSentAt: number; lastTime: number }>();
+
+  private setupVideoTracking(postElement: HTMLElement, postId: string): void {
+    const videos = postElement.querySelectorAll('video');
+    videos.forEach(v => {
+      const el = v as HTMLVideoElement & { _aiSlopTracked?: boolean };
+      if (el._aiSlopTracked) return;
+      el._aiSlopTracked = true;
+
+      this.videoState.set(el, { lastPlayTs: null, playAccumMs: 0, lastProgressSentAt: 0, lastTime: 0 });
+
+      el.addEventListener('play', () => {
+        const st = this.videoState.get(el);
+        if (!st) return;
+        st.lastPlayTs = Date.now();
+        metricsManager.trackEvent({
+          type: 'video_play',
+          category: 'video',
+          metadata: { postId, duration: Math.round(el.duration || 0) },
+        });
+      });
+
+      el.addEventListener('pause', () => {
+        const st = this.videoState.get(el);
+        if (!st) return;
+        if (st.lastPlayTs) {
+          const delta = Date.now() - st.lastPlayTs;
+          st.playAccumMs += delta;
+          st.lastPlayTs = null;
+          metricsManager.trackEvent({
+            type: 'video_pause',
+            category: 'video',
+            metadata: { postId, playSessionMs: delta, totalPlayedMs: st.playAccumMs, currentTime: Math.round(el.currentTime) },
+          });
+        }
+      });
+
+      el.addEventListener('ended', () => {
+        const st = this.videoState.get(el);
+        if (!st) return;
+        if (st.lastPlayTs) {
+          st.playAccumMs += Date.now() - st.lastPlayTs;
+          st.lastPlayTs = null;
+        }
+        const percent = el.duration ? Math.min(100, Math.round((el.currentTime / el.duration) * 100)) : 0;
+        metricsManager.trackEvent({
+          type: 'video_end',
+          category: 'video',
+          metadata: { postId, totalPlayedMs: st.playAccumMs, percentWatched: percent },
+        });
+      });
+
+      el.addEventListener('timeupdate', () => {
+        const st = this.videoState.get(el);
+        if (!st) return;
+        const now = Date.now();
+        if (now - st.lastProgressSentAt > 5000) {
+          st.lastProgressSentAt = now;
+          st.lastTime = el.currentTime;
+          const percent = el.duration ? Math.min(100, Math.round((el.currentTime / el.duration) * 100)) : 0;
+          metricsManager.trackEvent({
+            type: 'video_progress',
+            category: 'video',
+            metadata: { postId, currentTime: Math.round(el.currentTime), percent },
+          });
+        }
+      });
+    });
+  }
+
   /**
    * Generates a unique ID for a post based on Facebook's URL structure
    * Priority: URL-based ID > content-based fallback > DOM-based fallback
@@ -1266,6 +1335,11 @@ export class FacebookPostObserver {
     try {
       targetElement.appendChild(iconContainer);
       log(`[AI-Slop] ✅ Icon injected successfully for post ${postId} with consistent positioning`);
+      metricsManager.trackEvent({
+        type: 'icon_injected',
+        category: 'interaction',
+        metadata: { postId },
+      });
     } catch (error) {
       logError(`[AI-Slop] ❌ Failed to append icon for post ${postId}:`, error);
 
@@ -1280,6 +1354,7 @@ export class FacebookPostObserver {
             }
             container.appendChild(iconContainer);
             log(`[AI-Slop] ✅ Icon injected using fallback container`);
+            metricsManager.trackEvent({ type: 'icon_injected_fallback', category: 'interaction', metadata: { postId } });
             break;
           } catch {
             continue;
@@ -1337,6 +1412,7 @@ export class FacebookPostObserver {
     }
 
     this.showChatOverlay(postElement, postId, content, analysisResult);
+    metricsManager.trackEvent({ type: 'chat_overlay_open', category: 'chat', metadata: { postId } });
   }
 
   /**
@@ -1627,6 +1703,7 @@ export class FacebookPostObserver {
 
     // Close chat window fast; send metrics in background
     closeButton?.addEventListener('click', () => {
+      metricsManager.trackEvent({ type: 'chat_overlay_close', category: 'chat' });
       const metrics =
         (chatWindow as unknown as HTMLElement & { _chatMetrics?: ChatMetrics })._chatMetrics ||
         null;
@@ -1648,6 +1725,12 @@ export class FacebookPostObserver {
 
     // Minimize chat window
     minimizeButton?.addEventListener('click', () => {
+      const minimized = chatWindow.classList.contains('minimized');
+      metricsManager.trackEvent({
+        type: 'chat_overlay_minimize_toggle',
+        category: 'chat',
+        label: minimized ? 'restore' : 'minimize',
+      });
       if (chatWindow.classList.contains('minimized')) {
         chatWindow.classList.remove('minimized');
       } else {
@@ -1664,6 +1747,12 @@ export class FacebookPostObserver {
     };
 
     sendButton?.addEventListener('click', sendMessage);
+    chatInput?.addEventListener('focus', () => {
+      metricsManager.trackEvent({ type: 'chat_input_focus', category: 'chat' });
+    });
+    chatInput?.addEventListener('blur', () => {
+      metricsManager.trackEvent({ type: 'chat_input_blur', category: 'chat' });
+    });
     chatInput?.addEventListener('keypress', e => {
       if (e.key === 'Enter') {
         sendMessage();
@@ -1672,6 +1761,7 @@ export class FacebookPostObserver {
 
     // Ignore analysis
     ignoreButton?.addEventListener('click', () => {
+      metricsManager.trackEvent({ type: 'chat_ignore_analysis', category: 'chat' });
       const analysisResult = chatWindow.querySelector('.analysis-result');
       if (analysisResult) {
         analysisResult.innerHTML = `
@@ -1960,6 +2050,8 @@ export class FacebookPostObserver {
         // Add class for potential drag-specific styles
         chatWindow.classList.add('dragging');
 
+        metricsManager.trackEvent({ type: 'chat_overlay_drag_start', category: 'chat' });
+
         e.preventDefault(); // Prevent default browser drag behavior
       }
     };
@@ -1983,6 +2075,12 @@ export class FacebookPostObserver {
         chatWindow.style.userSelect = '';
         chatWindow.classList.remove('dragging');
 
+        metricsManager.trackEvent({
+          type: 'chat_overlay_drag_end',
+          category: 'chat',
+          metadata: { x: xOffset, y: yOffset },
+        });
+
         // Cancel any pending animation frame
         if (animationId) {
           cancelAnimationFrame(animationId);