{
  "manifest_version": 3,
  "name": "Sync Waves",
  "version": "1.0",
  "description": "Synchronize audio and video with custom start times.",
  "permissions": [
    "activeTab",
    "scripting",
    "tabs"
  ],
  "action": {
    "default_title": "Sync Waves"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <title>Sync Waves</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Sync Waves</h1>
  
  <div class="container">
    <!-- Audio Section -->
    <div class="section" id="audio-section">
      <h2>Audio</h2>
      
      <div class="audio-content">
        <!-- Inputs and Load Button -->
        <div class="inputs">
          <label for="audio-url">YouTube URL:</label>
          <input type="url" id="audio-url" placeholder="Enter YouTube Audio URL">
          
          <label for="audio-file">Load Local Audio File:</label>
          <div class="inner column" style="
    display: flex;
">
          
        <div class="left" style="
    /* vertical-align: middle; */
    /* justify-content: center; */
    /* align-items: center; */
    /* height: 70%; */
    flex: 50%;
">
          
        <input type="file" id="audio-file" accept="audio/*" style="
    /* vertical-align: top; */
    /* margin: 0 auto; */
    /* margin-top: 50%; */
    /* justify-self: center; */
    /* align-self: center; */
    /* justify-content: center; */
    /* align-items: center; */
    /* height: auto; */
    width: 100%;
    /* flex: 50%; */
"></div><div class="right" style="/* flex: 110%; *//* width: 121px; */float: left;">
          <audio id="audio-player" controls=""></audio>
        </div></div>
          
          <label for="audio-start-time">Start Time (seconds):</label>
          <input type="number" id="audio-start-time" placeholder="Start Time (seconds)" min="0">
          
          <button id="load-audio">Load Audio</button>
        </div>
        
        <!-- Audio Player -->
        
      </div>
    </div>
    
    <!-- Video Section -->
    <div class="section" id="video-section">
      <h2>Video</h2>
      
      <div class="video-content">
        <div class="inputs">
          <label for="video-url">YouTube URL:</label>
          <input type="url" id="video-url" placeholder="Enter YouTube Video URL">
          
          <label for="video-file">Load Local Video File:</label>
          <input type="file" id="video-file" accept="video/*">
          
          <label for="video-start-time">Start Time (seconds):</label>
          <input type="number" id="video-start-time" placeholder="Start Time (seconds)" min="0">
          
          <button id="load-video">Load Video</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Control Buttons -->
  <div class="controls">
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="resume">Resume</button>
  </div>
  
  <!-- Media Elements -->
  <div class="media-container">
    <video id="video-player" controls="" width="100%"></video>
  </div>
  
  <script src="script.js"></script>

</body></html>

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.container {
  display: flex;
  flex-direction: column; /* Vertical layout for container */
  gap: 20px; /* Space between sections */
}

.section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.section h2 {
  text-align: center;
  margin-bottom: 15px;
}

.audio-content,
.video-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.inputs {
  flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inputs label {
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: bold;
}

.inputs input,
.inputs button {
  padding: 10px;
  font-size: 1em;
}

.inputs button {
  cursor: pointer;
}

.player {
  flex: 1 1 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player audio {
  width: 100%;
  max-width: 300px;
}

/* Control Buttons */
.controls {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  gap: 10px;
}

.controls button {
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
}

/* Media Container */
.media-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.media-container video {
  width: 100%;
  max-width: 800px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .audio-content,
  .video-content {
    flex-direction: column;
    align-items: stretch;
  }

  .player audio {
    max-width: 100%;
  }

  .media-container video {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .controls {
    flex-direction: column;
    gap: 10px;
  }

  .controls button {
    width: 100%;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const audioUrlInput = document.getElementById('audio-url');
  const audioFileInput = document.getElementById('audio-file');
  const audioStartTimeInput = document.getElementById('audio-start-time');
  const loadAudioButton = document.getElementById('load-audio');
  
  const videoUrlInput = document.getElementById('video-url');
  const videoFileInput = document.getElementById('video-file');
  const videoStartTimeInput = document.getElementById('video-start-time');
  const loadVideoButton = document.getElementById('load-video');
  
  const playButton = document.getElementById('play');
  const pauseButton = document.getElementById('pause');
  const resumeButton = document.getElementById('resume');
  
  const audioPlayer = document.getElementById('audio-player');
  const videoPlayer = document.getElementById('video-player');
  
  // Load Audio
  loadAudioButton.addEventListener('click', () => {
    const youtubeUrl = audioUrlInput.value.trim();
    const file = audioFileInput.files[0];
    const startTime = parseInt(audioStartTimeInput.value, 10) || 0;
    
    if (youtubeUrl) {
      // Load YouTube Audio
      // Note: Directly loading YouTube audio requires using YouTube APIs.
      // For simplicity and due to CSP restrictions, we'll notify the user.
      alert('Loading audio from YouTube is not supported in this version.');
    } else if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        audioPlayer.src = e.target.result;
        audioPlayer.load();
        audioPlayer.addEventListener('canplay', () => {
          audioPlayer.currentTime = startTime;
        }, { once: true });
      };
      reader.readAsDataURL(file);
    } else {
      alert('Please provide a YouTube URL or select an audio file.');
    }
  });
  
  // Load Video
  loadVideoButton.addEventListener('click', () => {
    const youtubeUrl = videoUrlInput.value.trim();
    const file = videoFileInput.files[0];
    const startTime = parseInt(videoStartTimeInput.value, 10) || 0;
    
    if (youtubeUrl) {
      // Load YouTube Video
      // Note: Embedding YouTube videos requires using iframes or YouTube APIs.
      // For CSP compliance, consider using embeds carefully.
      const videoID = extractYouTubeID(youtubeUrl);
      if (videoID) {
        videoPlayer.src = `https://www.youtube.com/embed/${videoID}?autoplay=1&controls=1`;
        videoPlayer.addEventListener('loadeddata', () => {
          setTimeout(() => {
            videoPlayer.pause();
            videoPlayer.currentTime = startTime;
          }, 125); // Play for 1/8th of a second (125ms)
        }, { once: true });
      } else {
        alert('Invalid YouTube URL.');
      }
    } else if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        videoPlayer.src = e.target.result;
        videoPlayer.load();
        videoPlayer.addEventListener('canplay', () => {
          videoPlayer.currentTime = startTime;
        }, { once: true });
      };
      reader.readAsDataURL(file);
    } else {
      alert('Please provide a YouTube URL or select a video file.');
    }
  });
  
  // Play Button
  playButton.addEventListener('click', () => {
    audioPlayer.play();
    videoPlayer.play();
  });
  
  // Pause Button
  pauseButton.addEventListener('click', () => {
    audioPlayer.pause();
    videoPlayer.pause();
  });
  
  // Resume Button
  resumeButton.addEventListener('click', () => {
    audioPlayer.play();
    videoPlayer.play();
  });
  
  // Helper function to extract YouTube video ID
  function extractYouTubeID(url) {
    const regex = /(?:https?:\/\/)?(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-]{11})/;
    const match = url.match(regex);
    return match ? match[1] : null;
  }
});

chrome.runtime.onInstalled.addListener(() => {
  console.log('Sync Waves Extension Installed');
});

// Listen for the extension icon click
chrome.action.onClicked.addListener((tab) => {
  // Open index.html in a new tab
  chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });
});                 optimize as you see fit