chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: chrome.runtime.getURL("newtab.html") });
});




{
  "manifest_version": 3,
  "name": "Audio and Video Player",
  "version": "2.0",
  "description": "A Chrome extension to play audio and video from YouTube URLs with a fullscreen popup and customizable settings.",
  "action": {
    "default_title": "Open Player",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "storage",
    "windows"
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "web_accessible_resources": [
    {
      "resources": ["settings.html", "settings.js", "styles.css"],
      "matches": ["<all_urls>"]
    }
  ]
}




<!DOCTYPE html>
<html>
<head>
    <title>Audio and Video Player</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Audio and Video Player</h1>
        
        <!-- Audio Section with Transparent Box and Thin Border -->
        <div class="transparent-box">
            <section id="audio-section" class="section">
                <h2>Audio</h2>
                <div class="input-row">
                    <label for="audio-url">YouTube URL:</label>
                    <input type="text" id="audio-url" placeholder="Enter YouTube audio URL">
                </div>
                <!-- Removed Local Audio File Input -->
            </section>
        </div>
        
        <!-- Video Section with Transparent Box and Thin Border -->
        <div class="transparent-box">
            <section id="video-section" class="section">
                <h2>Video</h2>
                <div class="input-row">
                    <label for="video-url">YouTube URL:</label>
                    <input type="text" id="video-url" placeholder="Enter YouTube video URL">
                </div>
            </section>
        </div>
        
        <!-- Play Button -->
        <div class="play-button-row">
            <button id="play-button">Play</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>




<!DOCTYPE html>
<html>
<head>
    <title>Player</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Remove margins and paddings to make players occupy full space */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: black;
        }

        /* Style to make sure players take up the full available space */
        .player-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
            background-color: black;
        }

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

        iframe {
            width: 80%;
            max-width: 800px;
            height: 80%;
            max-height: 450px;
            border: none;
        }

        /* Hide elements initially */
        #youtube-audio-section, #youtube-video-section {
            display: none;
        }
    </style>
</head>
<body>
    <div class="player-container">
        <!-- YouTube Audio Player -->
        <section id="youtube-audio-section" class="player-section">
            <iframe id="youtube-audio-player" src="" allow="autoplay"></iframe>
        </section>
        
        <!-- YouTube Video Player -->
        <section id="youtube-video-section" class="player-section">
            <iframe id="youtube-video-player" src="" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </section>
    </div>

    <script src="player.js"></script>
</body>
</html>




// Retrieve stored data from chrome.storage.local
chrome.storage.local.get(['audioUrl', 'videoUrl', 'muteSecondPlayer', 'enableFullscreen'], (data) => {
    const { audioUrl, videoUrl, muteSecondPlayer, enableFullscreen } = data;

    const youtubeAudioSection = document.getElementById('youtube-audio-section');
    const youtubeAudioPlayer = document.getElementById('youtube-audio-player');

    const youtubeVideoSection = document.getElementById('youtube-video-section');
    const youtubeVideoPlayer = document.getElementById('youtube-video-player');

    let displayCount = 0;

    // Initialize YouTube Audio Player
    if (audioUrl) {
        const extractedID = extractYouTubeID(audioUrl);
        if (extractedID) {
            youtubeAudioPlayer.src = `https://www.youtube.com/embed/${extractedID}?autoplay=1&controls=1&mute=0`;
            youtubeAudioSection.style.display = 'flex';
            displayCount++;
            console.log('YouTube Audio Player initialized.');
        } else {
            console.error('Invalid YouTube Audio URL.');
        }
    }

    // Initialize YouTube Video Player
    if (videoUrl) {
        const extractedID = extractYouTubeID(videoUrl);
        if (extractedID) {
            let videoSrc = `https://www.youtube.com/embed/${extractedID}?autoplay=1&controls=1`;
            if (muteSecondPlayer && audioUrl) {
                // If muting the second player and audio is present, mute the video player
                videoSrc += `&mute=1`;
                youtubeVideoPlayer.src = videoSrc;
                console.log('YouTube Video Player initialized with mute.');
            } else {
                youtubeVideoPlayer.src = videoSrc;
                console.log('YouTube Video Player initialized.');
            }
            youtubeVideoSection.style.display = 'flex';
            displayCount++;
        } else {
            console.error('Invalid YouTube Video URL.');
        }
    }

    // Apply Fullscreen Setting
    if (!enableFullscreen) {
        // If fullscreen is disabled, resize the window to a standard size
        window.resizeTo(800, 600);
    }

    // If no players are to be displayed, show an alert and close the popup
    if (displayCount === 0) {
        alert('No valid media to display. Closing popup.');
        window.close();
    }
});

/**
 * Extracts the YouTube video ID from a given URL.
 * Supports various YouTube URL formats.
 * 
 * @param {string} url - The YouTube URL.
 * @returns {string} - The extracted video ID.
 */
function extractYouTubeID(url) {
    const regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
    const match = url.match(regex);
    return (match && match[1]) ? match[1] : '';
}

// Event listener for the Esc key to close the popup
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
        window.close();
    }
});




