base on this edge & chrome extension code ,manifest v3 ,background.js "let currentlyPlayingTabId = null;
let closeTimerId = null;
let closeStartTime = null;
const closeDuration = 10000; // 10 seconds

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.query({}, (tabs) => {
    tabs.forEach((tab) => {
      chrome.tabs.sendMessage(tab.id, { action: "pauseAllVideos" });
    });
  });
});

const updateRedBarProgress = (tabId) => {
  if (closeStartTime === null) return;

  const elapsedTime = Date.now() - closeStartTime;
  const progress = Math.min((elapsedTime / closeDuration) * 100, 100);

  chrome.tabs.sendMessage(tabId, { action: "updateRedBarProgress", progress: progress });

  if (progress < 100) {
    closeTimerId = setTimeout(() => updateRedBarProgress(tabId), 100); // Update every 100ms
  } else {
    chrome.tabs.remove(tabId, () => {
      if (chrome.runtime.lastError) {
        console.error(`Error closing tab: ${chrome.runtime.lastError.message}`);
      }
    });
  }
};

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  switch (request.action) {
    case "videoStartedPlaying":
      if (currentlyPlayingTabId && currentlyPlayingTabId !== sender.tab.id) {
        chrome.tabs.sendMessage(currentlyPlayingTabId, { action: "pauseAllVideos" });
      }
      currentlyPlayingTabId = sender.tab.id;
      break;
    case "videoStoppedPlaying":
      if (sender.tab.id === currentlyPlayingTabId) {
        currentlyPlayingTabId = null;
      }
      break;
    case "startCloseTimer":
      clearTimeout(closeTimerId);
      closeStartTime = Date.now();
      if (sender.tab.url.includes('youtube.com')) {
        updateRedBarProgress(sender.tab.id);
      }
      break;
    case "cancelCloseTimer":
      clearTimeout(closeTimerId);
      closeStartTime = null;
      break;
  }
  sendResponse({ status: "Message received" });
  return true;
});" ,content.js "let currentlyPlaying = null;
let lastUserInteractionTime = 0;
let videoElements = new WeakSet();
let lastTitle = document.title;

const clearRedBarAndTimer = () => {
  const redBar = document.getElementById('extension-red-bar');
  if (redBar) {
    redBar.remove();
  }
  if (chrome.runtime && chrome.runtime.sendMessage) {
    chrome.runtime.sendMessage({ action: "cancelCloseTimer" });
  }
};

const showRedBar = () => {
  clearRedBarAndTimer();
  if (location.hostname.includes('youtube.com')) {
    const redBar = document.createElement('div');
    redBar.id = 'extension-red-bar';
    redBar.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 5px;
      background: red;
      z-index: 9999;
      transition: width 0.1s linear;
    `;
    document.body.appendChild(redBar);

    if (chrome.runtime && chrome.runtime.sendMessage) {
      chrome.runtime.sendMessage({ action: "startCloseTimer" });
    }
  }
};

const updateRedBarProgress = (progress) => {
  const redBar = document.getElementById('extension-red-bar');
  if (redBar) {
    redBar.style.width = `${progress}%`;
  }
};

const pauseAllVideos = () => {
  for (const video of document.querySelectorAll('video')) {
    if (videoElements.has(video)) {
      video.pause();
    }
  }
  currentlyPlaying = null;
  clearRedBarAndTimer();
  if (chrome.runtime && chrome.runtime.sendMessage) {
    chrome.runtime.sendMessage({ action: "videoStoppedPlaying" });
  }
};

const handleVideoEnd = () => {
  showRedBar();
};

const handleVideoPlay = (video) => {
  clearRedBarAndTimer();
  const currentTime = Date.now();
  const timeSinceLastInteraction = currentTime - lastUserInteractionTime;

  if (timeSinceLastInteraction > 2000) {
    setTimeout(() => {
      if (!video.paused) {
        video.pause();
      }
    }, 100);
  } else {
    pauseOtherVideos(video);
    if (chrome.runtime && chrome.runtime.sendMessage) {
      chrome.runtime.sendMessage({ action: "videoStartedPlaying" });
    }
  }
};

const pauseOtherVideos = (newVideo) => {
  for (const video of document.querySelectorAll('video')) {
    if (video !== newVideo && videoElements.has(video)) {
      video.pause();
    }
  }
  currentlyPlaying = newVideo;
};

const initVideoControl = (video) => {
  if (videoElements.has(video)) return;

  videoElements.add(video);
  video.pause(); // Only auto-pause videos on initial load
  video.addEventListener('ended', handleVideoEnd, { once: false });
  video.addEventListener('play', () => handleVideoPlay(video));

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList' && mutation.removedNodes.contains(video)) {
        cleanupVideoElement(video);
        observer.disconnect();
      }
    });
  });
  observer.observe(video.parentNode, { childList: true });
};

const cleanupVideoElement = (video) => {
  video.removeEventListener('ended', handleVideoEnd);
  video.removeEventListener('play', () => handleVideoPlay(video));
  videoElements.delete(video);
  if (currentlyPlaying === video) {
    currentlyPlaying = null;
  }
};

const observeVideoElements = () => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeName === 'VIDEO') {
          initVideoControl(node);
        } else if (node.querySelectorAll) {
          node.querySelectorAll('video').forEach(initVideoControl);
        }
      });
    });
  });

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

const initUserInteractionTracking = () => {
  ['mousedown', 'keydown', 'touchstart'].forEach(eventType => {
    document.addEventListener(eventType, () => {
      lastUserInteractionTime = Date.now();
      clearRedBarAndTimer();
    }, true);
  });
};

const handleTitleChange = () => {
  if (document.title !== lastTitle) {
    lastTitle = document.title;
    clearRedBarAndTimer();
    pauseAllVideos();
  }
};

const observeTitleChanges = () => {
  const titleObserver = new MutationObserver(handleTitleChange);
  const titleElement = document.querySelector('title');
  if (titleElement) {
    titleObserver.observe(titleElement, { subtree: true, characterData: true, childList: true });
  }
};

const initExtension = () => {
  document.querySelectorAll('video').forEach(initVideoControl);
  observeVideoElements();
  initUserInteractionTracking();
  observeTitleChanges();

  if (chrome.runtime && chrome.runtime.onMessage) {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      if (request.action === "pauseAllVideos") {
        pauseAllVideos();
      } else if (request.action === "updateRedBarProgress") {
        updateRedBarProgress(request.progress);
      }
      sendResponse({ status: "Message received" });
      return true;
    });
  }
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initExtension);
} else {
  initExtension();
};" ,fix problem with when click open popup video it start playing  (lazada site item video popup) then if user click pause and try to click play again video stuck (code keep pause video) ,and another problem when in youtube site and scroll down to show more video (more video loading into view) another tab that has video playing stop play.