Chrome Extension TikTok Analytics Tracker: A Developer’s Guide

// content-script.js - Extract video analytics from TikTok Pro analytics page
(function() {
  'use strict';

  const ANALYTICS_SELECTORS = {
    videoContainer: '[data-e2e="video-list-item"]',
    viewCount: '[data-e2e="video-views"]',
    likeCount: '[data-e2e="video-likes"]',
    commentCount: '[data-e2e="video-comments"]',
    shareCount: '[data-e2e="video-shares"]',
    uploadDate: '[data-e2e="video-upload-time"]'
  };

  function extractVideoMetrics(videoElement) {
    return {
      id: videoElement.dataset.videoId || extractVideoId(videoElement),
      views: parseMetric(videoElement.querySelector(ANALYTICS_SELECTORS.viewCount)?.textContent),
      likes: parseMetric(videoElement.querySelector(ANALYTICS_SELECTORS.likeCount)?.textContent),
      comments: parseMetric(videoElement.querySelector(ANALYTICS_SELECTORS.commentCount)?.textContent),
      shares: parseMetric(videoElement.querySelector(ANALYTICS_SELECTORS.shareCount)?.textContent),
      timestamp: videoElement.querySelector(ANALYTICS_SELECTORS.uploadDate)?.textContent
    };
  }

  function parseMetric(text) {
    if (!text) return 0;
    const cleaned = text.replace(/[,KMB]/g, '');
    const multiplier = text.includes('K') ? 1000 : 
                       text.includes('M') ? 1000000 : 
                       text.includes('B') ? 1000000000 : 1;
    return parseFloat(cleaned) * multiplier;
  }

  function extractVideoId(element) {
    const link = element.querySelector('a[href*="/video/"]');
    return link ? link.href.match(/\/video\/(\d+)/)?.[1] : null;
  }

  // Set up MutationObserver to catch dynamically loaded content
  const observer = new MutationObserver((mutations) => {
    const videos = document.querySelectorAll(ANALYTICS_SELECTORS.videoContainer);
    if (videos.length > 0) {
      const metrics = Array.from(videos).map(extractVideoMetrics);
      chrome.runtime.sendMessage({
        type: 'VIDEO_METRICS_UPDATE',
        data: metrics
      });
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();

// background.js - Service worker for data aggregation and storage
const STORAGE_KEY = 'tiktok_analytics_cache';

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'VIDEO_METRICS_UPDATE') {
    handleVideoMetricsUpdate(message.data, sender.tab?.url);
    return true;
  }
  
  if (message.type === 'GET_ANALYTICS') {
    getAggregatedAnalytics().then(sendResponse);
    return true;
  }
});

async function handleVideoMetricsUpdate(videos, sourceUrl) {
  const existing = await chrome.storage.local.get(STORAGE_KEY);
  const cache = existing[STORAGE_KEY] || { videos: [], lastUpdated: null };
  
  const videoMap = new Map(cache.videos.map(v => [v.id, v]));
  
  videos.forEach(video => {
    const existingVideo = videoMap.get(video.id);
    if (existingVideo) {
      // Update existing video with latest metrics
      videoMap.set(video.id, { ...existingVideo, ...video, lastSeen: Date.now() });
    } else {
      videoMap.set(video.id, { ...video, firstSeen: Date.now(), lastSeen: Date.now() });
    }
  });
  
  cache.videos = Array.from(videoMap.values());
  cache.lastUpdated = Date.now();
  
  await chrome.storage.local.set({ [STORAGE_KEY]: cache });
}

async function getAggregatedAnalytics() {
  const existing = await chrome.storage.local.get(STORAGE_KEY);
  const cache = existing[STORAGE_KEY] || { videos: [] };
  
  const videos = cache.videos;
  
  return {
    totalVideos: videos.length,
    totalViews: videos.reduce((sum, v) => sum + (v.views || 0), 0),
    totalLikes: videos.reduce((sum, v) => sum + (v.likes || 0), 0),
    averageEngagementRate: calculateEngagementRate(videos),
    topPerformingVideos: getTopVideos(videos, 5),
    lastUpdated: cache.lastUpdated
  };
}

function calculateEngagementRate(videos) {
  if (videos.length === 0) return 0;
  const totalEngagement = videos.reduce((sum, v) => 
    sum + (v.likes || 0) + (v.comments || 0) + (v.shares || 0), 0);
  const totalViews = videos.reduce((sum, v) => sum + (v.views || 0), 0);
  return totalViews > 0 ? (totalEngagement / totalViews) * 100 : 0;
}

function getTopVideos(videos, count) {
  return [...videos]
    .sort((a, b) => (b.views || 0) - (a.views || 0))
    .slice(0, count);
}

// popup.js
document.addEventListener('DOMContentLoaded', async () => {
  const analytics = await chrome.runtime.sendMessage({ type: 'GET_ANALYTICS' });
  
  if (analytics) {
    document.getElementById('totalViews').textContent = formatNumber(analytics.totalViews);
    document.getElementById('totalVideos').textContent = analytics.totalVideos;
    document.getElementById('engagementRate').textContent = analytics.averageEngagementRate.toFixed(1) + '%';
    document.getElementById('totalLikes').textContent = formatNumber(analytics.totalLikes);
    
    const videoList = document.getElementById('topVideos');
    analytics.topPerformingVideos.forEach(video => {
      const item = document.createElement('div');
      item.className = 'video-item';
      item.textContent = `${formatNumber(video.views)} views - ${video.likes} likes`;
      videoList.appendChild(item);
    });
  }
});

function formatNumber(num) {
  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
  if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
  return num.toString();
}