contentScript.js

// YouTube Bookmark Extension - Content Script
// This script runs on YouTube pages and adds bookmark functionality

(() => {
  'use strict';

  let youtubeLeftControls = null;
  let youtubePlayer = null;
  let currentVideo = "";
  let currentVideoBookmarks = [];
  const MAX_RETRIES = 3;
  let retryCount = 0;

  // Convert seconds to MM:SS format
  const getTime = (totalSeconds) => {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = Math.floor(totalSeconds % 60);
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };

  // Find YouTube player elements with retry mechanism
  const findYouTubeElements = () => {
    youtubeLeftControls = document.querySelector('.ytp-left-controls');
    youtubePlayer = document.querySelector('.video-stream');

    if (!youtubeLeftControls || !youtubePlayer) {
      if (retryCount < MAX_RETRIES) {
        retryCount++;
        setTimeout(findYouTubeElements, 500);
      }
      return false;
    }
    return true;
  };

  // Load bookmarks from storage
  const loadBookmarks = () => {
    if (!currentVideo) return;

    chrome.storage.sync.get([currentVideo], (result) => {
      currentVideoBookmarks = result[currentVideo]
        ? JSON.parse(result[currentVideo])
        : [];
    });
  };

  // Save bookmarks to storage
  const saveBookmarks = (bookmarks) => {
    if (!currentVideo) return;

    chrome.storage.sync.set({
      [currentVideo]: JSON.stringify(bookmarks)
    }, () => {
      if (chrome.runtime.lastError) {
        console.error('Error saving bookmarks:', chrome.runtime.lastError);
      }
    });
  };

  // Add bookmark button to YouTube player
  const newVideoLoaded = () => {
    const bookmarkBtnExists = document.querySelector('.bookmark-btn');

    if (bookmarkBtnExists) {
      return;
    }

    if (!findYouTubeElements()) {
      return;
    }

    const bookmarkBtn = document.createElement('img');
    bookmarkBtn.src = chrome.runtime.getURL('assets/bookmark.png');
    bookmarkBtn.className = 'ytp-button bookmark-btn';
    bookmarkBtn.title = 'Click to bookmark current timestamp';
    bookmarkBtn.style.cursor = 'pointer';

    youtubeLeftControls.appendChild(bookmarkBtn);
    bookmarkBtn.addEventListener('click', addNewBookmarkEventHandler);

    // Load existing bookmarks for this video
    loadBookmarks();
  };

  // Handle adding a new bookmark
  const addNewBookmarkEventHandler = () => {
    if (!youtubePlayer) {
      console.error('YouTube player not found');
      return;
    }

    const currentTime = youtubePlayer.currentTime;
    const newBookmark = {
      time: currentTime,
      desc: `Bookmark at ${getTime(currentTime)}`,
      createdAt: Date.now()
    };

    // Add new bookmark and sort by time
    const updatedBookmarks = [...currentVideoBookmarks, newBookmark]
      .sort((a, b) => a.time - b.time);

    saveBookmarks(updatedBookmarks);
    currentVideoBookmarks = updatedBookmarks;

    // Visual feedback
    showBookmarkFeedback();
  };

  // Show visual feedback when bookmark is added
  const showBookmarkFeedback = () => {
    const feedback = document.createElement('div');
    feedback.className = 'bookmark-feedback';
    feedback.textContent = 'Bookmark saved!';
    feedback.style.cssText = `
      position: absolute;
      top: -30px;
      right: 10px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      z-index: 9999;
    `;

    const bookmarkBtn = document.querySelector('.bookmark-btn');
    if (bookmarkBtn && bookmarkBtn.parentNode) {
      bookmarkBtn.parentNode.style.position = 'relative';
      bookmarkBtn.parentNode.appendChild(feedback);
      setTimeout(() => feedback.remove(), 2000);
    }
  };

  // Handle seek to bookmark time
  const seekToTime = (time) => {
    if (youtubePlayer) {
      youtubePlayer.currentTime = parseFloat(time);
    }
  };

  // Delete bookmark
  const deleteBookmark = (timeToDelete) => {
    currentVideoBookmarks = currentVideoBookmarks.filter(
      (b) => b.time !== parseFloat(timeToDelete)
    );
    saveBookmarks(currentVideoBookmarks);
  };

  // Message listener for communication with popup and background
  chrome.runtime.onMessage.addListener((obj, sender, response) => {
    const { type, value, videoId } = obj;

    if (type === 'NEW') {
      currentVideo = videoId;
      retryCount = 0;
      newVideoLoaded();
      loadBookmarks();
    } else if (type === 'PLAY') {
      seekToTime(value);
    } else if (type === 'DELETE') {
      deleteBookmark(value);
      if (response) {
        response(currentVideoBookmarks);
      }
    } else if (type === 'GET_BOOKMARKS') {
      if (response) {
        response(currentVideoBookmarks);
      }
    }

    return true; // Keep message channel open for async response
  });

  // Initialize when page loads
  retryCount = 0;
  newVideoLoaded();
  loadBookmarks();
})();