document.addEventListener('DOMContentLoaded', () => {
    const playButton = document.getElementById('play-button');

    playButton.addEventListener('click', () => {
        // Handle Audio Section
        const audioUrl = document.getElementById('audio-url').value.trim();

        // Handle Video Section
        const videoUrl = document.getElementById('video-url').value.trim();

        // Validate Inputs
        if (!audioUrl && !videoUrl) {
            alert('Please provide at least one input (Audio URL or Video URL).');
            return;
        }

        // Check if chrome.storage is available
        if (chrome && chrome.storage && chrome.storage.local) {
            // Store data using chrome.storage.local
            chrome.storage.local.set({
                audioUrl: audioUrl || '',
                videoUrl: videoUrl || ''
            }, () => {
                if (chrome.runtime.lastError) {
                    console.error('Error setting storage:', chrome.runtime.lastError);
                    alert('An error occurred while saving your inputs. Please try again.');
                    return;
                }
                // Open the player.html in a new fullscreen popup window without standard window controls
                chrome.windows.create({
                    url: chrome.runtime.getURL("player.html"),
                    type: "popup",
                    state: "fullscreen", // Set window state to fullscreen
                    // width and height are ignored when state is fullscreen
                    // left and top are ignored as the window will occupy the entire screen
                }, (window) => {
                    if (chrome.runtime.lastError) {
                        console.error('Error creating window:', chrome.runtime.lastError);
                        alert('An error occurred while opening the player. Please try again.');
                    }
                });
            });
        } else {
            console.error('chrome.storage is not available.');
            alert('An error occurred with the storage API. Please reload the extension.');
        }
    });

    /**
     * Extracts the YouTube video ID from a given URL.
     * Supports various YouTube URL formats.
     * 
     * @param {string} url - The YouTube URL.
     * @returns {string} - The extracted video ID.
     */
    function extractYouTubeID(url) {
        const regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
        const match = url.match(regex);
        return (match && match[1]) ? match[1] : '';
    }
});




<!DOCTYPE html>
<html>
<head>
    <title>Settings</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="settings-container">
        <h2>Settings</h2>
        
        <div class="setting-item">
            <label for="mute-second-player">Mute Second Player:</label>
            <input type="checkbox" id="mute-second-player">
        </div>
        
        <div class="setting-item">
            <label for="enable-fullscreen">Enable Fullscreen Mode:</label>
            <input type="checkbox" id="enable-fullscreen">
        </div>
        
        <button id="save-settings">Save Settings</button>
    </div>

    <script src="settings.js"></script>
</body>
</html>





document.addEventListener('DOMContentLoaded', () => {
    const muteSecondPlayerCheckbox = document.getElementById('mute-second-player');
    const enableFullscreenCheckbox = document.getElementById('enable-fullscreen');
    const saveSettingsButton = document.getElementById('save-settings');

    // Load existing settings
    chrome.storage.local.get(['muteSecondPlayer', 'enableFullscreen'], (data) => {
        muteSecondPlayerCheckbox.checked = data.muteSecondPlayer || false;
        enableFullscreenCheckbox.checked = data.enableFullscreen || false;
    });

    // Handle Save Settings Button Click
    saveSettingsButton.addEventListener('click', () => {
        const muteSecondPlayer = muteSecondPlayerCheckbox.checked;
        const enableFullscreen = enableFullscreenCheckbox.checked;

        chrome.storage.local.set({
            muteSecondPlayer: muteSecondPlayer,
            enableFullscreen: enableFullscreen
        }, () => {
            if (chrome.runtime.lastError) {
                console.error('Error saving settings:', chrome.runtime.lastError);
                alert('An error occurred while saving settings. Please try again.');
                return;
            }
            alert('Settings saved successfully.');
        });
    });
});





body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    text-align: center;
    flex: 1;
}

#settings-button {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

#settings-button:hover {
    color: #357ae8;
}

.transparent-box {
    background-color: rgba(255, 255, 255, 0.5); /* 50% transparency */
    padding: 20px;
    border: 1px solid #ccc; /* Thin border */
    border-radius: 8px;
    margin-bottom: 20px;
}

.section {
    margin-bottom: 20px;
}

.input-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.input-row label {
    width: 100px; /* Changed from 200px to 100px */
    font-weight: bold;
}

.input-row input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.play-button-row {
    text-align: center;
}

#play-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4285f4;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#play-button:hover {
    background-color: #357ae8;
}

/* Player Container Styles */
.player-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    background-color: black;
    margin: 0;
    padding: 0;
}

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

iframe {
    width: 80%;
    max-width: 800px;
    height: 80%;
    max-height: 450px;
    border: none;
}

/* Settings Page Styles */
.settings-container {
    max-width: 600px;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.settings-container h2 {
    text-align: center;
}

.setting-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.setting-item label {
    flex: 1;
    font-weight: bold;
}

.setting-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#save-settings {
    display: block;
    margin: 20px auto 0 auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4285f4;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#save-settings:hover {
    background-color: #357ae8;
}



you broke the fullscreen of the player page and i see no settings button.