i am making a chrome app and would like to know if theres any problems if i move the popup to a new tab when the extension is ran. i will put in my files one at a time and say done at the end of the last one.

Moving your Chrome extension's popup to a new tab is certainly possible, but there are several considerations and potential issues you should keep in mind to ensure a smooth user experience and compliance with Chrome's extension policies. Here's a breakdown of the key points to consider:

User Experience
Intrusiveness: Automatically opening a new tab every time the extension is activated can be intrusive and may frustrate users. Users typically expect popups to be quick and non-disruptive.
Navigation Flow: Opening a new tab disrupts the user's current browsing flow. Ensure that this behavior aligns with the extension's purpose and genuinely enhances the user experience.
Customization: Consider providing settings that allow users to choose between a popup and a new tab, giving them control over how they interact with your extension.
Chrome Extension Policies
Compliance: Ensure that your extension complies with Chrome Web Store Policies. Excessive or unexpected tab openings can be flagged as malicious behavior.
User Consent: If your extension's functionality necessitates opening new tabs, make sure it's clear to users why this action is being taken. Transparency helps in gaining user trust and avoiding policy violations.
Technical Implementation
Manifest Configuration: Make sure your manifest.json is correctly set up. Instead of defining a browser_action or action with a popup, you can use event listeners to trigger the opening of a new tab.
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0",
"permissions": ["tabs"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Open in New Tab"
}
}
Background Script: In your background.js, add an event listener for the extension's action (like a toolbar button click) to open a new tab.

chrome.action.onClicked.addListener((tab) => {
chrome.tabs.create({ url: chrome.runtime.getURL("newTabPage.html") });
});
New Tab Page: Design newTabPage.html as the interface users will interact with. Ensure it's optimized for usability and performance.
4. Performance Considerations
Resource Management: Opening multiple tabs can consume more system resources, potentially slowing down the browser or the user's device.
Lazy Loading: If your new tab page is resource-intensive, consider implementing lazy loading or other performance optimization techniques to minimize impact.
5. Accessibility
Consistent Navigation: Ensure that your new tab page is easily navigable and accessible to all users, including those using assistive technologies.
Responsive Design: Design the new tab page to be responsive and function well across different devices and screen sizes.
6. Alternatives to Consider
Sidebar Panels: Instead of opening a new tab, consider using sidebar panels or other UI elements that integrate more seamlessly with the browser interface.
In-Page Overlays: Depending on your extension's functionality, an in-page overlay might provide a less disruptive alternative to a new tab.
7. Testing
User Feedback: Before fully deploying the change, consider beta testing with a group of users to gather feedback on the new behavior.
Cross-Browser Compatibility: While focusing on Chrome, ensure that your extension behaves consistently if you plan to support other Chromium-based browsers.
Conclusion
Moving the popup to a new tab can be a viable approach if it serves a clear purpose and enhances the user experience. However, it's essential to balance functionality with user expectations and browser policies. Carefully plan the implementation, prioritize user experience, and ensure compliance with Chrome's guidelines to avoid potential issues.

If you proceed, feel free to share your code snippets one at a time, and I'll be happy to help you review and refine them!

{
"manifest_version": 3,
"name": "Media Loader",
"version": "1.0",
"description": "Load and play music and videos from YouTube and Vimeo",
"permissions": ["storage", "activeTab", "windows"],
"action": {
"default_popup": "dashboard.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
}

Your current manifest.json sets up a popup (dashboard.html) that appears when the extension's icon is clicked. To modify your Chrome extension so that it opens a new tab instead of displaying a popup, you'll need to make some adjustments to this file and implement additional scripts. Here's a step-by-step guide to help you achieve this:

Update manifest.json
a. Remove the default_popup Property
Currently, your action key includes a default_popup, which is responsible for showing the popup when the extension icon is clicked. To switch to opening a new tab, you need to remove this property.
b. Add a Background Service Worker
In Manifest V3, background scripts are implemented as service workers. You'll need to add a background section to handle the click event on the extension's icon.

c. Adjust Permissions
To open a new tab programmatically, you'll need the "tabs" permission. Ensure it's included in the permissions array.

d. Final manifest.json Example
Here's how your updated manifest.json should look:

{
"manifest_version": 3,
"name": "Media Loader",
"version": "1.0",
"description": "Load and play music and videos from YouTube and Vimeo",
"permissions": ["storage", "activeTab", "windows", "tabs"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Open Media Loader",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
}
Key Changes:

Removed default_popup:

// Removed this section from the "action" object
"default_popup": "dashboard.html",
Added background Section:

"background": {
"service_worker": "background.js"
},
Added "tabs" Permission:

"permissions": ["storage", "activeTab", "windows", "tabs"],
2. Create background.js
This script will listen for clicks on the extension's icon and open a new tab with your dashboard.

// background.js

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

chrome.action.onClicked.addListener: Sets up an event listener for when the user clicks the extension's icon.
chrome.tabs.create: Opens a new tab with the specified URL. chrome.runtime.getURL("dashboard.html") ensures that the dashboard.html file packaged with your extension is loaded.
3. Ensure dashboard.html is Properly Structured
Since you're moving from a popup to a full tab, ensure that dashboard.html is designed to function as a standalone page. It should include all necessary scripts and styles.

Example Structure:

Welcome to Media Loader
4. Update or Remove Unnecessary Files Since the popup is no longer used, you can remove any popup-specific scripts or styles. Ensure that all functionalities are now handled within dashboard.html and its associated scripts.
Testing Your Extension
Load the Unpacked Extension:
Go to chrome://extensions/ in your Chrome browser.
Enable "Developer mode" using the toggle in the top right corner.
Click "Load unpacked" and select your extension's directory.
Verify Functionality:
Click on the extension's icon in the toolbar.
A new tab should open displaying dashboard.html.
Debugging:
If the new tab doesn't open or displays errors, use Chrome's Developer Tools to inspect background.js and dashboard.html for any issues.
Access the background service worker's console by clicking "Service worker" under your extension in chrome://extensions/.
Additional Considerations
a. User Experience
Feedback Mechanism: Opening a new tab is more intrusive than a popup. Ensure that the new tab provides a valuable and user-friendly interface.
Seamless Integration: Design dashboard.html to integrate smoothly with users' browsing habits, possibly by allowing quick access back to their previous tabs.
b. Performance Optimization
Efficient Loading: Since dashboard.html is a full page, optimize its loading time by minimizing resource sizes and leveraging lazy loading where appropriate.
Resource Management: Ensure that the scripts and media loaded do not consume excessive system resources, which can slow down the browser.
c. Compliance with Chrome Web Store Policies
Transparency: Clearly state in your extension's description that it opens a new tab, so users are aware of its behavior.
Permissions Justification: Ensure that all permissions requested are necessary for your extension's functionality to avoid rejection during the review process.
Next Steps
Implement the Changes:
Modify your manifest.json as shown above.
Create and implement background.js.
Adjust dashboard.html to function as a standalone page.
Test Extensively:
Ensure that clicking the extension icon reliably opens the new tab.
Check that all functionalities within dashboard.html work as intended.
Iterate Based on Feedback:
Consider gathering user feedback to refine the user experience further.
Feel free to share your next file or any additional code snippets you'd like assistance with. I'm here to help you through each step of your Chrome extension development!
chrome.action.onClicked.addListener((tab) => {
chrome.tabs.query({ url: chrome.runtime.getURL("dashboard.html") }, (tabs) => {
if (tabs.length > 0) {
chrome.tabs.update(tabs[0].id, { active: true });
} else {
chrome.tabs.create({
url: chrome.runtime.getURL("dashboard.html"),
active: true
});
}
});
});

Your background.js script is designed to handle the extension icon click by either activating an existing dashboard.html tab or creating a new one if it doesn't already exist. This approach helps prevent multiple instances of the dashboard from cluttering the user's browser.

Review of Your background.js Code

chrome.action.onClicked.addListener((tab) => {
chrome.tabs.query({ url: chrome.runtime.getURL("dashboard.html") }, (tabs) => {
if (tabs.length > 0) {
chrome.tabs.update(tabs[0].id, { active: true });
} else {
chrome.tabs.create({
url: chrome.runtime.getURL("dashboard.html"),
active: true
});
}
});
});

Functionality Overview
Event Listener (chrome.action.onClicked):
Listens for clicks on the extension's toolbar icon.
Tab Query (chrome.tabs.query):
Searches for any open tabs with the URL matching dashboard.html within the extension.
Conditional Logic:
If Tab Exists (tabs.length > 0):
Activates the first found dashboard.html tab.
If Tab Doesn't Exist:
Creates a new tab with dashboard.html and sets it as active.
Validation and Best Practices
Permissions:
Ensure that your manifest.json includes the "tabs" permission, which you've already added:
"permissions": ["storage", "activeTab", "windows", "tabs"]
This permission is necessary for using chrome.tabs.query and chrome.tabs.update.
Manifest Configuration:
Confirm that your manifest.json correctly references background.js as the service worker:

"background": {
"service_worker": "background.js"
},
Using chrome.runtime.getURL:
This function generates the full URL to dashboard.html, ensuring the correct path. Make sure that:
File Location: dashboard.html is located in the root directory of your extension or adjust the path accordingly.
Resource Availability: All resources (CSS, JS, images) referenced in dashboard.html are correctly linked.
Handling Multiple Tabs:
Currently, the script activates the first instance of dashboard.html it finds. If you want to handle scenarios where multiple instances might exist (despite this logic preventing them), consider enhancing the logic to handle such cases or reinforce the single-instance approach.
Error Handling:
While not strictly necessary, implementing error handling can help debug issues during development.
Example:

chrome.action.onClicked.addListener((tab) => {
chrome.tabs.query({ url: chrome.runtime.getURL("dashboard.html") }, (tabs) => {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
return;
}


if (tabs.length > 0) {
    chrome.tabs.update(tabs[0].id, { active: true });
} else {
    chrome.tabs.create({
        url: chrome.runtime.getURL("dashboard.html"),
        active: true
    }, (newTab) => {
        if (chrome.runtime.lastError) {
            console.error(chrome.runtime.lastError);
        }
    });
}
});
});
This addition logs any runtime errors that might occur during the query or create operations.
Optimizing Tab Query:
If your extension might have multiple pages or if dashboard.html is used in different contexts, consider refining the query to target specifically the extension's dashboard.
Example:

chrome.tabs.query({
url: chrome.runtime.getURL("dashboard.html"),
active: false // Ensures it doesn't rely on current active tab
}, (tabs) => {
// Existing logic
});
Performance Considerations:
The current implementation is efficient for most use cases. However, if dashboard.html is resource-intensive, consider optimizing its loading time by:
Minimizing script execution time.
Defer loading non-essential resources.
Using efficient DOM manipulation techniques.
3. Complete Implementation Example
To provide a comprehensive view, here's how your background.js should look with the recommended enhancements:

// background.js

chrome.action.onClicked.addListener(() => {
const dashboardURL = chrome.runtime.getURL("dashboard.html");

chrome.tabs.query({ url: dashboardURL }, (tabs) => {
if (chrome.runtime.lastError) {
console.error("Tab Query Error:", chrome.runtime.lastError);
return;
}


if (tabs.length > 0) {
    // Activate the first existing dashboard tab
    chrome.tabs.update(tabs[0].id, { active: true }, (updatedTab) => {
        if (chrome.runtime.lastError) {
            console.error("Tab Update Error:", chrome.runtime.lastError);
        }
    });
} else {
    // Create a new dashboard tab
    chrome.tabs.create({ url: dashboardURL, active: true }, (newTab) => {
        if (chrome.runtime.lastError) {
            console.error("Tab Creation Error:", chrome.runtime.lastError);
        }
    });
}
});
});
4. Additional Recommendations
Manifest content_security_policy:
Ensure that your dashboard.html and its scripts comply with the Content Security Policy defined in your manifest.json:

"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
Inline Scripts: Avoid using inline JavaScript (like onclick attributes) in your HTML files, as they are blocked by CSP.
External Scripts: Reference external scripts via to adhere to CSP rules.
Styling and Responsiveness:
Design dashboard.html to be responsive and user-friendly across different screen sizes and devices.
Utilize CSS frameworks or media queries to enhance the layout and usability.
Navigation and User Flow:
Since the dashboard is now a full tab, ensure that navigation within the dashboard is intuitive.
Provide clear options for users to perform actions without unnecessary steps.
Testing Across Scenarios:
Single Tab: Verify that clicking the extension icon when dashboard.html is already open correctly activates the existing tab.
Multiple Panes or Windows: Test how the extension behaves if users have multiple Chrome windows or if dashboard.html is open in multiple windows (though your current logic activates the first found instance).
Edge Cases: Handle situations where dashboard.html fails to load or if the user navigates away from it.
User Feedback:
Consider providing visual or auditory feedback when the dashboard tab is activated or created, enhancing user awareness of the action performed.
Performance Monitoring:
Use Chrome’s Developer Tools to monitor the performance of dashboard.html, ensuring that it doesn't degrade browser performance, especially if it includes media-heavy content like music and videos.
5. Final Steps
Integrate background.js:
Ensure that background.js is placed in the root directory (or correctly referenced path) of your extension folder.
Update manifest.json:
Confirm that the background section is correctly added:

"background": {
"service_worker": "background.js"
},
With Manifest V3, only one background property is allowed, and it should define the service_worker.
Load and Test the Extension:
Load Unpacked Extension:
Navigate to chrome://extensions/ in Chrome.
Enable "Developer mode" via the toggle in the top right.
Click "Load unpacked" and select your extension's root directory.
Test Functionality:
Click the extension's icon.
Verify that dashboard.html opens in a new tab if not already open.
Click the icon again to ensure it activates the existing dashboard.html tab without opening additional tabs.
Debugging:
Use Chrome's Developer Tools to inspect the background.js service worker:
Go to chrome://extensions/.
Find your extension and click "Service worker" under it to open the console.
Monitor for any errors or logs you added for debugging purposes.
Iterate and Improve:
Gather user feedback to identify any usability issues.
Optimize dashboard.html based on performance metrics and user interactions.
Conclusion
Your background.js implementation effectively manages the opening and activation of the dashboard.html tab, enhancing the user experience by preventing multiple dashboard instances. By incorporating the recommended best practices and thorough testing, you can ensure robust and user-friendly functionality in your Chrome extension.

Feel free to share additional files or ask further questions as you continue developing your extension!

Settings

×
Settings
 Full Screen on Play
Load Music
Enter YouTube or Vimeo URL
 No file chosen 
Start Time (seconds)
 Load Music
Load Video
Enter YouTube or Vimeo URL
 No file chosen 
Start Time (seconds)
 Load Video
Play Pause Play from Start
Your dashboard.html serves as the main interface for your Chrome extension, "Media Loader." It provides functionalities for loading and playing music and videos from YouTube, Vimeo, or local files. Overall, the structure is logical and well-organized. However, there are several areas where you can enhance the code for better maintainability, accessibility, performance, and user experience.
Below is a comprehensive review of your dashboard.html along with recommendations and best practices.

HTML Structure and Semantic Elements
Current Structure:
Your current HTML structure uses generic
elements extensively. While functional, leveraging semantic HTML5 elements can improve readability, accessibility, and SEO.
Recommendations:
Use Semantic Elements:
Replace

with
to denote the primary content of the page.
Use
for the settings button section.
Utilize
tags for different functional areas like "Load Music," "Load Video," and "Playback Controls."
Implement
if you plan to add any footer content in the future.
Example:
...
Settings


<!-- Settings Modal -->
...

<!-- Load Music Section -->
<section class="section" id="load-music-section">
    <h2>Load Music</h2>
    ...
</section>

<!-- Load Video Section -->
<section class="section" id="load-video-section">
    <h2>Load Video</h2>
    ...
</section>

<!-- Playback Controls -->
<section class="controls">
    ...
</section>

<!-- Message Container -->
<section id="message-container" class="message-container"></section>
Benefits: Improved accessibility as assistive technologies can better interpret the structure. Enhanced SEO (though less critical for Chrome extensions). Easier maintenance and readability. 2. Accessibility Enhancements Ensuring that your application is accessible to all users, including those using assistive technologies, is crucial.
Recommendations:
Alt Text Descriptions:
Ensure all images have meaningful alt attributes. For purely decorative images, use alt="" to avoid redundancy.

SettingsButton Labels: Add descriptive labels to buttons for screen readers. Settings Keyboard Navigation: Ensure all interactive elements are reachable and operable via keyboard (e.g., using tabindex when necessary). Implement focus states for better visibility. ARIA Roles and Attributes: Enhance modals with ARIA roles for better screen reader support.
×
Settings
...
Form Labels: Associate form inputs with labels for better accessibility.
Music URL
<input type="text" id="music-url" placeholder="Enter YouTube or Vimeo URL" ...>
3. Removing Inline Styles
Inline styles can clutter your HTML and make it harder to maintain. It's best to move all styling to external CSS files.

Current Usage:

Enter YouTube or Vimeo URL
Recommendations: Move Styles to styles.css:
/* styles.css */

input[type="text"],
input[type="number"],
input[type="file"] {
width: 100%;
padding: 8px;
margin-bottom: 8px;
box-sizing: border-box;
}

button {
padding: 10px 20px;
margin: 5px;
cursor: pointer;
}

/* Additional styles... */
Remove Inline Styles:

Enter YouTube or Vimeo URL
Benefits: Cleaner HTML. Easier to manage and update styles. Promotes reusability of styles across different elements. 4. Consistent Naming Conventions Consistency in naming enhances code readability and maintainability.
Recommendations:
ID and Class Naming:
Use consistent naming conventions such as kebab-case (load-music-section), camelCase (musicPlayerContainer), or snake_case based on your preference, but maintain consistency throughout.
Example:

...
Avoid Generic Names: Instead of using generic IDs like settings-button, consider more descriptive names if you have multiple settings-like elements. 5. Optimizing Image Assets Ensure that all image paths are correct and optimized for performance.
Current Usage:

SettingsRecommendations: Verify Paths: Ensure that the icons/icon.png path is correct relative to dashboard.html. Use Appropriate Image Formats: Use SVGs for icons when possible for scalability and better performance.SettingsOptimize Images: Compress images to reduce load times without compromising quality. Example Optimization: Note: If an image is purely decorative, set alt="" and aria-hidden="true" to exclude it from assistive technologies. 6. Modal Implementation Your settings modal is a critical component for user interactions. Ensure it's implemented efficiently and accessibly.
Current Structure:

×
Settings
Full Screen on Play
Recommendations: Accessibility Enhancements: Add ARIA roles and labels as previously mentioned. Trap focus within the modal when it's open to prevent focus from moving to the background content. Allow closing the modal with the Esc key. JavaScript Handling: Ensure that dashboard.js handles opening and closing the modal, managing focus appropriately. Example Enhancements: Notes: Use a for the close action instead of a for better accessibility. Wrap form elements within a
tag for better semantics. CSS Adjustments: Use CSS to handle the hidden attribute for showing/hiding the modal.
/* styles.css */

.modal[hidden] {
display: none;
}

.modal {
/* Modal styles */
}
JavaScript Example:

// dashboard.js

document.addEventListener('DOMContentLoaded', () => {
const settingsButton = document.getElementById('settings-button');
const settingsModal = document.getElementById('settings-modal');
const closeButton = settingsModal.querySelector('.close-button');

settingsButton.addEventListener('click', () => {
settingsModal.removeAttribute('hidden');
settingsModal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus();
});

closeButton.addEventListener('click', () => {
settingsModal.setAttribute('hidden', '');
settingsButton.focus();
});

// Close modal on Esc key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !settingsModal.hasAttribute('hidden')) {
settingsModal.setAttribute('hidden', '');
settingsButton.focus();
}
});

// Trap focus within the modal
// Implementation can be added here...
});
7. Form Inputs and Buttons
Your form inputs and buttons are set up to capture user data and trigger actions. Let's ensure they're both functional and user-friendly.

Recommendations:
Labels for Inputs:
Ensure every input has an associated for better accessibility.

Music URL
Enter YouTube or Vimeo URL

Grouping Related Inputs:
Use

andto group related form controls.
Load Music
Music URL
Enter YouTube or Vimeo URL
...
Button States: Ensure buttons are appropriately enabled or disabled based on the form's state. This is already partially handled by disabling playback controls initially. Consistent Button Styles: Apply consistent styling for buttons using CSS classes instead of individual button IDs, if applicable. Example Form Structure:
Load Music


<label for="music-url">Music URL</label>
<input type="text" id="music-url" name="music-url" placeholder="Enter YouTube or Vimeo URL">

<label for="music-file">Upload Music File</label>
<input type="file" id="music-file" name="music-file" accept="audio/*">

<label for="music-start">Start Time (seconds)</label>
<input type="number" id="music-start" name="music-start" placeholder="Start Time (seconds)" min="0">

<button id="load-music" class="load-button">Load Music</button>
8. Media Player Containers You have containers for music and video players. Ensuring that these containers are ready to dynamically host media elements is essential. Recommendations: Dynamic Content Handling: Ensure dashboard.js correctly injects media players (e.g.,
/* styles.css */

.player-container {
margin-top: 10px;
/* Additional styles for responsive design */
}

audio,
video {
width: 100%;
max-width: 100%;
height: auto;
}
Accessibility:
Add controls to media elements and provide captions or transcripts if necessary.
9. Playback Controls
Your playback controls allow users to play, pause, and restart media. Ensuring their functionality and state management is crucial.

Recommendations:
Button Accessibility:
Add aria-label attributes to buttons for better screen reader support.

Play
Pause
Play from Start
State Management:
Ensure that dashboard.js correctly manages the disabled state of these buttons based on media availability and playback status.
Consistent Button Types:
Specify button types to prevent unintended form submissions.

Play
10. Message Container
The message container displays feedback to users. Proper handling enhances user experience.

Recommendations:
Dynamic Messages:
Ensure that dashboard.js dynamically updates this container with success, error, or informational messages.
Styling Messages:
Use CSS classes to style different types of messages (e.g., success, error).

/* styles.css */

.message-container {
margin-top: 20px;
padding: 10px;
border-radius: 5px;
display: none; /* Hidden by default */
}

.message-container.success {
background-color: #d4edda;
color: #155724;
}

.message-container.error {
background-color: #f8d7da;
color: #721c24;
}

.message-container.info {
background-color: #cce5ff;
color: #004085;
}
Accessibility:
Announce dynamic messages to assistive technologies using ARIA roles.

JavaScript Handling:
// dashboard.js

function showMessage(message, type = 'info') {
const messageContainer = document.getElementById('message-container');
messageContainer.textContent = message;
messageContainer.className = message-container ${type};
messageContainer.style.display = 'block';

// Automatically hide after 5 seconds
setTimeout(() => {
messageContainer.style.display = 'none';
}, 5000);
}
11. External Resources and Security
Given that your extension interacts with external URLs (YouTube and Vimeo) and handles file uploads, it's crucial to manage security and permissions appropriately.

Recommendations:
Content Security Policy (CSP):
Ensure that your manifest.json's content_security_policy allows only necessary sources.
Avoid using unsafe-inline scripts or styles.
Validating User Inputs:
Sanitize and validate all user inputs to prevent potential security vulnerabilities like Cross-Site Scripting (XSS).
Handling File Uploads:
Securely handle file uploads to prevent malicious files from being executed.
Limit file sizes and types as necessary.
External API Usage:
If embedding YouTube or Vimeo players, ensure you're using their respective APIs securely.
Permissions:
Only request the necessary permissions in manifest.json. For example, if you don't need access to all tabs, be specific in your permissions to enhance user trust and comply with Chrome Web Store policies.
12. Performance Optimization
Ensuring that your dashboard loads quickly and runs smoothly is essential for a good user experience.

Recommendations:
Minimize Resource Loads:
Combine and minify CSS and JavaScript files where possible.
Optimize images and other media assets for size without sacrificing quality.
Lazy Loading:
Implement lazy loading for media players or other heavy components to improve initial load times.
Efficient DOM Manipulation:
Optimize JavaScript to minimize reflows and repaints.
Caching:
Use caching strategies for frequently accessed resources to reduce load times.
13. Responsive Design
Your dashboard should be accessible and functional across various devices and screen sizes.

Recommendations:
Flexbox and Grid:
Utilize CSS Flexbox or Grid layouts to create responsive and flexible layouts.

/* styles.css */

.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}

.section {
width: 100%;
margin-bottom: 20px;
}

@media (max-width: 600px) {
.container {
padding: 10px;
}
}
Viewport Meta Tag:
You've already included the viewport meta tag, which is excellent for responsiveness.

Flexible Media: Ensure media elements like

Certainly! Let's address your requirements step-by-step to ensure your Chrome extension, "Media Loader," functions seamlessly:

Settings Modal Hidden by Default:
Ensure that the settings modal is not visible when the dashboard loads.
Settings Button Positioned at the Top Left:
Add a small square settings button at the top left of the dashboard that, when clicked, opens the settings modal.
Below are the complete and adjusted files for your Chrome extension with these enhancements.

Folder Structure
Ensure your project directory (media-loader/) is organized as follows:
media-loader/
├── icons/
│ ├── icon16.png
│ ├── icon48.png
│ ├── icon128.png
│ └── settings.svg
├── background.js
├── dashboard.html
├── dashboard.js
├── styles.css
└── manifest.json
2. manifest.json
Defines your Chrome extension's metadata, permissions, and resources.

{
"manifest_version": 3,
"name": "Media Loader",
"version": "1.0",
"description": "Load and play music and videos from YouTube and Vimeo",
"permissions": ["storage", "tabs"],
"host_permissions": [
"https://www.youtube.com/",
"https://player.vimeo.com/"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Open Media Loader",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
}
Key Points:

Removed External Script Sources: To comply with CSP, only scripts within the extension ('self') are allowed.
Host Permissions: Explicitly allows interactions with YouTube and Vimeo URLs for embedding media.
Permissions: Only essential permissions (storage, tabs) are included to adhere to the principle of least privilege.
3. background.js
Handles the extension icon click to open the dashboard in a new tab.

// background.js

chrome.action.onClicked.addListener(() => {
const dashboardURL = chrome.runtime.getURL("dashboard.html");


// Query for any existing tabs with the dashboard URL
chrome.tabs.query({ url: dashboardURL }, (tabs) => {
    if (chrome.runtime.lastError) {
        console.error("Tab Query Error:", chrome.runtime.lastError);
        return;
    }

    if (tabs.length > 0) {
        // Activate the first existing dashboard tab
        chrome.tabs.update(tabs[0].id, { active: true }, (updatedTab) => {
            if (chrome.runtime.lastError) {
                console.error("Tab Update Error:", chrome.runtime.lastError);
            }
        });
    } else {
        // Create a new dashboard tab
        chrome.tabs.create({ url: dashboardURL, active: true }, (newTab) => {
            if (chrome.runtime.lastError) {
                console.error("Tab Creation Error:", chrome.runtime.lastError);
            }
        });
    }
});
});
Functionality Overview:

Single Dashboard Tab: Ensures only one instance of the dashboard is open by activating an existing tab if found.
Error Handling: Logs errors encountered during tab querying or creation.
4. dashboard.html
The main interface of your extension displayed in a new tab. It includes sections for loading music and videos, playback controls, and a settings modal with the settings button positioned at the top left.



    <!-- Settings Modal -->
    <div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
        <div class="modal-content">
            <button class="close-button" aria-label="Close Settings Modal">&times;</button>
            <h2 id="settings-modal-title">Settings</h2>
            <form>
                <label for="fullscreen-toggle">
                    <input type="checkbox" id="fullscreen-toggle" name="fullscreen-toggle">
                    Full Screen on Play
                </label>
                <!-- Additional settings can go here -->
            </form>
        </div>
    </div>

    <!-- Load Music Section -->
    <section class="section" id="load-music-section">
        <fieldset>
            <legend>Load Music</legend>
            
            <label for="music-url">Music URL</label>
            <input type="text" id="music-url" name="music-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="music-file">Upload Music File</label>
            <input type="file" id="music-file" name="music-file" accept="audio/*">

            <label for="music-start">Start Time (seconds)</label>
            <input type="number" id="music-start" name="music-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-music" class="load-button">Load Music</button>
        </fieldset>
        <div id="music-player-container" class="player-container"></div>
    </section>

    <!-- Load Video Section -->
    <section class="section" id="load-video-section">
        <fieldset>
            <legend>Load Video</legend>
            
            <label for="video-url">Video URL</label>
            <input type="text" id="video-url" name="video-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="video-file">Upload Video File</label>
            <input type="file" id="video-file" name="video-file" accept="video/*">

            <label for="video-start">Start Time (seconds)</label>
            <input type="number" id="video-start" name="video-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-video" class="load-button">Load Video</button>
        </fieldset>
        <div id="video-player-container" class="player-container"></div>
    </section>

    <!-- Playback Controls -->
    <section class="controls">
        <button type="button" id="play-button" disabled aria-label="Play">Play</button>
        <button type="button" id="pause-resume-button" disabled aria-label="Pause">Pause</button>
        <button type="button" id="play-start-button" disabled aria-label="Play from Start">Play from Start</button>
    </section>

    <!-- Message Container -->
    <section id="message-container" class="message-container" role="alert" aria-live="assertive"></section>
</main>

<script src="dashboard.js"></script>
Key Features:
Settings Button Positioned at Top Left:
The settings button is located within the header and styled to appear at the top left via CSS.
Settings Modal Hidden by Default:
The hidden attribute ensures the modal is not visible upon loading. It only appears when the settings button is clicked.
Accessible Elements:
ARIA attributes enhance accessibility, ensuring compatibility with assistive technologies.
5. dashboard.js
Manages loading, playing, pausing, and state management of media within the dashboard. It embeds YouTube and Vimeo videos using standard iframe parameters without relying on external APIs to comply with CSP.

// dashboard.js

document.addEventListener('DOMContentLoaded', () => {
// === Element References ===
const elements = {
music: {
urlInput: document.getElementById('music-url'),
fileInput: document.getElementById('music-file'),
startInput: document.getElementById('music-start'),
loadButton: document.getElementById('load-music'),
playerContainer: document.getElementById('music-player-container')
},
video: {
urlInput: document.getElementById('video-url'),
fileInput: document.getElementById('video-file'),
startInput: document.getElementById('video-start'),
loadButton: document.getElementById('load-video'),
playerContainer: document.getElementById('video-player-container')
},
controls: {
playButton: document.getElementById('play-button'),
pauseResumeButton: document.getElementById('pause-resume-button'),
playStartButton: document.getElementById('play-start-button')
},
messageContainer: document.getElementById('message-container'),
settings: {
button: document.getElementById('settings-button'),
modal: document.getElementById('settings-modal'),
closeButton: document.querySelector('.close-button'),
fullscreenToggle: document.getElementById('fullscreen-toggle')
}
};


// === State Management ===
const state = {
    music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
    video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
    isPaused: false,
    fullscreenOnPlay: false
};

// === Initialization ===
loadSettings();

// === Event Listeners ===
elements.music.loadButton.addEventListener('click', handleLoadMusic);
elements.video.loadButton.addEventListener('click', handleLoadVideo);
elements.controls.playButton.addEventListener('click', handlePlay);
elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

// Settings Modal Event Listeners
elements.settings.button.addEventListener('click', openSettingsModal);
elements.settings.closeButton.addEventListener('click', closeSettingsModal);
window.addEventListener('click', (event) => {
    if (event.target === elements.settings.modal) {
        closeSettingsModal();
    }
});
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
        closeSettingsModal();
    }
});
elements.settings.fullscreenToggle.addEventListener('change', (event) => {
    state.fullscreenOnPlay = event.target.checked;
    saveSettings();
});

// === Handler Functions ===

// Load Music Handler
function handleLoadMusic() {
    const url = elements.music.urlInput.value.trim();
    const file = elements.music.fileInput.files[0];
    const start = parseInt(elements.music.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.music.playerContainer);

    // Unload existing music if any
    if (state.music) {
        unloadMedia('music');
    }

    if (file) {
        if (file.size > 10 * 1024 * 1024) { // 10MB limit
            showMessage(elements.messageContainer, 'Music file size exceeds 10MB limit.', 'error');
            hideLoading(elements.music.playerContainer);
            return;
        }

        // Handle local audio file
        const fileUrl = URL.createObjectURL(file);
        const audioElement = document.createElement('audio');
        audioElement.controls = true;
        audioElement.src = fileUrl;
        audioElement.id = 'loaded-music';
        elements.music.playerContainer.innerHTML = '';
        elements.music.playerContainer.appendChild(audioElement);

        state.music = {
            type: 'file',
            element: audioElement,
            start: start
        };
        showMessage(elements.messageContainer, 'Local audio file loaded.', 'success');
        hideLoading(elements.music.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
            }
            showMessage(elements.messageContainer, `Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
            hideLoading(elements.music.playerContainer);
        } else {
            showMessage(elements.messageContainer, 'Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.music.playerContainer);
        }
    } else {
        showMessage(elements.messageContainer, 'Please enter a URL or select a file.', 'error');
        hideLoading(elements.music.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Load Video Handler
function handleLoadVideo() {
    const url = elements.video.urlInput.value.trim();
    const file = elements.video.fileInput.files[0];
    const start = parseInt(elements.video.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.video.playerContainer);

    // Unload existing video if any
    if (state.video) {
        unloadMedia('video');
    }

    if (file) {
        if (file.size > 50 * 1024 * 1024) { // 50MB limit
            showMessage(elements.messageContainer, 'Video file size exceeds 50MB limit.', 'error');
            hideLoading(elements.video.playerContainer);
            return;
        }

        // Handle local video file
        const fileUrl = URL.createObjectURL(file);
        const videoElement = document.createElement('video');
        videoElement.controls = true;
        videoElement.src = fileUrl;
        videoElement.id = 'loaded-video';
        elements.video.playerContainer.innerHTML = '';
        elements.video.playerContainer.appendChild(videoElement);

        state.video = {
            type: 'file',
            element: videoElement,
            start: start
        };
        showMessage(elements.messageContainer, 'Local video file loaded.', 'success');
        hideLoading(elements.video.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
            }
            showMessage(elements.messageContainer, `Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
            hideLoading(elements.video.playerContainer);
        } else {
            showMessage(elements.messageContainer, 'Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.video.playerContainer);
        }
    } else {
        showMessage(elements.messageContainer, 'Please enter a URL or select a file.', 'error');
        hideLoading(elements.video.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Play Handler
function handlePlay() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            state.music.element.play();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            state.video.element.play();
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback started!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// Pause/Resume Handler
function handlePauseResume() {
    if (state.isPaused) {
        resumeMedia();
    } else {
        pauseMedia();
    }
}

// Pause Media
function pauseMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.pause();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            state.music.element.pause();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.pause();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            state.video.element.pause();
        }
    }

    state.isPaused = true;
    elements.controls.pauseResumeButton.textContent = 'Resume';
    showMessage(elements.messageContainer, 'Playback paused.', 'info');
}

// Resume Media
function resumeMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            state.music.element.play();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            state.video.element.play();
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback resumed.', 'success');
}

// Play From Start Handler
function handlePlayFromStart() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.currentTime = state.music.start;
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            state.music.element.currentTime = state.music.start;
            state.music.element.play();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.currentTime = state.video.start;
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            state.video.element.currentTime = state.video.start;
            state.video.element.play();
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback restarted!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// === Settings Modal Functions ===
function openSettingsModal() {
    elements.settings.modal.removeAttribute('hidden');
    elements.settings.modal.setAttribute('aria-hidden', 'false');
    elements.settings.modal.querySelector('.close-button').focus();
    trapFocus(elements.settings.modal);
}

function closeSettingsModal() {
    elements.settings.modal.setAttribute('hidden', '');
    elements.settings.modal.setAttribute('aria-hidden', 'true');
    elements.settings.button.focus();
    removeTrapFocus();
}

// Focus Trap Implementation
let focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
    textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
    [contenteditable]';
let focusableElements;
let firstTabStop;
let lastTabStop;

function trapFocus(element) {
    focusableElements = element.querySelectorAll(focusableElementsString);
    focusableElements = Array.prototype.slice.call(focusableElements);

    if (focusableElements.length === 0) return;

    firstTabStop = focusableElements[0];
    lastTabStop = focusableElements[focusableElements.length - 1];

    // Listen for and trap the keyboard
    element.addEventListener('keydown', trapTabKey);
}

function trapTabKey(e) {
    // Check for TAB key press
    if (e.key === 'Tab') {
        // SHIFT + TAB
        if (e.shiftKey) {
            if (document.activeElement === firstTabStop) {
                e.preventDefault();
                lastTabStop.focus();
            }
        } else { // TAB
            if (document.activeElement === lastTabStop) {
                e.preventDefault();
                firstTabStop.focus();
            }
        }
    }
}

function removeTrapFocus() {
    elements.settings.modal.removeEventListener('keydown', trapTabKey);
}

// === Utility Functions ===

// Extract Media Information from URL
function extractMediaInfo(url) {
    try {
        const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
        const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
        const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

        let match = url.match(youtubeRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(youtubeShortRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(vimeoRegex);
        if (match && match[1]) {
            return { platform: 'vimeo', id: match[1] };
        }

        return null;
    } catch (error) {
        console.error('Error extracting media info:', error);
        return null;
    }
}

// Capitalize First Letter
function capitalize(text) {
    if (!text) return '';
    return text.charAt(0).toUpperCase() + text.slice(1);
}

// Show Messages to User
function showMessage(container, message, type) {
    container.innerHTML = '';
    const msgDiv = document.createElement('div');
    msgDiv.textContent = message;
    msgDiv.classList.add('message', type); // 'success', 'error', 'info'
    container.appendChild(msgDiv);

    // Automatically hide message after 5 seconds
    setTimeout(() => {
        if (container.contains(msgDiv)) {
            container.removeChild(msgDiv);
        }
    }, 5000);
}

// Show Loading Indicator
function showLoading(container) {
    container.innerHTML = '';
    const loader = document.createElement('div');
    loader.classList.add('loader'); // Define loader styles in CSS
    container.appendChild(loader);
}

function hideLoading(container) {
    const loader = container.querySelector('.loader');
    if (loader) {
        container.removeChild(loader);
    }
}

// Check if Playback Buttons Should be Enabled
function checkReadyToPlay() {
    const ready = state.music || state.video;
    elements.controls.playButton.disabled = !ready;
    elements.controls.pauseResumeButton.disabled = !ready;
    elements.controls.playStartButton.disabled = !ready;
}

// Enter Fullscreen Mode
function enterFullscreen() {
    let targetElement = null;
    if (state.video && state.video.element) {
        // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
        targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
    } else if (state.music && state.music.element) {
        targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
    }

    if (targetElement && targetElement.requestFullscreen) {
        targetElement.requestFullscreen().then(() => {
            showMessage(elements.messageContainer, 'Entered fullscreen mode.', 'success');
        }).catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            showMessage(elements.messageContainer, 'Failed to enter fullscreen mode.', 'error');
        });
    } else {
        showMessage(elements.messageContainer, 'Fullscreen not supported on this element.', 'error');
    }
}

// === Media Embedding Functions ===

// Embed YouTube Video without API
function embedYouTubeVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.width = '100%';
    iframe.height = '360';
    iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
    iframe.frameBorder = '0';
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'youtube',
        element: iframe,
        start: start
    };
}

// Embed Vimeo Video without API
function embedVimeoVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
    iframe.width = '100%';
    iframe.height = '360';
    iframe.frameBorder = '0';
    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'vimeo',
        element: iframe,
        start: start
    };
}

// === Settings Management ===

// Load Settings from Chrome Storage
function loadSettings() {
    chrome.storage.local.get(['mediaSettings'], (result) => {
        if (chrome.runtime.lastError) {
            console.error('Error loading settings:', chrome.runtime.lastError);
            showMessage(elements.messageContainer, 'Failed to load settings.', 'error');
            return;
        }

        if (result.mediaSettings) {
            const { music, video, fullscreenOnPlay: fsPlay } = result.mediaSettings;

            if (music) {
                if (music.type === 'youtube' || music.type === 'vimeo') {
                    const url = music.type === 'youtube' 
                        ? `https://www.youtube.com/watch?v=${music.id}` 
                        : `https://vimeo.com/${music.id}`;
                    elements.music.urlInput.value = url;
                    elements.music.startInput.value = music.start || 0;
                    // Optionally, auto-load the media by triggering the load button
                    // handleLoadMusic();
                }
                // Handle file-based music loading if necessary
            }

            if (video) {
                if (video.type === 'youtube' || video.type === 'vimeo') {
                    const url = video.type === 'youtube' 
                        ? `https://www.youtube.com/watch?v=${video.id}` 
                        : `https://vimeo.com/${video.id}`;
                    elements.video.urlInput.value = url;
                    elements.video.startInput.value = video.start || 0;
                    // Optionally, auto-load the media by triggering the load button
                    // handleLoadVideo();
                }
                // Handle file-based video loading if necessary
            }

            if (typeof fsPlay === 'boolean') {
                state.fullscreenOnPlay = fsPlay;
                elements.settings.fullscreenToggle.checked = fsPlay;
            }
        }
    });
}

// Save Settings to Chrome Storage
function saveSettings() {
    const settings = {
        music: state.music,
        video: state.video,
        fullscreenOnPlay: state.fullscreenOnPlay
    };
    chrome.storage.local.set({ mediaSettings: settings }, () => {
        if (chrome.runtime.lastError) {
            console.error('Error saving settings:', chrome.runtime.lastError);
            showMessage(elements.messageContainer, 'Error saving settings.', 'error');
            return;
        }
        console.log('Settings saved.');
    });
}
});
Key Enhancements:

Settings Modal Not Active on Launch:
The modal remains hidden by default (hidden attribute in dashboard.html).
It only becomes visible when the settings button is clicked.
Settings Button Positioned at Top Left:
Adjusted the header in dashboard.html to position the settings button at the top left.
The corresponding CSS ensures it appears as a small square.
Removed External APIs:
Embedding YouTube and Vimeo videos now uses standard iframe embeds with query parameters.
This approach complies with CSP by avoiding external script inclusions.
Consistent Function Definitions:
Ensured that all functions (loadSettings, saveSettings, etc.) are defined within the scope of dashboard.js.
Prevented any undefined function errors by structuring the script correctly.
6. styles.css
Defines the visual appearance of your dashboard, including layout, responsiveness, button styles, and positioning of the settings button.

/* styles.css */

/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}

.section {
width: 100%;
margin-bottom: 20px;
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.controls button {
padding: 10px 20px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4285f4;
color: #fff;
transition: background-color 0.3s ease;
}

.controls button:disabled {
background-color: #a0c3ff;
cursor: not-allowed;
}

.controls button:hover:not(:disabled) {
background-color: #357ae8;
}

/* Settings Button positioned at Top Left */
.settings-container {
position: absolute;
top: 20px;
left: 20px;
}

.settings-button {
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

.settings-button:hover {
background-color: #f0f0f0;
border-color: #999;
}

.settings-icon {
width: 20px;
height: 20px;
}

/* Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.modal-content {
background-color: #fff;
padding: 20px 30px;
border-radius: 8px;
width: 90%;
max-width: 400px;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}

.modal-content h2 {
margin-top: 0;
}

/* Form Elements */
fieldset {
border: none;
padding: 0;
}

fieldset label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

fieldset input[type="text"],
fieldset input[type="number"],
fieldset input[type="file"] {
width: 100%;
padding: 8px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

fieldset .load-button {
width: 100%;
padding: 10px;
background-color: #34a853;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

fieldset .load-button:hover {
background-color: #2c8e46;
}

/* Player Containers */
.player-container {
margin-top: 10px;
}

/* Messages */
.message-container {
margin-top: 20px;
width: 100%;
}

.message {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
color: #fff;
}

.message.success {
background-color: #4caf50;
}

.message.error {
background-color: #f44336;
}

.message.info {
background-color: #2196f3;
}

/* Loader /
.loader {
border: 8px solid #f3f3f3; / Light grey /
border-top: 8px solid #4285f4; / Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 600px) {
.container {
padding: 10px;
}


.modal-content {
    padding: 15px 20px;
}

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

.controls button {
    width: 100%;
}

.settings-container {
    top: 10px;
    left: 10px;
}

.settings-button {
    width: 35px;
    height: 35px;
}

.settings-icon {
    width: 18px;
    height: 18px;
}
}
Key Enhancements:

Settings Button Positioning:
Positioned the settings button at the top left using absolute positioning within the .settings-container.
Styled the button to appear as a small square with hover effects.
Modal Hidden by Default:
The hidden attribute in the modal ensures it remains invisible until activated.
Responsive Design:
Adjusted the settings button size and positioning for smaller screens.
7. Icons
Ensure that your icons/ folder contains the following icon files:

icon16.png
icon48.png
icon128.png
settings.svg
Notes:

Icon Sizes:
Chrome requires specific icon sizes for different contexts. Ensure each icon is correctly sized and optimized.
Design Best Practices:
Use clear and recognizable icons.
Keep designs simple for scalability across different sizes.
Example:

If you don't have a settings.svg, you can create one using vector graphic tools like Adobe Illustrator or free alternatives like Inkscape. Alternatively, you can source free icons from platforms like Flaticon or Iconfinder.

Loading the Extension into Chrome
Prepare the Extension Directory:
Ensure all files (manifest.json, background.js, dashboard.html, dashboard.js, styles.css, and the icons/ folder) are correctly placed within the media-loader/ directory.
Open Chrome Extensions Page:
Navigate to chrome://extensions/ in your Chrome browser.
Enable Developer Mode:
Toggle the "Developer mode" switch in the top right corner.
Load Unpacked Extension:
Click the "Load unpacked" button.
Select the media-loader/ directory.
Verify Installation:
Ensure that the "Media Loader" extension appears in the list without errors.
The extension icon should be visible in the Chrome toolbar at the top left.
Test Functionality:
Open Dashboard:
Click the extension icon. A new tab should open displaying the dashboard.
Load Media:
Test loading media via YouTube/Vimeo URLs and local files.
Playback Controls:
Use the "Play," "Pause/Resume," and "Play from Start" buttons to control media playback.
Settings Modal:
Click the settings button (small square at the top left) to open the modal.
Toggle "Full Screen on Play" and verify functionality.
Responsive Design:
Resize the browser window to ensure the dashboard remains responsive and the settings button adjusts appropriately.
Troubleshooting:
CSP Errors:
Ensure no external script sources are included in dashboard.html. All scripts should be loaded locally.
Undefined Functions:
Confirm that all functions in dashboard.js are correctly defined and there are no typographical errors.
Developer Tools:
Use Chrome's Developer Tools (F12) to inspect dashboard.js and background.js for any runtime errors or issues.
Final Recommendations
Accessibility Enhancements:
Continuously test with screen readers and keyboard navigation to ensure full accessibility compliance.
Performance Optimization:
Monitor the extension's performance using Chrome DevTools to identify and address any bottlenecks.
Handle Edge Cases:
Implement error handling for unsupported media formats or network issues during media loading.
User Guidance:
Consider adding tooltips or help sections to guide new users on utilizing the extension's features effectively.
Security Audits:
Regularly review your code for potential security vulnerabilities, especially when handling user inputs and external content.
Version Control:
Use Git or another version control system to manage your codebase efficiently, allowing for tracking changes and collaborative development.
Conclusion
By following the structured and comprehensive setup outlined above, your "Media Loader" Chrome extension should function seamlessly, offering users an intuitive and feature-rich interface for loading and managing media from YouTube, Vimeo, and local files. The key adjustments ensure that:
Settings Modal: Remains hidden by default and is accessible via a small square settings button at the top left.
Content Security Policy (CSP): Is strictly adhered to by avoiding external script inclusions, thereby enhancing security.
User Experience: Is optimized through responsive design, accessible features, and clear user feedback mechanisms.
If you encounter further issues or have additional requirements, feel free to reach out for more assistance!

the settings screen is open when i launch the extension and wont close. also would this whole project be convertible to a safari extension?

I'm sorry to hear you're encountering issues with your Chrome extension. Let's address both of your concerns:

Fixing the Settings Modal Issue
Converting the Extension to Safari

Fixing the Settings Modal Issue
Problem Overview
Issue: The settings modal is open by default when the dashboard loads and cannot be closed.
Solution Overview
Ensure Modal is Hidden by Default: Verify that the modal has the hidden attribute in dashboard.html.
Proper Event Handling: Ensure that dashboard.js correctly manages the opening and closing of the modal without inadvertently triggering it on load.
Check for JavaScript Errors: Ensure there are no errors in the console that might prevent scripts from executing correctly.
Step-by-Step Fix
A. Verify dashboard.html
Ensure that the settings modal is correctly set to be hidden by default and that the settings button is positioned at the top left.


    <!-- Settings Modal -->
    <div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
        <div class="modal-content">
            <button class="close-button" aria-label="Close Settings Modal">&times;</button>
            <h2 id="settings-modal-title">Settings</h2>
            <form>
                <label for="fullscreen-toggle">
                    <input type="checkbox" id="fullscreen-toggle" name="fullscreen-toggle">
                    Full Screen on Play
                </label>
                <!-- Additional settings can go here -->
            </form>
        </div>
    </div>

    <!-- Load Music Section -->
    <section class="section" id="load-music-section">
        <fieldset>
            <legend>Load Music</legend>
            
            <label for="music-url">Music URL</label>
            <input type="text" id="music-url" name="music-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="music-file">Upload Music File</label>
            <input type="file" id="music-file" name="music-file" accept="audio/*">

            <label for="music-start">Start Time (seconds)</label>
            <input type="number" id="music-start" name="music-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-music" class="load-button">Load Music</button>
        </fieldset>
        <div id="music-player-container" class="player-container"></div>
    </section>

    <!-- Load Video Section -->
    <section class="section" id="load-video-section">
        <fieldset>
            <legend>Load Video</legend>
            
            <label for="video-url">Video URL</label>
            <input type="text" id="video-url" name="video-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="video-file">Upload Video File</label>
            <input type="file" id="video-file" name="video-file" accept="video/*">

            <label for="video-start">Start Time (seconds)</label>
            <input type="number" id="video-start" name="video-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-video" class="load-button">Load Video</button>
        </fieldset>
        <div id="video-player-container" class="player-container"></div>
    </section>

    <!-- Playback Controls -->
    <section class="controls">
        <button type="button" id="play-button" disabled aria-label="Play">Play</button>
        <button type="button" id="pause-resume-button" disabled aria-label="Pause">Pause</button>
        <button type="button" id="play-start-button" disabled aria-label="Play from Start">Play from Start</button>
    </section>

    <!-- Message Container -->
    <section id="message-container" class="message-container" role="alert" aria-live="assertive"></section>
</main>

<script src="dashboard.js"></script>
Key Points:
The settings-modal

has the hidden attribute, ensuring it's not visible on load.
The settings button is placed within a
with the class settings-container, which will be styled to appear at the top left.
B. Verify styles.css
Ensure that the settings button is properly styled to appear as a small square at the top left.
/* styles.css */

/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
position: relative; /* To position settings button absolutely within the container */
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}

.section {
width: 100%;
margin-bottom: 20px;
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.controls button {
padding: 10px 20px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4285f4;
color: #fff;
transition: background-color 0.3s ease;
}

.controls button:disabled {
background-color: #a0c3ff;
cursor: not-allowed;
}

.controls button:hover:not(:disabled) {
background-color: #357ae8;
}

/* Settings Button positioned at Top Left */
.settings-container {
position: absolute;
top: 20px;
left: 20px;
}

.settings-button {
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

.settings-button:hover {
background-color: #f0f0f0;
border-color: #999;
}

.settings-icon {
width: 20px;
height: 20px;
}

/* Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.modal-content {
background-color: #fff;
padding: 20px 30px;
border-radius: 8px;
width: 90%;
max-width: 400px;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}

.modal-content h2 {
margin-top: 0;
}

/* Form Elements */
fieldset {
border: none;
padding: 0;
}

fieldset label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

fieldset input[type="text"],
fieldset input[type="number"],
fieldset input[type="file"] {
width: 100%;
padding: 8px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

fieldset .load-button {
width: 100%;
padding: 10px;
background-color: #34a853;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

fieldset .load-button:hover {
background-color: #2c8e46;
}

/* Player Containers */
.player-container {
margin-top: 10px;
}

/* Messages */
.message-container {
margin-top: 20px;
width: 100%;
}

.message {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
color: #fff;
}

.message.success {
background-color: #4caf50;
}

.message.error {
background-color: #f44336;
}

.message.info {
background-color: #2196f3;
}

/* Loader /
.loader {
border: 8px solid #f3f3f3; / Light grey /
border-top: 8px solid #4285f4; / Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 600px) {
.container {
padding: 10px;
}


.modal-content {
    padding: 15px 20px;
}

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

.controls button {
    width: 100%;
}

.settings-container {
    top: 10px;
    left: 10px;
}

.settings-button {
    width: 35px;
    height: 35px;
}

.settings-icon {
    width: 18px;
    height: 18px;
}
}
Key Points:

settings-container: Positioned absolute within the .container to ensure the settings button appears at the top left.
.loader: Defines a spinning loader to indicate loading states.
Responsive Adjustments: Ensures the settings button adjusts size and position on smaller screens.
C. Verify dashboard.js
Ensure that all functions are correctly defined and that no code inadvertently displays the modal on load.

// dashboard.js

document.addEventListener('DOMContentLoaded', () => {
// === Element References ===
const elements = {
music: {
urlInput: document.getElementById('music-url'),
fileInput: document.getElementById('music-file'),
startInput: document.getElementById('music-start'),
loadButton: document.getElementById('load-music'),
playerContainer: document.getElementById('music-player-container')
},
video: {
urlInput: document.getElementById('video-url'),
fileInput: document.getElementById('video-file'),
startInput: document.getElementById('video-start'),
loadButton: document.getElementById('load-video'),
playerContainer: document.getElementById('video-player-container')
},
controls: {
playButton: document.getElementById('play-button'),
pauseResumeButton: document.getElementById('pause-resume-button'),
playStartButton: document.getElementById('play-start-button')
},
messageContainer: document.getElementById('message-container'),
settings: {
button: document.getElementById('settings-button'),
modal: document.getElementById('settings-modal'),
closeButton: document.querySelector('.close-button'),
fullscreenToggle: document.getElementById('fullscreen-toggle')
}
};


// === State Management ===
const state = {
    music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
    video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
    isPaused: false,
    fullscreenOnPlay: false
};

// === Initialization ===
loadSettings();

// === Event Listeners ===
elements.music.loadButton.addEventListener('click', handleLoadMusic);
elements.video.loadButton.addEventListener('click', handleLoadVideo);
elements.controls.playButton.addEventListener('click', handlePlay);
elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

// Settings Modal Event Listeners
elements.settings.button.addEventListener('click', openSettingsModal);
elements.settings.closeButton.addEventListener('click', closeSettingsModal);
window.addEventListener('click', (event) => {
    if (event.target === elements.settings.modal) {
        closeSettingsModal();
    }
});
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
        closeSettingsModal();
    }
});
elements.settings.fullscreenToggle.addEventListener('change', (event) => {
    state.fullscreenOnPlay = event.target.checked;
    saveSettings();
});

// === Handler Functions ===

// Load Music Handler
function handleLoadMusic() {
    const url = elements.music.urlInput.value.trim();
    const file = elements.music.fileInput.files[0];
    const start = parseInt(elements.music.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.music.playerContainer);

    // Unload existing music if any
    if (state.music) {
        unloadMedia('music');
    }

    if (file) {
        if (file.size > 10 * 1024 * 1024) { // 10MB limit
            showMessage(elements.messageContainer, 'Music file size exceeds 10MB limit.', 'error');
            hideLoading(elements.music.playerContainer);
            return;
        }

        // Handle local audio file
        const fileUrl = URL.createObjectURL(file);
        const audioElement = document.createElement('audio');
        audioElement.controls = true;
        audioElement.src = fileUrl;
        audioElement.id = 'loaded-music';
        elements.music.playerContainer.innerHTML = '';
        elements.music.playerContainer.appendChild(audioElement);

        state.music = {
            type: 'file',
            element: audioElement,
            start: start
        };
        showMessage(elements.messageContainer, 'Local audio file loaded.', 'success');
        hideLoading(elements.music.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
            }
            showMessage(elements.messageContainer, `Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
            hideLoading(elements.music.playerContainer);
        } else {
            showMessage(elements.messageContainer, 'Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.music.playerContainer);
        }
    } else {
        showMessage(elements.messageContainer, 'Please enter a URL or select a file.', 'error');
        hideLoading(elements.music.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Load Video Handler
function handleLoadVideo() {
    const url = elements.video.urlInput.value.trim();
    const file = elements.video.fileInput.files[0];
    const start = parseInt(elements.video.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.video.playerContainer);

    // Unload existing video if any
    if (state.video) {
        unloadMedia('video');
    }

    if (file) {
        if (file.size > 50 * 1024 * 1024) { // 50MB limit
            showMessage(elements.messageContainer, 'Video file size exceeds 50MB limit.', 'error');
            hideLoading(elements.video.playerContainer);
            return;
        }

        // Handle local video file
        const fileUrl = URL.createObjectURL(file);
        const videoElement = document.createElement('video');
        videoElement.controls = true;
        videoElement.src = fileUrl;
        videoElement.id = 'loaded-video';
        elements.video.playerContainer.innerHTML = '';
        elements.video.playerContainer.appendChild(videoElement);

        state.video = {
            type: 'file',
            element: videoElement,
            start: start
        };
        showMessage(elements.messageContainer, 'Local video file loaded.', 'success');
        hideLoading(elements.video.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
            }
            showMessage(elements.messageContainer, `Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
            hideLoading(elements.video.playerContainer);
        } else {
            showMessage(elements.messageContainer, 'Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.video.playerContainer);
        }
    } else {
        showMessage(elements.messageContainer, 'Please enter a URL or select a file.', 'error');
        hideLoading(elements.video.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Play Handler
function handlePlay() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            // For iframe embeds, the Play button simply plays the embedded media if possible
            // Note: Without API integration, control is limited
            const iframe = state.music.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback started!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// Pause/Resume Handler
function handlePauseResume() {
    if (state.isPaused) {
        resumeMedia();
    } else {
        pauseMedia();
    }
}

// Pause Media
function pauseMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.pause();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            // For iframe embeds, pausing isn't straightforward without API
            // Here, we can reload the iframe with autoplay=0 to attempt pausing
            const iframe = state.music.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=1', 'autoplay=0');
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.pause();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=1', 'autoplay=0');
        }
    }

    state.isPaused = true;
    elements.controls.pauseResumeButton.textContent = 'Resume';
    showMessage(elements.messageContainer, 'Playback paused.', 'info');
}

// Resume Media
function resumeMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            const iframe = state.music.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback resumed.', 'success');
}

// Play From Start Handler
function handlePlayFromStart() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.currentTime = state.music.start;
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            const iframe = state.music.element;
            let src = iframe.src;
            src = src.split('?')[0]; // Remove existing query parameters
            src += `?start=${state.music.start}&autoplay=1&controls=1&rel=0`;
            iframe.src = src;
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.currentTime = state.video.start;
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            let src = iframe.src;
            src = src.split('?')[0]; // Remove existing query parameters
            src += `?start=${state.video.start}&autoplay=1&controls=1&rel=0`;
            iframe.src = src;
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback restarted!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// === Settings Modal Functions ===
function openSettingsModal() {
    elements.settings.modal.removeAttribute('hidden');
    elements.settings.modal.setAttribute('aria-hidden', 'false');
    elements.settings.modal.querySelector('.close-button').focus();
    trapFocus(elements.settings.modal);
}

function closeSettingsModal() {
    elements.settings.modal.setAttribute('hidden', '');
    elements.settings.modal.setAttribute('aria-hidden', 'true');
    elements.settings.button.focus();
    removeTrapFocus();
}

// Focus Trap Implementation
let focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
    textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
    [contenteditable]';
let focusableElements;
let firstTabStop;
let lastTabStop;

function trapFocus(element) {
    focusableElements = element.querySelectorAll(focusableElementsString);
    focusableElements = Array.prototype.slice.call(focusableElements);

    if (focusableElements.length === 0) return;

    firstTabStop = focusableElements[0];
    lastTabStop = focusableElements[focusableElements.length - 1];

    // Listen for and trap the keyboard
    element.addEventListener('keydown', trapTabKey);
}

function trapTabKey(e) {
    // Check for TAB key press
    if (e.key === 'Tab') {
        // SHIFT + TAB
        if (e.shiftKey) {
            if (document.activeElement === firstTabStop) {
                e.preventDefault();
                lastTabStop.focus();
            }
        } else { // TAB
            if (document.activeElement === lastTabStop) {
                e.preventDefault();
                firstTabStop.focus();
            }
        }
    }
}

function removeTrapFocus() {
    elements.settings.modal.removeEventListener('keydown', trapTabKey);
}

// === Utility Functions ===

// Extract Media Information from URL
function extractMediaInfo(url) {
    try {
        const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
        const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
        const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

        let match = url.match(youtubeRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(youtubeShortRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(vimeoRegex);
        if (match && match[1]) {
            return { platform: 'vimeo', id: match[1] };
        }

        return null;
    } catch (error) {
        console.error('Error extracting media info:', error);
        return null;
    }
}

// Capitalize First Letter
function capitalize(text) {
    if (!text) return '';
    return text.charAt(0).toUpperCase() + text.slice(1);
}

// Show Messages to User
function showMessage(container, message, type) {
    container.innerHTML = '';
    const msgDiv = document.createElement('div');
    msgDiv.textContent = message;
    msgDiv.classList.add('message', type); // 'success', 'error', 'info'
    container.appendChild(msgDiv);

    // Automatically hide message after 5 seconds
    setTimeout(() => {
        if (container.contains(msgDiv)) {
            container.removeChild(msgDiv);
        }
    }, 5000);
}

// Show Loading Indicator
function showLoading(container) {
    container.innerHTML = '';
    const loader = document.createElement('div');
    loader.classList.add('loader'); // Define loader styles in CSS
    container.appendChild(loader);
}

function hideLoading(container) {
    const loader = container.querySelector('.loader');
    if (loader) {
        container.removeChild(loader);
    }
}

// Check if Playback Buttons Should be Enabled
function checkReadyToPlay() {
    const ready = state.music || state.video;
    elements.controls.playButton.disabled = !ready;
    elements.controls.pauseResumeButton.disabled = !ready;
    elements.controls.playStartButton.disabled = !ready;
}

// Enter Fullscreen Mode
function enterFullscreen() {
    let targetElement = null;
    if (state.video && state.video.element) {
        // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
        targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
    } else if (state.music && state.music.element) {
        targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
    }

    if (targetElement && targetElement.requestFullscreen) {
        targetElement.requestFullscreen().then(() => {
            showMessage(elements.messageContainer, 'Entered fullscreen mode.', 'success');
        }).catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            showMessage(elements.messageContainer, 'Failed to enter fullscreen mode.', 'error');
        });
    } else {
        showMessage(elements.messageContainer, 'Fullscreen not supported on this element.', 'error');
    }
}

// === Media Embedding Functions ===

// Embed YouTube Video without API
function embedYouTubeVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.width = '100%';
    iframe.height = '360';
    iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
    iframe.frameBorder = '0';
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'youtube',
        element: iframe,
        start: start
    };
}

// Embed Vimeo Video without API
function embedVimeoVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
    iframe.width = '100%';
    iframe.height = '360';
    iframe.frameBorder = '0';
    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'vimeo',
        element: iframe,
        start: start
    };
}
});
Key Points:

Modal Hidden by Default: The dashboard.html sets the hidden attribute on the modal, ensuring it's not visible on load.
Event Handling: The JavaScript correctly handles the opening and closing of the modal without triggering it on load.
Positioning: The settings button is positioned absolutely within the .container to appear at the top left.
Media Embedding: Embeds YouTube and Vimeo videos using standard iframe embeds without external APIs to comply with CSP.
Avoiding External JavaScript: Since external scripts are removed, the functionalities are limited to standard iframe controls.
D. Reload and Test the Extension
Reload the Extension:
Navigate to chrome://extensions/.
Find your "Media Loader" extension.
Click the "Reload" icon to apply the latest changes.
Test the Modal:
Click the extension icon to open the dashboard in a new tab.
Verify that the settings modal is not open by default.
Click the settings button (small square at the top left) to open the modal.
Test closing the modal by:
Clicking the close button (×).
Clicking outside the modal content.
Pressing the Escape key.
Check for JavaScript Errors:
Press F12 to open Developer Tools in the dashboard tab.
Navigate to the "Console" tab.
Ensure there are no errors related to loadSettings or other functions.
2. Converting the Extension to a Safari Extension
Overview
Safari supports WebExtensions, allowing developers to convert Chrome extensions with minimal adjustments. However, some differences exist in APIs and packaging. Here's a guide to help you convert your "Media Loader" Chrome extension to Safari.

Conversion Steps
A. Prerequisites
macOS: Safari extensions development requires a Mac.
Xcode: Ensure you have the latest version of Xcode installed from the Mac App Store.
Apple Developer Account: Required for publishing extensions on the Safari Extensions Gallery.
B. Use safari-web-extension-converter Tool
Apple provides a command-line tool called safari-web-extension-converter to facilitate the conversion process.

Locate the Tool:
It's included with Xcode. If you have Xcode installed, you can access it via Terminal.
Run the Converter:
Open Terminal.
Navigate to your extension directory:

cd ~/Desktop/media-loader
Run the converter:

xcrun safari-web-extension-converter --manifest ~/Desktop/media-loader/manifest.json
Follow the on-screen prompts:
App Name: Provide a name for your extension.
Bundle Identifier: Typically in the format com.yourdomain.media-loader.
App Location: Choose where to save the converted project.
Review the Converted Project:
The tool generates an Xcode project tailored for Safari.
Open the project in Xcode:

open Media\ Loader.xcodeproj
C. Modify the Converted Project
Adjust manifest.json if Necessary:
Ensure all permissions and resources are correctly defined.
Safari might require specific adjustments or different permission naming.
Handle API Differences:
While Safari supports most WebExtensions APIs, some might behave differently.
Review Safari's WebExtensions API Reference to ensure compatibility.
Configure Extension Settings in Xcode:
Set up necessary capabilities and entitlements.
Define app icon and other metadata.
D. Test the Extension in Safari
Build and Run:
In Xcode, select your target (e.g., "My Extension").
Click the "Run" button to install the extension into Safari for testing.
Enable the Extension:
Open Safari.
Navigate to Safari > Preferences > Extensions.
Ensure your extension is listed and enabled.
Test Functionality:
Click the extension icon in Safari.
Verify that the dashboard opens correctly.
Test all media loading and playback functionalities.
Ensure the settings modal behaves as expected.
E. Debugging and Optimization
Use Safari's Web Inspector:
Open your dashboard tab.
Right-click and select "Inspect Element" to open the Web Inspector.
Check for any JavaScript errors or layout issues.
Optimize for Performance:
Ensure media loading is efficient.
Validate responsiveness across different device sizes.
F. Publish the Extension (Optional)
Sign up for an Apple Developer Account: If you haven't already, enroll at Apple Developer.
Follow Apple’s Extension Submission Guidelines: Refer to Submitting a Safari Web Extension.
Submit for Review: Follow Apple's procedures to submit your extension for approval.
Considerations
Manifest Version: Ensure your manifest.json adheres to Safari's supported version and features.
API Limitations: While most APIs are supported, some niche functionalities might require modifications.
Resource Paths: Double-check that all file paths (e.g., icons) are correctly referenced in the converted project.
Testing Thoroughly: Given browser differences, comprehensive testing in Safari is crucial to ensure seamless functionality.
Conclusion
By following the steps outlined above, you should be able to:

Resolve the settings modal issue in your Chrome extension, ensuring it remains hidden by default and is accessible via a well-positioned settings button.
Convert your "Media Loader" Chrome extension to a Safari extension using Apple's safari-web-extension-converter tool, adjusting configurations as necessary to comply with Safari's requirements.
If you encounter further issues during either process, feel free to reach out with specific error messages or problems, and I'll be happy to assist you further!

settings window is still doing the same thing. Errors
Uncaught ReferenceError: loadSettings is not defined
Context
dashboard.html

I'm sorry to hear that you're still encountering issues with your Chrome extension. Let's systematically address the problems you're facing:

Settings Modal Opens by Default and Cannot Be Closed
loadSettings Function Error: "Uncaught ReferenceError: loadSettings is not defined"

Fixing the Settings Modal Issue
A. Ensure the Modal is Hidden by Default
The settings modal should be hidden when the dashboard loads. This can be achieved by using the hidden attribute in the HTML and ensuring that the CSS correctly handles the visibility.
B. Correctly Define and Call loadSettings Function
The loadSettings function needs to be properly defined before it's called. We'll ensure that the script is correctly structured to prevent scope issues.

C. Position the Settings Button at the Top Left
We'll adjust the CSS and HTML to position the settings button as a small square at the top left of the dashboard.

Addressing the loadSettings Function Error
The error Uncaught ReferenceError: loadSettings is not defined suggests that the loadSettings function is either not defined at all or not accessible in the scope where it's being called. We'll ensure that:
The function is properly defined within dashboard.js.
There are no typos in function names.
The script is correctly linked in dashboard.html.
Complete and Corrected Files
Below are the complete and corrected files for your "Media Loader" Chrome extension. These adjustments ensure that the settings modal is hidden by default, accessible via a correctly positioned settings button, and that all functions are properly defined and accessible.

manifest.json
Ensure that your manifest file is correctly set up without any external script inclusions in the CSP.
{
"manifest_version": 3,
"name": "Media Loader",
"version": "1.0",
"description": "Load and play music and videos from YouTube and Vimeo",
"permissions": ["storage", "tabs"],
"host_permissions": [
"https://www.youtube.com/",
"https://player.vimeo.com/"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Open Media Loader",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
}
Key Points:

Removed external script sources from the Content Security Policy (CSP).
Ensured only necessary permissions are included (storage, tabs).
2. background.js
This script manages the opening of the dashboard in a new tab, ensuring only one instance is active.

// background.js

chrome.action.onClicked.addListener(() => {
const dashboardURL = chrome.runtime.getURL("dashboard.html");


// Query for any existing tabs with the dashboard URL
chrome.tabs.query({ url: dashboardURL }, (tabs) => {
    if (chrome.runtime.lastError) {
        console.error("Tab Query Error:", chrome.runtime.lastError);
        return;
    }

    if (tabs.length > 0) {
        // Activate the first existing dashboard tab
        chrome.tabs.update(tabs[0].id, { active: true }, (updatedTab) => {
            if (chrome.runtime.lastError) {
                console.error("Tab Update Error:", chrome.runtime.lastError);
            }
        });
    } else {
        // Create a new dashboard tab
        chrome.tabs.create({ url: dashboardURL, active: true }, (newTab) => {
            if (chrome.runtime.lastError) {
                console.error("Tab Creation Error:", chrome.runtime.lastError);
            }
        });
    }
});
});
Key Points:

Ensures only one dashboard tab is open at a time.
Handles errors during tab querying and creation.
3. dashboard.html
This is the main interface displayed in a new tab. The settings modal is hidden by default and can be accessed via the settings button positioned at the top left.



    <!-- Settings Modal -->
    <div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
        <div class="modal-content">
            <button class="close-button" aria-label="Close Settings Modal">&times;</button>
            <h2 id="settings-modal-title">Settings</h2>
            <form>
                <label for="fullscreen-toggle">
                    <input type="checkbox" id="fullscreen-toggle" name="fullscreen-toggle">
                    Full Screen on Play
                </label>
                <!-- Additional settings can go here -->
            </form>
        </div>
    </div>

    <!-- Load Music Section -->
    <section class="section" id="load-music-section">
        <fieldset>
            <legend>Load Music</legend>
            
            <label for="music-url">Music URL</label>
            <input type="text" id="music-url" name="music-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="music-file">Upload Music File</label>
            <input type="file" id="music-file" name="music-file" accept="audio/*">

            <label for="music-start">Start Time (seconds)</label>
            <input type="number" id="music-start" name="music-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-music" class="load-button">Load Music</button>
        </fieldset>
        <div id="music-player-container" class="player-container"></div>
    </section>

    <!-- Load Video Section -->
    <section class="section" id="load-video-section">
        <fieldset>
            <legend>Load Video</legend>
            
            <label for="video-url">Video URL</label>
            <input type="text" id="video-url" name="video-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="video-file">Upload Video File</label>
            <input type="file" id="video-file" name="video-file" accept="video/*">

            <label for="video-start">Start Time (seconds)</label>
            <input type="number" id="video-start" name="video-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-video" class="load-button">Load Video</button>
        </fieldset>
        <div id="video-player-container" class="player-container"></div>
    </section>

    <!-- Playback Controls -->
    <section class="controls">
        <button type="button" id="play-button" disabled aria-label="Play">Play</button>
        <button type="button" id="pause-resume-button" disabled aria-label="Pause">Pause</button>
        <button type="button" id="play-start-button" disabled aria-label="Play from Start">Play from Start</button>
    </section>

    <!-- Message Container -->
    <section id="message-container" class="message-container" role="alert" aria-live="assertive"></section>
</main>

<script src="dashboard.js"></script>
Key Points:
The settings-modal

has the hidden attribute to ensure it's not visible on load.
The settings button is placed within a
with the class settings-container, which is styled to position it at the top left.
All interactive elements have appropriate aria attributes for accessibility.
4. dashboard.js
This script manages the loading, playing, pausing, and state management of media within the dashboard. It ensures that all functions, including loadSettings, are properly defined and accessible.
// dashboard.js

document.addEventListener('DOMContentLoaded', () => {
// === Element References ===
const elements = {
music: {
urlInput: document.getElementById('music-url'),
fileInput: document.getElementById('music-file'),
startInput: document.getElementById('music-start'),
loadButton: document.getElementById('load-music'),
playerContainer: document.getElementById('music-player-container')
},
video: {
urlInput: document.getElementById('video-url'),
fileInput: document.getElementById('video-file'),
startInput: document.getElementById('video-start'),
loadButton: document.getElementById('load-video'),
playerContainer: document.getElementById('video-player-container')
},
controls: {
playButton: document.getElementById('play-button'),
pauseResumeButton: document.getElementById('pause-resume-button'),
playStartButton: document.getElementById('play-start-button')
},
messageContainer: document.getElementById('message-container'),
settings: {
button: document.getElementById('settings-button'),
modal: document.getElementById('settings-modal'),
closeButton: document.querySelector('.close-button'),
fullscreenToggle: document.getElementById('fullscreen-toggle')
}
};


// === State Management ===
const state = {
    music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
    video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
    isPaused: false,
    fullscreenOnPlay: false
};

// === Initialization ===
loadSettings();

// === Event Listeners ===
elements.music.loadButton.addEventListener('click', handleLoadMusic);
elements.video.loadButton.addEventListener('click', handleLoadVideo);
elements.controls.playButton.addEventListener('click', handlePlay);
elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

// Settings Modal Event Listeners
elements.settings.button.addEventListener('click', openSettingsModal);
elements.settings.closeButton.addEventListener('click', closeSettingsModal);
window.addEventListener('click', (event) => {
    if (event.target === elements.settings.modal) {
        closeSettingsModal();
    }
});
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
        closeSettingsModal();
    }
});
elements.settings.fullscreenToggle.addEventListener('change', (event) => {
    state.fullscreenOnPlay = event.target.checked;
    saveSettings();
});

// === Handler Functions ===

// Load Music Handler
function handleLoadMusic() {
    const url = elements.music.urlInput.value.trim();
    const file = elements.music.fileInput.files[0];
    const start = parseInt(elements.music.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.music.playerContainer);

    // Unload existing music if any
    if (state.music) {
        unloadMedia('music');
    }

    if (file) {
        if (file.size > 10 * 1024 * 1024) { // 10MB limit
            showMessage(elements.messageContainer, 'Music file size exceeds 10MB limit.', 'error');
            hideLoading(elements.music.playerContainer);
            return;
        }

        // Handle local audio file
        const fileUrl = URL.createObjectURL(file);
        const audioElement = document.createElement('audio');
        audioElement.controls = true;
        audioElement.src = fileUrl;
        audioElement.id = 'loaded-music';
        elements.music.playerContainer.innerHTML = '';
        elements.music.playerContainer.appendChild(audioElement);

        state.music = {
            type: 'file',
            element: audioElement,
            start: start
        };
        showMessage(elements.messageContainer, 'Local audio file loaded.', 'success');
        hideLoading(elements.music.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
            }
            showMessage(elements.messageContainer, `Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
            hideLoading(elements.music.playerContainer);
        } else {
            showMessage(elements.messageContainer, 'Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.music.playerContainer);
        }
    } else {
        showMessage(elements.messageContainer, 'Please enter a URL or select a file.', 'error');
        hideLoading(elements.music.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Load Video Handler
function handleLoadVideo() {
    const url = elements.video.urlInput.value.trim();
    const file = elements.video.fileInput.files[0];
    const start = parseInt(elements.video.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.video.playerContainer);

    // Unload existing video if any
    if (state.video) {
        unloadMedia('video');
    }

    if (file) {
        if (file.size > 50 * 1024 * 1024) { // 50MB limit
            showMessage(elements.messageContainer, 'Video file size exceeds 50MB limit.', 'error');
            hideLoading(elements.video.playerContainer);
            return;
        }

        // Handle local video file
        const fileUrl = URL.createObjectURL(file);
        const videoElement = document.createElement('video');
        videoElement.controls = true;
        videoElement.src = fileUrl;
        videoElement.id = 'loaded-video';
        elements.video.playerContainer.innerHTML = '';
        elements.video.playerContainer.appendChild(videoElement);

        state.video = {
            type: 'file',
            element: videoElement,
            start: start
        };
        showMessage(elements.messageContainer, 'Local video file loaded.', 'success');
        hideLoading(elements.video.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
            }
            showMessage(elements.messageContainer, `Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
            hideLoading(elements.video.playerContainer);
        } else {
            showMessage(elements.messageContainer, 'Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.video.playerContainer);
        }
    } else {
        showMessage(elements.messageContainer, 'Please enter a URL or select a file.', 'error');
        hideLoading(elements.video.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Play Handler
function handlePlay() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            // For iframe embeds, the Play button simply plays the embedded media if possible
            // Note: Without API integration, control is limited
            const iframe = state.music.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback started!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// Pause/Resume Handler
function handlePauseResume() {
    if (state.isPaused) {
        resumeMedia();
    } else {
        pauseMedia();
    }
}

// Pause Media
function pauseMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.pause();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            // For iframe embeds, pausing isn't straightforward without API
            // Here, we can reload the iframe with autoplay=0 to attempt pausing
            const iframe = state.music.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=1', 'autoplay=0');
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.pause();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=1', 'autoplay=0');
        }
    }

    state.isPaused = true;
    elements.controls.pauseResumeButton.textContent = 'Resume';
    showMessage(elements.messageContainer, 'Playback paused.', 'info');
}

// Resume Media
function resumeMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            const iframe = state.music.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = iframe.src;
            iframe.src = src.replace('autoplay=0', 'autoplay=1');
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback resumed.', 'success');
}

// Play From Start Handler
function handlePlayFromStart() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.currentTime = state.music.start;
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            const iframe = state.music.element;
            let src = iframe.src;
            src = src.split('?')[0]; // Remove existing query parameters
            src += `?start=${state.music.start}&autoplay=1&controls=1&rel=0`;
            iframe.src = src;
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.currentTime = state.video.start;
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            let src = iframe.src;
            src = src.split('?')[0]; // Remove existing query parameters
            src += `?start=${state.video.start}&autoplay=1&controls=1&rel=0`;
            iframe.src = src;
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage(elements.messageContainer, 'Playback restarted!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// === Settings Modal Functions ===
function openSettingsModal() {
    elements.settings.modal.removeAttribute('hidden');
    elements.settings.modal.setAttribute('aria-hidden', 'false');
    elements.settings.modal.querySelector('.close-button').focus();
    trapFocus(elements.settings.modal);
}

function closeSettingsModal() {
    elements.settings.modal.setAttribute('hidden', '');
    elements.settings.modal.setAttribute('aria-hidden', 'true');
    elements.settings.button.focus();
    removeTrapFocus();
}

// Focus Trap Implementation
let focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
    textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
    [contenteditable]';
let focusableElements;
let firstTabStop;
let lastTabStop;

function trapFocus(element) {
    focusableElements = element.querySelectorAll(focusableElementsString);
    focusableElements = Array.prototype.slice.call(focusableElements);

    if (focusableElements.length === 0) return;

    firstTabStop = focusableElements[0];
    lastTabStop = focusableElements[focusableElements.length - 1];

    // Listen for and trap the keyboard
    element.addEventListener('keydown', trapTabKey);
}

function trapTabKey(e) {
    // Check for TAB key press
    if (e.key === 'Tab') {
        // SHIFT + TAB
        if (e.shiftKey) {
            if (document.activeElement === firstTabStop) {
                e.preventDefault();
                lastTabStop.focus();
            }
        } else { // TAB
            if (document.activeElement === lastTabStop) {
                e.preventDefault();
                firstTabStop.focus();
            }
        }
    }
}

function removeTrapFocus() {
    elements.settings.modal.removeEventListener('keydown', trapTabKey);
}

// === Utility Functions ===

// Extract Media Information from URL
function extractMediaInfo(url) {
    try {
        const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
        const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
        const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

        let match = url.match(youtubeRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(youtubeShortRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(vimeoRegex);
        if (match && match[1]) {
            return { platform: 'vimeo', id: match[1] };
        }

        return null;
    } catch (error) {
        console.error('Error extracting media info:', error);
        return null;
    }
}

// Capitalize First Letter
function capitalize(text) {
    if (!text) return '';
    return text.charAt(0).toUpperCase() + text.slice(1);
}

// Show Messages to User
function showMessage(container, message, type) {
    container.innerHTML = '';
    const msgDiv = document.createElement('div');
    msgDiv.textContent = message;
    msgDiv.classList.add('message', type); // 'success', 'error', 'info'
    container.appendChild(msgDiv);

    // Automatically hide message after 5 seconds
    setTimeout(() => {
        if (container.contains(msgDiv)) {
            container.removeChild(msgDiv);
        }
    }, 5000);
}

// Show Loading Indicator
function showLoading(container) {
    container.innerHTML = '';
    const loader = document.createElement('div');
    loader.classList.add('loader'); // Define loader styles in CSS
    container.appendChild(loader);
}

function hideLoading(container) {
    const loader = container.querySelector('.loader');
    if (loader) {
        container.removeChild(loader);
    }
}

// Check if Playback Buttons Should be Enabled
function checkReadyToPlay() {
    const ready = state.music || state.video;
    elements.controls.playButton.disabled = !ready;
    elements.controls.pauseResumeButton.disabled = !ready;
    elements.controls.playStartButton.disabled = !ready;
}

// Enter Fullscreen Mode
function enterFullscreen() {
    let targetElement = null;
    if (state.video && state.video.element) {
        // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
        targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
    } else if (state.music && state.music.element) {
        targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
    }

    if (targetElement && targetElement.requestFullscreen) {
        targetElement.requestFullscreen().then(() => {
            showMessage(elements.messageContainer, 'Entered fullscreen mode.', 'success');
        }).catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            showMessage(elements.messageContainer, 'Failed to enter fullscreen mode.', 'error');
        });
    } else {
        showMessage(elements.messageContainer, 'Fullscreen not supported on this element.', 'error');
    }
}

// === Media Embedding Functions ===

// Embed YouTube Video without API
function embedYouTubeVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.width = '100%';
    iframe.height = '360';
    iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
    iframe.frameBorder = '0';
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'youtube',
        element: iframe,
        start: start
    };
}

// Embed Vimeo Video without API
function embedVimeoVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
    iframe.width = '100%';
    iframe.height = '360';
    iframe.frameBorder = '0';
    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'vimeo',
        element: iframe,
        start: start
    };
}

// === Settings Management ===

// Load Settings from Chrome Storage
function loadSettings() {
    chrome.storage.local.get(['mediaSettings'], (result) => {
        if (chrome.runtime.lastError) {
            console.error('Error loading settings:', chrome.runtime.lastError);
            showMessage(elements.messageContainer, 'Failed to load settings.', 'error');
            return;
        }

        if (result.mediaSettings) {
            const { music, video, fullscreenOnPlay: fsPlay } = result.mediaSettings;

            if (music) {
                if (music.type === 'youtube' || music.type === 'vimeo') {
                    const url = music.type === 'youtube' 
                        ? `https://www.youtube.com/watch?v=${music.id}` 
                        : `https://vimeo.com/${music.id}`;
                    elements.music.urlInput.value = url;
                    elements.music.startInput.value = music.start || 0;
                    // Optionally, auto-load the media by triggering the load button
                    // handleLoadMusic();
                }
                // Handle file-based music loading if necessary
            }

            if (video) {
                if (video.type === 'youtube' || video.type === 'vimeo') {
                    const url = video.type === 'youtube' 
                        ? `https://www.youtube.com/watch?v=${video.id}` 
                        : `https://vimeo.com/${video.id}`;
                    elements.video.urlInput.value = url;
                    elements.video.startInput.value = video.start || 0;
                    // Optionally, auto-load the media by triggering the load button
                    // handleLoadVideo();
                }
                // Handle file-based video loading if necessary
            }

            if (typeof fsPlay === 'boolean') {
                state.fullscreenOnPlay = fsPlay;
                elements.settings.fullscreenToggle.checked = fsPlay;
            }
        }
    });
}

// Save Settings to Chrome Storage
function saveSettings() {
    const settings = {
        music: state.music,
        video: state.video,
        fullscreenOnPlay: state.fullscreenOnPlay
    };
    chrome.storage.local.set({ mediaSettings: settings }, () => {
        if (chrome.runtime.lastError) {
            console.error('Error saving settings:', chrome.runtime.lastError);
            showMessage(elements.messageContainer, 'Error saving settings.', 'error');
            return;
        }
        console.log('Settings saved.');
    });
}
});
Key Points:

Script Loading Order: Ensure that dashboard.js is loaded after the HTML elements it interacts with. This is achieved by placing the tag at the end of the .
Function Definitions:
The loadSettings function is correctly defined within the scope of the DOMContentLoaded event listener.
All functions (loadSettings, saveSettings, etc.) are encapsulated within the DOMContentLoaded event to ensure they have access to the DOM elements.
Settings Modal Handling:
The modal remains hidden by default (hidden attribute in HTML).
Clicking the settings button (#settings-button) opens the modal.
Clicking the close button (.close-button), clicking outside the modal content, or pressing the Escape key closes the modal.
Avoiding External Scripts: The script avoids loading external scripts to comply with CSP. Instead, it uses standard iframe embeds for YouTube and Vimeo.
5. styles.css
This stylesheet defines the visual appearance of your dashboard, ensuring the settings button is correctly positioned and the modal behaves as expected.

/* styles.css */

/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
position: relative; /* To position settings button absolutely within the container */
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}

.section {
width: 100%;
margin-bottom: 20px;
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.controls button {
padding: 10px 20px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4285f4;
color: #fff;
transition: background-color 0.3s ease;
}

.controls button:disabled {
background-color: #a0c3ff;
cursor: not-allowed;
}

.controls button:hover:not(:disabled) {
background-color: #357ae8;
}

/* Settings Button positioned at Top Left */
.settings-container {
position: absolute;
top: 20px;
left: 20px;
}

.settings-button {
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

.settings-button:hover {
background-color: #f0f0f0;
border-color: #999;
}

.settings-icon {
width: 20px;
height: 20px;
}

/* Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.modal-content {
background-color: #fff;
padding: 20px 30px;
border-radius: 8px;
width: 90%;
max-width: 400px;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}

.modal-content h2 {
margin-top: 0;
}

/* Form Elements */
fieldset {
border: none;
padding: 0;
}

fieldset label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

fieldset input[type="text"],
fieldset input[type="number"],
fieldset input[type="file"] {
width: 100%;
padding: 8px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

fieldset .load-button {
width: 100%;
padding: 10px;
background-color: #34a853;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

fieldset .load-button:hover {
background-color: #2c8e46;
}

/* Player Containers */
.player-container {
margin-top: 10px;
}

/* Messages */
.message-container {
margin-top: 20px;
width: 100%;
}

.message {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
color: #fff;
}

.message.success {
background-color: #4caf50;
}

.message.error {
background-color: #f44336;
}

.message.info {
background-color: #2196f3;
}

/* Loader /
.loader {
border: 8px solid #f3f3f3; / Light grey /
border-top: 8px solid #4285f4; / Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 600px) {
.container {
padding: 10px;
}


.modal-content {
    padding: 15px 20px;
}

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

.controls button {
    width: 100%;
}

.settings-container {
    top: 10px;
    left: 10px;
}

.settings-button {
    width: 35px;
    height: 35px;
}

.settings-icon {
    width: 18px;
    height: 18px;
}
}
Key Points:

Settings Button Positioning:
Positioned absolute within the .container to appear at the top left.
Styled as a small square with hover effects.
Modal Hidden by Default:
.modal uses display: flex to center the content, but the HTML uses the hidden attribute to hide it initially.
Responsive Design:
Adjusts the size and position of the settings button on smaller screens.
Loader:
A spinning loader is defined to indicate loading states.
6. icons/settings.svg
Ensure you have a settings.svg icon placed within the icons/ folder. Here's a simple SVG for a settings icon:

Note: You can customize this SVG or use any other settings icon as per your preference.
Final Checklist & Testing
Ensure All Files are Correctly Placed:
manifest.json
background.js
dashboard.html
dashboard.js
styles.css
icons/ folder with required icons (icon16.png, icon48.png, icon128.png, settings.svg)
Reload the Extension:
Navigate to chrome://extensions/
Enable "Developer mode" if not already enabled.
Click "Load unpacked" and select the media-loader/ directory.
Alternatively, if the extension is already loaded, click the "Reload" icon on the extension's card to apply changes.
Test Functionality:
Open Dashboard:
Click the extension icon.
A new tab should open displaying the dashboard with a settings button at the top left.
Settings Modal:
Click the settings button.
The settings modal should appear.
Click the close button (×), click outside the modal content, or press the Escape key to close the modal.
Issue Resolution: Ensure that the modal closes without errors.
Load Media:
Input a valid YouTube or Vimeo URL or upload a local media file.
Click "Load Music" or "Load Video" to embed the media.
The media player should appear in the designated container.
Playback Controls:
Once media is loaded, the "Play," "Pause," and "Play from Start" buttons should be enabled.
Test each functionality to ensure they work as expected.
Settings:
Toggle the "Full Screen on Play" option.
Click "Play" to test if it enters fullscreen mode as per the setting.
Check for JavaScript Errors:
Open the Developer Tools (Press F12).
Navigate to the "Console" tab.
Ensure there are no errors like loadSettings is not defined.
Ensure CSP Compliance:
Verify that no external scripts are being loaded.
All functionalities rely on local scripts and standard iframe embeds.
Additional Tips
Prevent Multiple Instances in the Dashboard Tab:
The background script already handles activating an existing dashboard tab instead of opening multiple tabs.
Avoid Reloading Media Automatically:
If you implement auto-loading from settings, ensure it doesn't inadvertently trigger and open the settings modal.
Media Control Limitations Without APIs:
Without YouTube or Vimeo APIs, some controls like precise pausing or seeking within embedded iframes are limited.
Inform users about these limitations or consider implementing content scripts if deeper integrations are necessary (keeping CSP restrictions in mind).
Accessibility Enhancements:
Ensure that all interactive elements are accessible via keyboard.
Use descriptive aria-labels and roles for better screen reader compatibility.
Responsive Design Testing:
Test the dashboard across different screen sizes to ensure the layout remains consistent and user-friendly.
Converting to a Safari Extension
While your primary focus is on resolving the current issues in the Chrome extension, you also expressed interest in converting the project to a Safari extension. Below is a brief guide on how to approach this:

Use Safari's Web Extension Converter:
Apple provides a tool (safari-web-extension-converter) to help convert Chrome extensions to Safari.
Usage:

xcrun safari-web-extension-converter --manifest ~/path-to-your-extension/manifest.json
Follow the on-screen prompts to complete the conversion.
Adjust Manifest and Code if Necessary:
Safari may have different API support. Review Safari's Web Extensions Documentation for any required adjustments.
Test the Extension in Safari:
Open Safari.
Navigate to Preferences > Extensions and enable your converted extension.
Test all functionalities thoroughly to ensure compatibility.
Publish to Safari Extensions Gallery:
If you plan to distribute the extension, follow Apple's guidelines to submit it for review.
Note: Some functionalities, especially those relying on APIs like Puppeteer or other Chrome-specific APIs, may not work seamlessly in Safari. Ensure to test all features post-conversion.

Conclusion
By carefully following the corrected files and ensuring all functions are properly defined and accessible, your Chrome extension should function as intended without the loadSettings error. Additionally, maintaining CSP compliance ensures a secure extension environment. If you continue to experience issues, consider sharing the current versions of your dashboard.html and dashboard.js, and I'll assist you further in diagnosing and resolving the problems.

Feel free to reach out if you need more detailed guidance or encounter other challenges!

the settings screen is still messed up.


I'm sorry to hear you're still experiencing issues with your Chrome extension. Let's systematically address the problems you're facing:

Settings Modal Opens by Default and Cannot Be Closed
JavaScript Error: Uncaught ReferenceError: loadSettings is not defined
We'll go through each step-by-step to resolve these issues and ensure your extension functions correctly. Additionally, I'll provide the complete corrected files to help you verify and implement the necessary changes.

1. Resolving the Settings Modal Issue
A. Ensure the Modal is Hidden by Default
Issue: The settings modal is open by default when the dashboard loads and cannot be closed.

Solution:

Ensure that the <div> representing the modal has the hidden attribute in your dashboard.html.
Verify that your CSS properly handles the visibility of the modal using the hidden attribute.
B. Correctly Define and Call loadSettings Function
Issue: You're encountering the error Uncaught ReferenceError: loadSettings is not defined.

Solution:

Ensure that the loadSettings function is correctly defined within your dashboard.js.
Verify that there are no typos in the function name.
Ensure that dashboard.js is properly linked in your dashboard.html.
2. Corrected Files
Below are the complete and corrected versions of your extension's files. Please ensure that each file matches exactly, especially regarding function names and element IDs.

A. manifest.json
Make sure your manifest.json is correctly set up without any external script inclusions in the CSP.


{
  "manifest_version": 3,
  "name": "Media Loader",
  "version": "1.0",
  "description": "Load and play music and videos from YouTube and Vimeo",
  "permissions": ["storage", "tabs"],
  "host_permissions": [
    "https://www.youtube.com/*",
    "https://player.vimeo.com/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Open Media Loader",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}
B. background.js
This script manages the opening of the dashboard in a new tab, ensuring only one instance is active.


// background.js

chrome.action.onClicked.addListener(() => {
    const dashboardURL = chrome.runtime.getURL("dashboard.html");
    
    // Query for any existing tabs with the dashboard URL
    chrome.tabs.query({ url: dashboardURL }, (tabs) => {
        if (chrome.runtime.lastError) {
            console.error("Tab Query Error:", chrome.runtime.lastError);
            return;
        }

        if (tabs.length > 0) {
            // Activate the first existing dashboard tab
            chrome.tabs.update(tabs[0].id, { active: true }, (updatedTab) => {
                if (chrome.runtime.lastError) {
                    console.error("Tab Update Error:", chrome.runtime.lastError);
                }
            });
        } else {
            // Create a new dashboard tab
            chrome.tabs.create({ url: dashboardURL, active: true }, (newTab) => {
                if (chrome.runtime.lastError) {
                    console.error("Tab Creation Error:", chrome.runtime.lastError);
                }
            });
        }
    });
});
C. dashboard.html
This is the main interface displayed in a new tab. The settings modal is hidden by default and can be accessed via the settings button positioned at the top left.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media Loader Dashboard</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <main class="container">
        <!-- Settings Header -->
        <header class="settings-container">
            <button id="settings-button" class="settings-button" title="Settings" aria-label="Open Settings">
                <img src="icons/settings.svg" alt="" class="settings-icon" aria-hidden="true">
            </button>
        </header>

        <!-- Settings Modal -->
        <div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
            <div class="modal-content">
                <button class="close-button" aria-label="Close Settings Modal">&times;</button>
                <h2 id="settings-modal-title">Settings</h2>
                <form>
                    <label for="fullscreen-toggle">
                        <input type="checkbox" id="fullscreen-toggle" name="fullscreen-toggle">
                        Full Screen on Play
                    </label>
                    <!-- Additional settings can go here -->
                </form>
            </div>
        </div>

        <!-- Load Music Section -->
        <section class="section" id="load-music-section">
            <fieldset>
                <legend>Load Music</legend>
                
                <label for="music-url">Music URL</label>
                <input type="text" id="music-url" name="music-url" placeholder="Enter YouTube or Vimeo URL">

                <label for="music-file">Upload Music File</label>
                <input type="file" id="music-file" name="music-file" accept="audio/*">

                <label for="music-start">Start Time (seconds)</label>
                <input type="number" id="music-start" name="music-start" placeholder="Start Time (seconds)" min="0">

                <button type="button" id="load-music" class="load-button">Load Music</button>
            </fieldset>
            <div id="music-player-container" class="player-container"></div>
        </section>

        <!-- Load Video Section -->
        <section class="section" id="load-video-section">
            <fieldset>
                <legend>Load Video</legend>
                
                <label for="video-url">Video URL</label>
                <input type="text" id="video-url" name="video-url" placeholder="Enter YouTube or Vimeo URL">

                <label for="video-file">Upload Video File</label>
                <input type="file" id="video-file" name="video-file" accept="video/*">

                <label for="video-start">Start Time (seconds)</label>
                <input type="number" id="video-start" name="video-start" placeholder="Start Time (seconds)" min="0">

                <button type="button" id="load-video" class="load-button">Load Video</button>
            </fieldset>
            <div id="video-player-container" class="player-container"></div>
        </section>

        <!-- Playback Controls -->
        <section class="controls">
            <button type="button" id="play-button" disabled aria-label="Play">Play</button>
            <button type="button" id="pause-resume-button" disabled aria-label="Pause">Pause</button>
            <button type="button" id="play-start-button" disabled aria-label="Play from Start">Play from Start</button>
        </section>

        <!-- Message Container -->
        <section id="message-container" class="message-container" role="alert" aria-live="assertive"></section>
    </main>

    <script src="dashboard.js"></script>
</body>
</html>
D. dashboard.js
This script manages loading, playing, pausing, and state management of media within the dashboard. It embeds YouTube and Vimeo videos using standard iframe parameters without relying on external APIs to comply with CSP.


// dashboard.js

document.addEventListener('DOMContentLoaded', () => {
    // === Element References ===
    const elements = {
        music: {
            urlInput: document.getElementById('music-url'),
            fileInput: document.getElementById('music-file'),
            startInput: document.getElementById('music-start'),
            loadButton: document.getElementById('load-music'),
            playerContainer: document.getElementById('music-player-container')
        },
        video: {
            urlInput: document.getElementById('video-url'),
            fileInput: document.getElementById('video-file'),
            startInput: document.getElementById('video-start'),
            loadButton: document.getElementById('load-video'),
            playerContainer: document.getElementById('video-player-container')
        },
        controls: {
            playButton: document.getElementById('play-button'),
            pauseResumeButton: document.getElementById('pause-resume-button'),
            playStartButton: document.getElementById('play-start-button')
        },
        messageContainer: document.getElementById('message-container'),
        settings: {
            button: document.getElementById('settings-button'),
            modal: document.getElementById('settings-modal'),
            closeButton: document.querySelector('.close-button'),
            fullscreenToggle: document.getElementById('fullscreen-toggle')
        }
    };

    // === State Management ===
    const state = {
        music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
        video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
        isPaused: false,
        fullscreenOnPlay: false
    };

    // === Initialization ===
    loadSettings();

    // === Event Listeners ===
    elements.music.loadButton.addEventListener('click', handleLoadMusic);
    elements.video.loadButton.addEventListener('click', handleLoadVideo);
    elements.controls.playButton.addEventListener('click', handlePlay);
    elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
    elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

    // Settings Modal Event Listeners
    elements.settings.button.addEventListener('click', openSettingsModal);
    elements.settings.closeButton.addEventListener('click', closeSettingsModal);
    window.addEventListener('click', (event) => {
        if (event.target === elements.settings.modal) {
            closeSettingsModal();
        }
    });
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
            closeSettingsModal();
        }
    });
    elements.settings.fullscreenToggle.addEventListener('change', (event) => {
        state.fullscreenOnPlay = event.target.checked;
        saveSettings();
    });

    // === Handler Functions ===

    // Load Music Handler
    function handleLoadMusic() {
        const url = elements.music.urlInput.value.trim();
        const file = elements.music.fileInput.files[0];
        const start = parseInt(elements.music.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.music.playerContainer);

        // Unload existing music if any
        if (state.music) {
            unloadMedia('music');
        }

        if (file) {
            if (file.size > 10 * 1024 * 1024) { // 10MB limit
                showMessage('Music file size exceeds 10MB limit.', 'error');
                hideLoading(elements.music.playerContainer);
                return;
            }

            // Handle local audio file
            const fileUrl = URL.createObjectURL(file);
            const audioElement = document.createElement('audio');
            audioElement.controls = true;
            audioElement.src = fileUrl;
            audioElement.id = 'loaded-music';
            elements.music.playerContainer.innerHTML = '';
            elements.music.playerContainer.appendChild(audioElement);

            state.music = {
                type: 'file',
                element: audioElement,
                start: start
            };
            showMessage('Local audio file loaded.', 'success');
            hideLoading(elements.music.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
                hideLoading(elements.music.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.music.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.music.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Load Video Handler
    function handleLoadVideo() {
        const url = elements.video.urlInput.value.trim();
        const file = elements.video.fileInput.files[0];
        const start = parseInt(elements.video.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.video.playerContainer);

        // Unload existing video if any
        if (state.video) {
            unloadMedia('video');
        }

        if (file) {
            if (file.size > 50 * 1024 * 1024) { // 50MB limit
                showMessage('Video file size exceeds 50MB limit.', 'error');
                hideLoading(elements.video.playerContainer);
                return;
            }

            // Handle local video file
            const fileUrl = URL.createObjectURL(file);
            const videoElement = document.createElement('video');
            videoElement.controls = true;
            videoElement.src = fileUrl;
            videoElement.id = 'loaded-video';
            elements.video.playerContainer.innerHTML = '';
            elements.video.playerContainer.appendChild(videoElement);

            state.video = {
                type: 'file',
                element: videoElement,
                start: start
            };
            showMessage('Local video file loaded.', 'success');
            hideLoading(elements.video.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
                hideLoading(elements.video.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.video.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.video.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Play Handler
    function handlePlay() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // For iframe embeds, play by setting autoplay parameter
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback started!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // Pause/Resume Handler
    function handlePauseResume() {
        if (state.isPaused) {
            resumeMedia();
        } else {
            pauseMedia();
        }
    }

    // Pause Media
    function pauseMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.pause();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // Pausing iframe embed without API by removing autoplay
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.pause();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        state.isPaused = true;
        elements.controls.pauseResumeButton.textContent = 'Resume';
        showMessage('Playback paused.', 'info');
    }

    // Resume Media
    function resumeMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback resumed.', 'success');
    }

    // Play From Start Handler
    function handlePlayFromStart() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.currentTime = state.music.start;
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.music.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.currentTime = state.video.start;
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.video.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback restarted!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // === Settings Modal Functions ===
    function openSettingsModal() {
        elements.settings.modal.removeAttribute('hidden');
        elements.settings.modal.setAttribute('aria-hidden', 'false');
        elements.settings.modal.querySelector('.close-button').focus();
        trapFocus(elements.settings.modal);
    }

    function closeSettingsModal() {
        elements.settings.modal.setAttribute('hidden', '');
        elements.settings.modal.setAttribute('aria-hidden', 'true');
        elements.settings.button.focus();
        removeTrapFocus();
    }

    // Focus Trap Implementation
    let focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
        textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
        [contenteditable]';
    let focusableElements;
    let firstTabStop;
    let lastTabStop;

    function trapFocus(element) {
        focusableElements = element.querySelectorAll(focusableElementsString);
        focusableElements = Array.prototype.slice.call(focusableElements);

        if (focusableElements.length === 0) return;

        firstTabStop = focusableElements[0];
        lastTabStop = focusableElements[focusableElements.length - 1];

        // Listen for and trap the keyboard
        element.addEventListener('keydown', trapTabKey);
    }

    function trapTabKey(e) {
        // Check for TAB key press
        if (e.key === 'Tab') {
            // SHIFT + TAB
            if (e.shiftKey) {
                if (document.activeElement === firstTabStop) {
                    e.preventDefault();
                    lastTabStop.focus();
                }
            } else { // TAB
                if (document.activeElement === lastTabStop) {
                    e.preventDefault();
                    firstTabStop.focus();
                }
            }
        }
    }

    function removeTrapFocus() {
        elements.settings.modal.removeEventListener('keydown', trapTabKey);
    }

    // === Utility Functions ===

    // Extract Media Information from URL
    function extractMediaInfo(url) {
        try {
            const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
            const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
            const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

            let match = url.match(youtubeRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(youtubeShortRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(vimeoRegex);
            if (match && match[1]) {
                return { platform: 'vimeo', id: match[1] };
            }

            return null;
        } catch (error) {
            console.error('Error extracting media info:', error);
            return null;
        }
    }

    // Capitalize First Letter
    function capitalize(text) {
        if (!text) return '';
        return text.charAt(0).toUpperCase() + text.slice(1);
    }

    // Show Messages to User
    function showMessage(message, type) {
        elements.messageContainer.innerHTML = '';
        const msgDiv = document.createElement('div');
        msgDiv.textContent = message;
        msgDiv.classList.add('message', type); // 'success', 'error', 'info'
        elements.messageContainer.appendChild(msgDiv);

        // Automatically hide message after 5 seconds
        setTimeout(() => {
            if (elements.messageContainer.contains(msgDiv)) {
                elements.messageContainer.removeChild(msgDiv);
            }
        }, 5000);
    }

    // Show Loading Indicator
    function showLoading(container) {
        container.innerHTML = '';
        const loader = document.createElement('div');
        loader.classList.add('loader'); // Define loader styles in CSS
        container.appendChild(loader);
    }

    function hideLoading(container) {
        const loader = container.querySelector('.loader');
        if (loader) {
            container.removeChild(loader);
        }
    }

    // Check if Playback Buttons Should be Enabled
    function checkReadyToPlay() {
        const ready = state.music || state.video;
        elements.controls.playButton.disabled = !ready;
        elements.controls.pauseResumeButton.disabled = !ready;
        elements.controls.playStartButton.disabled = !ready;
    }

    // Enter Fullscreen Mode
    function enterFullscreen() {
        let targetElement = null;
        if (state.video && state.video.element) {
            // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
            targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
        } else if (state.music && state.music.element) {
            targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
        }

        if (targetElement && targetElement.requestFullscreen) {
            targetElement.requestFullscreen().then(() => {
                showMessage('Entered fullscreen mode.', 'success');
            }).catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
                showMessage('Failed to enter fullscreen mode.', 'error');
            });
        } else {
            showMessage('Fullscreen not supported on this element.', 'error');
        }
    }

    // === Media Embedding Functions ===

    // Embed YouTube Video without API
    function embedYouTubeVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.width = '100%';
        iframe.height = '360';
        iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
        iframe.frameBorder = '0';
        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'youtube',
            element: iframe,
            start: start
        };
    }

    // Embed Vimeo Video without API
    function embedVimeoVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
        iframe.width = '100%';
        iframe.height = '360';
        iframe.frameBorder = '0';
        iframe.allow = 'autoplay; fullscreen; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'vimeo',
            element: iframe,
            start: start
        };
    }

    // === Settings Management ===

    // Load Settings from Chrome Storage
    function loadSettings() {
        chrome.storage.local.get(['mediaSettings'], (result) => {
            if (chrome.runtime.lastError) {
                console.error('Error loading settings:', chrome.runtime.lastError);
                showMessage('Failed to load settings.', 'error');
                return;
            }

            if (result.mediaSettings) {
                const { music, video, fullscreenOnPlay: fsPlay } = result.mediaSettings;

                if (music) {
                    if (music.type === 'youtube' || music.type === 'vimeo') {
                        const url = music.type === 'youtube' 
                            ? `https://www.youtube.com/watch?v=${music.id}` 
                            : `https://vimeo.com/${music.id}`;
                        elements.music.urlInput.value = url;
                        elements.music.startInput.value = music.start || 0;
                        // Optionally, auto-load the media by triggering the load button
                        // handleLoadMusic();
                    }
                    // Handle file-based music loading if necessary
                }

                if (video) {
                    if (video.type === 'youtube' || video.type === 'vimeo') {
                        const url = video.type === 'youtube' 
                            ? `https://www.youtube.com/watch?v=${video.id}` 
                            : `https://vimeo.com/${video.id}`;
                        elements.video.urlInput.value = url;
                        elements.video.startInput.value = video.start || 0;
                        // Optionally, auto-load the media by triggering the load button
                        // handleLoadVideo();
                    }
                    // Handle file-based video loading if necessary
                }

                if (typeof fsPlay === 'boolean') {
                    state.fullscreenOnPlay = fsPlay;
                    elements.settings.fullscreenToggle.checked = fsPlay;
                }
            }
        });
    }

    // Save Settings to Chrome Storage
    function saveSettings() {
        const settings = {
            music: state.music,
            video: state.video,
            fullscreenOnPlay: state.fullscreenOnPlay
        };
        chrome.storage.local.set({ mediaSettings: settings }, () => {
            if (chrome.runtime.lastError) {
                console.error('Error saving settings:', chrome.runtime.lastError);
                showMessage('Error saving settings.', 'error');
                return;
            }
            console.log('Settings saved.');
        });
    }

    // === Unload Media Function ===
    function unloadMedia(mediaType) {
        if (state[mediaType]) {
            if (state[mediaType].type === 'file') {
                state[mediaType].element.src = '';
            } else {
                // Reset iframe src to stop the media
                const iframe = state[mediaType].element;
                iframe.src = '';
            }
            state[mediaType] = null;
        }
    }
});
E. styles.css
This stylesheet defines the visual appearance of your dashboard, ensuring the settings button is correctly positioned and the modal behaves as expected.


/* styles.css */

/* General Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    position: relative; /* To position settings button absolutely within the container */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.section {
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.controls button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #4285f4;
    color: #fff;
    transition: background-color 0.3s ease;
}

.controls button:disabled {
    background-color: #a0c3ff;
    cursor: not-allowed;
}

.controls button:hover:not(:disabled) {
    background-color: #357ae8;
}

/* Settings Button positioned at Top Left */
.settings-container {
    position: absolute;
    top: 20px;
    left: 20px;
}

.settings-button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.settings-button:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.settings-icon {
    width: 20px;
    height: 20px;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.modal-content h2 {
    margin-top: 0;
}

/* Form Elements */
fieldset {
    border: none;
    padding: 0;
}

fieldset label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

fieldset input[type="text"],
fieldset input[type="number"],
fieldset input[type="file"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

fieldset .load-button {
    width: 100%;
    padding: 10px;
    background-color: #34a853;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

fieldset .load-button:hover {
    background-color: #2c8e46;
}

/* Player Containers */
.player-container {
    margin-top: 10px;
}

/* Messages */
.message-container {
    margin-top: 20px;
    width: 100%;
}

.message {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #fff;
}

.message.success {
    background-color: #4caf50;
}

.message.error {
    background-color: #f44336;
}

.message.info {
    background-color: #2196f3;
}

/* Loader */
.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #4285f4; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    .modal-content {
        padding: 15px 20px;
    }

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

    .controls button {
        width: 100%;
    }

    .settings-container {
        top: 10px;
        left: 10px;
    }

    .settings-button {
        width: 35px;
        height: 35px;
    }

    .settings-icon {
        width: 18px;
        height: 18px;
    }
}
F. icons/settings.svg
Ensure you have a settings.svg icon placed within the icons/ folder. Here's a simple SVG for a settings icon:


<!-- icons/settings.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
  <path fill="#000000" d="M19.14 12.936a7.978 7.978 0 000-1.872l2.036-1.58a0.5 0.5 0 00.12-0.638l-1.928-3.338a0.5 0.5 0 00-0.605-0.22l-2.4 0.96a7.964 7.964 0 00-1.62-0.936l-0.36-2.54a0.5 0.5 0 00-0.495-0.42h-3.856a0.5 0.5 0 00-0.495 0.42l-0.36 2.54a7.964 7.964 0 00-1.62 0.936l-2.4-0.96a0.5 0.5 0 00-0.605 0.22l-1.928 3.338a0.5 0.5 0 00.12 0.638l2.036 1.58a7.978 7.978 0 000 1.872l-2.036 1.58a0.5 0.5 0 00-.12 0.638l1.928 3.338a0.5 0.5 0 00.605 0.22l2.4-0.96a7.964 7.964 0 001.62 0.936l0.36 2.54a0.5 0.5 0 00.495 0.42h3.856a0.5 0.5 0 00.495-0.42l0.36-2.54a7.964 7.964 0 001.62-0.936l2.4 0.96a0.5 0.5 0 00.605-0.22l1.928-3.338a0.5 0.5 0 00-.12-0.638l-2.036-1.58zM12 15.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z"/>
</svg>
Note: Ensure that the icons/ folder contains all necessary icon sizes (icon16.png, icon48.png, icon128.png) and the settings.svg file.

3. Step-by-Step Checklist for Implementation
Verify File Structure and Placement Ensure your project directory (media-loader/) is organized as follows:

media-loader/
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   ├── icon128.png
│   └── settings.svg
├── background.js
├── dashboard.html
├── dashboard.js
├── styles.css
└── manifest.json
Double-Check dashboard.js for Typos
Ensure that the loadSettings function is correctly spelled and defined.
Verify that all function names are consistent between their definitions and calls.
Ensure that there are no syntax errors in dashboard.js that could prevent the script from loading correctly.
Ensure Correct Script Linking in dashboard.html
The <script src="dashboard.js"></script> tag should be placed after the HTML elements it interacts with (preferably at the end of the <body> section).
Reload the Extension
Navigate to chrome://extensions/ in your Chrome browser.
Enable "Developer mode" using the toggle in the top right corner.
If your extension is already loaded, click the "Reload" icon on the extension's card to apply changes.
If not loaded, click "Load unpacked" and select your media-loader/ directory.
Test Functionality
Open Dashboard:
Click the extension icon. A new tab should open displaying the dashboard.
Settings Modal:
Verify that the settings modal is not visible upon loading the dashboard.
Click the settings button (small square at the top left) to open the modal.
Close the modal by:
Clicking the close button (&times;).
Clicking outside the modal content.
Pressing the Escape key.
Load Media:
Input a valid YouTube or Vimeo URL or upload a local media file.
Click "Load Music" or "Load Video" to embed the media.
The media player should appear in the designated container.
Playback Controls:
Once media is loaded, the "Play," "Pause/Resume," and "Play from Start" buttons should be enabled.
Test each functionality to ensure they work as expected.
Settings:
Toggle the "Full Screen on Play" option.
Click "Play" to test if it enters fullscreen mode as per the setting.
Check for JavaScript Errors
Press F12 to open Developer Tools in the dashboard tab.
Navigate to the "Console" tab.
Ensure there are no errors such as Uncaught ReferenceError: loadSettings is not defined.
If errors persist, verify that all function names are correctly spelled and that dashboard.js is accurately linked.
Verify CSS and Modal Visibility
Ensure that the modal remains hidden by default.
Verify that the settings button is correctly positioned at the top left.
Check that the modal appears and disappears correctly based on user interactions.
Clear Browser Cache (If Necessary)
Sometimes, Chrome caches extension files. To ensure you're loading the latest version:
Navigate to chrome://extensions/.
Toggle the "Developer mode" off and then back on.
Click "Reload" on your extension.
4. Common Troubleshooting Steps
A. Verify Script Loading
Ensure Correct Path:
If dashboard.js is in the same directory as dashboard.html, the <script src="dashboard.js"></script> tag is correct.
If it's in a different directory, adjust the path accordingly (e.g., scripts/dashboard.js).
Check Script Loading in Developer Tools:
Open Developer Tools (F12) in the dashboard tab.
Navigate to the "Network" tab.
Reload the page and ensure dashboard.js loads without 404 errors.
B. Confirm Element IDs and Classes
Ensure that all HTML elements have the correct id and class attributes as referenced in dashboard.js. Example:
<button id="settings-button" ...> in HTML should match document.getElementById('settings-button') in JS.
C. Inspect for JavaScript Syntax Errors
Open Developer Tools (F12) and go to the "Console" tab.
Look for any syntax errors that might prevent dashboard.js from executing properly.
D. Ensure No Conflicting Scripts
If you have other scripts running on the page, ensure they don't interfere with dashboard.js.
Remove or disable other scripts temporarily to isolate the issue.
5. Final Corrected Files Snapshot
To help you ensure everything is correctly implemented, here's a snapshot of the corrected files:

manifest.json
(As provided above)

background.js
(As provided above)

dashboard.html
(As provided above)

dashboard.js
(As provided above)

styles.css
(As provided above)

icons/settings.svg
(As provided above)

6. Optional: Converting to a Safari Extension
While your primary focus is resolving the current Chrome extension issues, you also mentioned interest in converting your project to a Safari extension. Here's a brief guide:

A. Prerequisites
macOS: Safari extension development requires a Mac.
Xcode: Ensure you have the latest version of Xcode installed from the Mac App Store.
Apple Developer Account: Required for publishing extensions on the Safari Extensions Gallery.
B. Use safari-web-extension-converter Tool
Apple provides a command-line tool called safari-web-extension-converter to facilitate the conversion process.

Locate the Tool:
It's included with Xcode. If you have Xcode installed, you can access it via Terminal.
Run the Converter:
Open Terminal.
Navigate to your extension directory:

cd ~/Desktop/media-loader
Run the converter:

xcrun safari-web-extension-converter --manifest ~/Desktop/media-loader/manifest.json
Follow the on-screen prompts:
App Name: Provide a name for your extension.
Bundle Identifier: Typically in the format com.yourdomain.media-loader.
App Location: Choose where to save the converted project.
Review the Converted Project:
The tool generates an Xcode project tailored for Safari.
Open the project in Xcode:

open Media\ Loader.xcodeproj
C. Modify the Converted Project
Adjust manifest.json if Necessary:
Ensure all permissions and resources are correctly defined.
Safari might require specific adjustments or different permission naming.
Handle API Differences:
While Safari supports most WebExtensions APIs, some might behave differently.
Review Safari's WebExtensions API Reference to ensure compatibility.
D. Test the Extension in Safari
Build and Run:
In Xcode, select your target (e.g., "My Extension").
Click the "Run" button to install the extension into Safari for testing.
Enable the Extension:
Open Safari.
Navigate to Safari > Preferences > Extensions.
Ensure your extension is listed and enabled.
Test Functionality:
Click the extension icon in Safari.
Verify that the dashboard opens correctly.
Test all media loading and playback functionalities.
Ensure the settings modal behaves as expected.
E. Debugging and Optimization
Use Safari's Web Inspector:
Open your dashboard tab.
Right-click and select "Inspect Element" to open the Web Inspector.
Check for any JavaScript errors or layout issues.
Optimize for Performance:
Ensure media loading is efficient.
Validate responsiveness across different device sizes.
F. Publish the Extension (Optional)
Sign Up for an Apple Developer Account:
If you haven't already, enroll at Apple Developer.
Follow Apple’s Extension Submission Guidelines:
Refer to Submitting a Safari Web Extension.
Submit for Review:
Follow Apple's procedures to submit your extension for approval.
Note: Some functionalities, especially those relying on APIs like Puppeteer or other Chrome-specific APIs, may not work seamlessly in Safari. Ensure to test all features post-conversion thoroughly.

7. Conclusion
By following the corrected files and ensuring all functions are properly defined and accessible, your Chrome extension should function as intended without the loadSettings error. Additionally, maintaining CSP compliance ensures a secure extension environment.

If you continue to experience issues, please provide the current versions of your dashboard.html and dashboard.js files so I can assist you further in diagnosing and resolving the problems.

Feel free to reach out if you need more detailed guidance or encounter other challenges!


im going to put in my files one by one. heres the first one: {
"manifest_version": 3,
"name": "Media Loader",
"version": "1.0",
"description": "Load and play music and videos from YouTube and Vimeo",
"permissions": ["storage", "tabs"],
"host_permissions": [
"https://www.youtube.com/",
"https://player.vimeo.com/"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Open Media Loader",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
}


Thank you for sharing your manifest.json. It appears to be correctly configured for your "Media Loader" Chrome extension. Here's a brief overview of its key components:

Manifest Version: Set to 3, which is the latest and recommended version for Chrome extensions.
Permissions:
"storage": Allows the extension to use the Chrome storage API to store and retrieve data.
"tabs": Enables interaction with the browser's tab system, which is necessary for opening and managing tabs.
Host Permissions:
Grants access to YouTube and Vimeo URLs, enabling your extension to interact with these platforms.
Background Service Worker:
Points to background.js, which will handle events like clicking the extension icon.
Action:
Defines the default icon and title for the extension's toolbar button.
Icons:
Provides different icon sizes for various contexts within the browser.
Content Security Policy (CSP):
Restricts scripts and objects to those within the extension ('self'), enhancing security.
Next Steps
To effectively diagnose and resolve the issues you're encountering—specifically, the settings modal opening by default and the Uncaught ReferenceError: loadSettings is not defined error—please proceed by sharing the next file in your extension. Based on the manifest you've provided, it's likely that the issue resides in one of the following files:

background.js: Handles the background processes of your extension.
dashboard.html: The main interface displayed in the new tab.
dashboard.js: Manages the frontend logic, including the settings modal.
Recommendations for Now
While waiting for the next file, here are a few quick checks you can perform:

Ensure dashboard.js is Properly Linked in dashboard.html:
The <script> tag should be placed just before the closing </body> tag to ensure all DOM elements are loaded before the script runs.
Example:

...
</main>
<script src="dashboard.js"></script>
</body>
</html>
Check for Typographical Errors:
Ensure that all function names, especially loadSettings, are consistently spelled in both your HTML and JavaScript files.
Verify the Structure of dashboard.js:
Make sure that the loadSettings function is defined before it's called.
Ensure that all event listeners are set up within the proper scope.
Inspect the Settings Modal in dashboard.html:
The settings modal should have the hidden attribute by default.
Example:

<div id="settings-modal" class="modal" hidden>
  <!-- Modal Content -->
</div>
Ensure that the corresponding CSS correctly handles the visibility based on the hidden attribute.
Review the CSS (styles.css):
Ensure that styles related to the modal properly hide it when the hidden attribute is present.
Example:

.modal[hidden] {
  display: none;
}
What's Next?
Please share the next file in your project, preferably background.js or dashboard.js, so we can continue troubleshooting the specific issues you're facing. Once we have all the relevant files, we can pinpoint the exact cause of the modal behavior and the JavaScript error.

Feel free to paste the next file here, and I'll assist you further in resolving the problems!


// background.js

chrome.action.onClicked.addListener(() => {
const dashboardURL = chrome.runtime.getURL("dashboard.html");


// Query for any existing tabs with the dashboard URL
chrome.tabs.query({ url: dashboardURL }, (tabs) => {
    if (chrome.runtime.lastError) {
        console.error("Tab Query Error:", chrome.runtime.lastError);
        return;
    }

    if (tabs.length > 0) {
        // Activate the first existing dashboard tab
        chrome.tabs.update(tabs[0].id, { active: true }, (updatedTab) => {
            if (chrome.runtime.lastError) {
                console.error("Tab Update Error:", chrome.runtime.lastError);
            }
        });
    } else {
        // Create a new dashboard tab
        chrome.tabs.create({ url: dashboardURL, active: true }, (newTab) => {
            if (chrome.runtime.lastError) {
                console.error("Tab Creation Error:", chrome.runtime.lastError);
            }
        });
    }
});
});


Thank you for providing your background.js file. It appears to be correctly set up for handling the extension icon click and managing the opening of the dashboard.html in a new tab.

However, the issues you're experiencing—the settings modal opening by default and the JavaScript error Uncaught ReferenceError: loadSettings is not defined—are likely originating from your dashboard.html and dashboard.js files. These files handle the frontend logic and interface of your extension, including the settings modal and the loadSettings function.

To effectively diagnose and resolve these issues, please follow the steps below. Additionally, I’ve provided sample dashboard.html and dashboard.js files that you can compare with your current setup to identify discrepancies.

1. Immediate Steps to Troubleshoot
A. Ensure Proper Linking of dashboard.js in dashboard.html
Placement of <script> Tag:
The <script> tag that includes dashboard.js should be placed just before the closing </body> tag. This ensures that all DOM elements are loaded before the script runs.
Example:

...
</main>
<script src="dashboard.js"></script>
</body>
</html>
Correct File Path:
Ensure that the src attribute in the <script> tag correctly points to the location of dashboard.js. If dashboard.js is in the same directory as dashboard.html, the above example is correct. Otherwise, adjust the path accordingly.
Example (if dashboard.js is inside a scripts folder):

<script src="scripts/dashboard.js"></script>
B. Verify dashboard.js Contains the loadSettings Function
The JavaScript error Uncaught ReferenceError: loadSettings is not defined indicates that the loadSettings function is either not defined or not accessible in the scope where it's being called.

Define loadSettings:
Ensure that the loadSettings function is properly defined within dashboard.js.
Call loadSettings After Definition:
Make sure that loadSettings is called after its definition or within a scope where it's accessible.
C. Ensure the Settings Modal is Hidden by Default
To prevent the settings modal from opening automatically when the dashboard loads:

Use the hidden Attribute in HTML:
Add the hidden attribute to the modal's <div> to ensure it's not visible on load.
Example:

<div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
    <!-- Modal Content -->
</div>
Handle Visibility with CSS:
Ensure your CSS correctly hides the modal when the hidden attribute is present.
Example (styles.css):

.modal[hidden] {
    display: none;
}

.modal {
    /* Your modal styles here */
}
D. Check for JavaScript Syntax Errors
Open Developer Tools:
Press F12 or right-click on the dashboard page and select "Inspect" to open Developer Tools.
Check the Console:
Navigate to the "Console" tab to view any JavaScript errors that might prevent dashboard.js from executing correctly.
Fix Identified Errors:
Address any syntax errors or issues that appear in the console.
2. Sample dashboard.html and dashboard.js
To help you identify any discrepancies in your current setup, here are sample dashboard.html and dashboard.js files that correctly implement the settings modal and define the loadSettings function.

A. Sample dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media Loader Dashboard</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <main class="container">
        <!-- Settings Header -->
        <header class="settings-container">
            <button id="settings-button" class="settings-button" title="Settings" aria-label="Open Settings">
                <img src="icons/settings.svg" alt="" class="settings-icon" aria-hidden="true">
            </button>
        </header>

        <!-- Settings Modal -->
        <div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
            <div class="modal-content">
                <button class="close-button" aria-label="Close Settings Modal">&times;</button>
                <h2 id="settings-modal-title">Settings</h2>
                <form>
                    <label for="fullscreen-toggle">
                        <input type="checkbox" id="fullscreen-toggle" name="fullscreen-toggle">
                        Full Screen on Play
                    </label>
                    <!-- Additional settings can go here -->
                </form>
            </div>
        </div>

        <!-- Load Music Section -->
        <section class="section" id="load-music-section">
            <fieldset>
                <legend>Load Music</legend>
                
                <label for="music-url">Music URL</label>
                <input type="text" id="music-url" name="music-url" placeholder="Enter YouTube or Vimeo URL">

                <label for="music-file">Upload Music File</label>
                <input type="file" id="music-file" name="music-file" accept="audio/*">

                <label for="music-start">Start Time (seconds)</label>
                <input type="number" id="music-start" name="music-start" placeholder="Start Time (seconds)" min="0">

                <button type="button" id="load-music" class="load-button">Load Music</button>
            </fieldset>
            <div id="music-player-container" class="player-container"></div>
        </section>

        <!-- Load Video Section -->
        <section class="section" id="load-video-section">
            <fieldset>
                <legend>Load Video</legend>
                
                <label for="video-url">Video URL</label>
                <input type="text" id="video-url" name="video-url" placeholder="Enter YouTube or Vimeo URL">

                <label for="video-file">Upload Video File</label>
                <input type="file" id="video-file" name="video-file" accept="video/*">

                <label for="video-start">Start Time (seconds)</label>
                <input type="number" id="video-start" name="video-start" placeholder="Start Time (seconds)" min="0">

                <button type="button" id="load-video" class="load-button">Load Video</button>
            </fieldset>
            <div id="video-player-container" class="player-container"></div>
        </section>

        <!-- Playback Controls -->
        <section class="controls">
            <button type="button" id="play-button" disabled aria-label="Play">Play</button>
            <button type="button" id="pause-resume-button" disabled aria-label="Pause">Pause</button>
            <button type="button" id="play-start-button" disabled aria-label="Play from Start">Play from Start</button>
        </section>

        <!-- Message Container -->
        <section id="message-container" class="message-container" role="alert" aria-live="assertive"></section>
    </main>

    <script src="dashboard.js"></script>
</body>
</html>
B. Sample dashboard.js

// dashboard.js

document.addEventListener('DOMContentLoaded', () => {
    // === Element References ===
    const elements = {
        music: {
            urlInput: document.getElementById('music-url'),
            fileInput: document.getElementById('music-file'),
            startInput: document.getElementById('music-start'),
            loadButton: document.getElementById('load-music'),
            playerContainer: document.getElementById('music-player-container')
        },
        video: {
            urlInput: document.getElementById('video-url'),
            fileInput: document.getElementById('video-file'),
            startInput: document.getElementById('video-start'),
            loadButton: document.getElementById('load-video'),
            playerContainer: document.getElementById('video-player-container')
        },
        controls: {
            playButton: document.getElementById('play-button'),
            pauseResumeButton: document.getElementById('pause-resume-button'),
            playStartButton: document.getElementById('play-start-button')
        },
        messageContainer: document.getElementById('message-container'),
        settings: {
            button: document.getElementById('settings-button'),
            modal: document.getElementById('settings-modal'),
            closeButton: document.querySelector('.close-button'),
            fullscreenToggle: document.getElementById('fullscreen-toggle')
        }
    };

    // === State Management ===
    const state = {
        music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
        video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
        isPaused: false,
        fullscreenOnPlay: false
    };

    // === Initialization ===
    loadSettings();

    // === Event Listeners ===
    elements.music.loadButton.addEventListener('click', handleLoadMusic);
    elements.video.loadButton.addEventListener('click', handleLoadVideo);
    elements.controls.playButton.addEventListener('click', handlePlay);
    elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
    elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

    // Settings Modal Event Listeners
    elements.settings.button.addEventListener('click', openSettingsModal);
    elements.settings.closeButton.addEventListener('click', closeSettingsModal);
    window.addEventListener('click', (event) => {
        if (event.target === elements.settings.modal) {
            closeSettingsModal();
        }
    });
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
            closeSettingsModal();
        }
    });
    elements.settings.fullscreenToggle.addEventListener('change', (event) => {
        state.fullscreenOnPlay = event.target.checked;
        saveSettings();
    });

    // === Handler Functions ===

    // Load Music Handler
    function handleLoadMusic() {
        const url = elements.music.urlInput.value.trim();
        const file = elements.music.fileInput.files[0];
        const start = parseInt(elements.music.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.music.playerContainer);

        // Unload existing music if any
        if (state.music) {
            unloadMedia('music');
        }

        if (file) {
            if (file.size > 10 * 1024 * 1024) { // 10MB limit
                showMessage('Music file size exceeds 10MB limit.', 'error');
                hideLoading(elements.music.playerContainer);
                return;
            }

            // Handle local audio file
            const fileUrl = URL.createObjectURL(file);
            const audioElement = document.createElement('audio');
            audioElement.controls = true;
            audioElement.src = fileUrl;
            audioElement.id = 'loaded-music';
            elements.music.playerContainer.innerHTML = '';
            elements.music.playerContainer.appendChild(audioElement);

            state.music = {
                type: 'file',
                element: audioElement,
                start: start
            };
            showMessage('Local audio file loaded.', 'success');
            hideLoading(elements.music.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
                hideLoading(elements.music.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.music.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.music.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Load Video Handler
    function handleLoadVideo() {
        const url = elements.video.urlInput.value.trim();
        const file = elements.video.fileInput.files[0];
        const start = parseInt(elements.video.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.video.playerContainer);

        // Unload existing video if any
        if (state.video) {
            unloadMedia('video');
        }

        if (file) {
            if (file.size > 50 * 1024 * 1024) { // 50MB limit
                showMessage('Video file size exceeds 50MB limit.', 'error');
                hideLoading(elements.video.playerContainer);
                return;
            }

            // Handle local video file
            const fileUrl = URL.createObjectURL(file);
            const videoElement = document.createElement('video');
            videoElement.controls = true;
            videoElement.src = fileUrl;
            videoElement.id = 'loaded-video';
            elements.video.playerContainer.innerHTML = '';
            elements.video.playerContainer.appendChild(videoElement);

            state.video = {
                type: 'file',
                element: videoElement,
                start: start
            };
            showMessage('Local video file loaded.', 'success');
            hideLoading(elements.video.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
                hideLoading(elements.video.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.video.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.video.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Play Handler
    function handlePlay() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // For iframe embeds, play by setting autoplay parameter
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback started!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // Pause/Resume Handler
    function handlePauseResume() {
        if (state.isPaused) {
            resumeMedia();
        } else {
            pauseMedia();
        }
    }

    // Pause Media
    function pauseMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.pause();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // Pausing iframe embed without API by removing autoplay
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.pause();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        state.isPaused = true;
        elements.controls.pauseResumeButton.textContent = 'Resume';
        showMessage('Playback paused.', 'info');
    }

    // Resume Media
    function resumeMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback resumed.', 'success');
    }

    // Play From Start Handler
    function handlePlayFromStart() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.currentTime = state.music.start;
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.music.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.currentTime = state.video.start;
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.video.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback restarted!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // === Settings Modal Functions ===
    function openSettingsModal() {
        elements.settings.modal.removeAttribute('hidden');
        elements.settings.modal.setAttribute('aria-hidden', 'false');
        elements.settings.modal.querySelector('.close-button').focus();
        trapFocus(elements.settings.modal);
    }

    function closeSettingsModal() {
        elements.settings.modal.setAttribute('hidden', '');
        elements.settings.modal.setAttribute('aria-hidden', 'true');
        elements.settings.button.focus();
        removeTrapFocus();
    }

    // Focus Trap Implementation
    let focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
        textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
        [contenteditable]';
    let focusableElements;
    let firstTabStop;
    let lastTabStop;

    function trapFocus(element) {
        focusableElements = element.querySelectorAll(focusableElementsString);
        focusableElements = Array.prototype.slice.call(focusableElements);

        if (focusableElements.length === 0) return;

        firstTabStop = focusableElements[0];
        lastTabStop = focusableElements[focusableElements.length - 1];

        // Listen for and trap the keyboard
        element.addEventListener('keydown', trapTabKey);
    }

    function trapTabKey(e) {
        // Check for TAB key press
        if (e.key === 'Tab') {
            // SHIFT + TAB
            if (e.shiftKey) {
                if (document.activeElement === firstTabStop) {
                    e.preventDefault();
                    lastTabStop.focus();
                }
            } else { // TAB
                if (document.activeElement === lastTabStop) {
                    e.preventDefault();
                    firstTabStop.focus();
                }
            }
        }
    }

    function removeTrapFocus() {
        elements.settings.modal.removeEventListener('keydown', trapTabKey);
    }

    // === Utility Functions ===

    // Extract Media Information from URL
    function extractMediaInfo(url) {
        try {
            const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
            const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
            const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

            let match = url.match(youtubeRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(youtubeShortRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(vimeoRegex);
            if (match && match[1]) {
                return { platform: 'vimeo', id: match[1] };
            }

            return null;
        } catch (error) {
            console.error('Error extracting media info:', error);
            return null;
        }
    }

    // Capitalize First Letter
    function capitalize(text) {
        if (!text) return '';
        return text.charAt(0).toUpperCase() + text.slice(1);
    }

    // Show Messages to User
    function showMessage(message, type) {
        elements.messageContainer.innerHTML = '';
        const msgDiv = document.createElement('div');
        msgDiv.textContent = message;
        msgDiv.classList.add('message', type); // 'success', 'error', 'info'
        elements.messageContainer.appendChild(msgDiv);

        // Automatically hide message after 5 seconds
        setTimeout(() => {
            if (elements.messageContainer.contains(msgDiv)) {
                elements.messageContainer.removeChild(msgDiv);
            }
        }, 5000);
    }

    // Show Loading Indicator
    function showLoading(container) {
        container.innerHTML = '';
        const loader = document.createElement('div');
        loader.classList.add('loader'); // Define loader styles in CSS
        container.appendChild(loader);
    }

    function hideLoading(container) {
        const loader = container.querySelector('.loader');
        if (loader) {
            container.removeChild(loader);
        }
    }

    // Check if Playback Buttons Should be Enabled
    function checkReadyToPlay() {
        const ready = state.music || state.video;
        elements.controls.playButton.disabled = !ready;
        elements.controls.pauseResumeButton.disabled = !ready;
        elements.controls.playStartButton.disabled = !ready;
    }

    // Enter Fullscreen Mode
    function enterFullscreen() {
        let targetElement = null;
        if (state.video && state.video.element) {
            // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
            targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
        } else if (state.music && state.music.element) {
            targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
        }

        if (targetElement && targetElement.requestFullscreen) {
            targetElement.requestFullscreen().then(() => {
                showMessage('Entered fullscreen mode.', 'success');
            }).catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
                showMessage('Failed to enter fullscreen mode.', 'error');
            });
        } else {
            showMessage('Fullscreen not supported on this element.', 'error');
        }
    }

    // === Media Embedding Functions ===

    // Embed YouTube Video without API
    function embedYouTubeVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.width = '100%';
        iframe.height = '360';
        iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
        iframe.frameBorder = '0';
        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'youtube',
            element: iframe,
            start: start
        };
    }

    // Embed Vimeo Video without API
    function embedVimeoVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
        iframe.width = '100%';
        iframe.height = '360';
        iframe.frameBorder = '0';
        iframe.allow = 'autoplay; fullscreen; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'vimeo',
            element: iframe,
            start: start
        };
    }

    // === Settings Management ===

    // Load Settings from Chrome Storage
    function loadSettings() {
        chrome.storage.local.get(['mediaSettings'], (result) => {
            if (chrome.runtime.lastError) {
                console.error('Error loading settings:', chrome.runtime.lastError);
                showMessage('Failed to load settings.', 'error');
                return;
            }

            if (result.mediaSettings) {
                const { music, video, fullscreenOnPlay: fsPlay } = result.mediaSettings;

                if (music) {
                    if (music.type === 'youtube' || music.type === 'vimeo') {
                        const url = music.type === 'youtube' 
                            ? `https://www.youtube.com/watch?v=${music.id}` 
                            : `https://vimeo.com/${music.id}`;
                        elements.music.urlInput.value = url;
                        elements.music.startInput.value = music.start || 0;
                        // Optionally, auto-load the media by triggering the load button
                        // handleLoadMusic();
                    }
                    // Handle file-based music loading if necessary
                }

                if (video) {
                    if (video.type === 'youtube' || video.type === 'vimeo') {
                        const url = video.type === 'youtube' 
                            ? `https://www.youtube.com/watch?v=${video.id}` 
                            : `https://vimeo.com/${video.id}`;
                        elements.video.urlInput.value = url;
                        elements.video.startInput.value = video.start || 0;
                        // Optionally, auto-load the media by triggering the load button
                        // handleLoadVideo();
                    }
                    // Handle file-based video loading if necessary
                }

                if (typeof fsPlay === 'boolean') {
                    state.fullscreenOnPlay = fsPlay;
                    elements.settings.fullscreenToggle.checked = fsPlay;
                }
            }
        });
    }

    // Save Settings to Chrome Storage
    function saveSettings() {
        const settings = {
            music: state.music,
            video: state.video,
            fullscreenOnPlay: state.fullscreenOnPlay
        };
        chrome.storage.local.set({ mediaSettings: settings }, () => {
            if (chrome.runtime.lastError) {
                console.error('Error saving settings:', chrome.runtime.lastError);
                showMessage('Error saving settings.', 'error');
                return;
            }
            console.log('Settings saved.');
        });
    }

    // === Unload Media Function ===
    function unloadMedia(mediaType) {
        if (state[mediaType]) {
            if (state[mediaType].type === 'file') {
                state[mediaType].element.src = '';
            } else {
                // Reset iframe src to stop the media
                const iframe = state[mediaType].element;
                iframe.src = '';
            }
            state[mediaType] = null;
        }
    }
});
3. Detailed Steps to Resolve Your Issues
A. Review and Compare Your dashboard.js with the Sample
Ensure loadSettings is Defined:
Check that the loadSettings function exists and is correctly spelled.
Verify that it's defined before it's called within the DOMContentLoaded event listener.
Check for Scope Issues:
Ensure that all functions, including loadSettings, are within the scope where they're being called.
Avoid defining functions inside other functions unless intended.
Avoid Syntax Errors:
Look for any missing brackets, parentheses, or typos that might prevent the script from running.
Use a JavaScript linter or your code editor's syntax highlighting to identify issues.
B. Ensure Proper Modal Handling in dashboard.js
Hide Modal on Load:
The modal should have the hidden attribute in dashboard.html, and your CSS should hide it accordingly.
Open Modal on Settings Button Click:
Ensure that the event listener for the settings button correctly removes the hidden attribute to display the modal.
Close Modal on Close Button, Outside Click, or Escape Key:
Verify that the event listeners for closing the modal are correctly set up and functional.
C. Test the Changes
Reload the Extension:
After making changes to your files, navigate to chrome://extensions/, find your "Media Loader" extension, and click the "Reload" icon to apply the changes.
Open the Dashboard:
Click the extension icon to open the dashboard in a new tab.
Confirm that the settings modal is not open by default.
Interact with the Settings Modal:
Click the settings button to open the modal.
Test closing the modal by clicking the close button, clicking outside the modal, and pressing the Escape key.
Monitor the Console for Errors:
Open Developer Tools (F12) in the dashboard tab and check the "Console" for any JavaScript errors.
4. If Issues Persist: Share dashboard.html and dashboard.js
If after following the above steps you're still encountering issues with the settings modal opening by default or the loadSettings error, please share the contents of your dashboard.html and dashboard.js files. This will allow me to provide more targeted assistance.

5. Additional Recommendations
A. Use Strict Mode in JavaScript
Adding "use strict"; at the beginning of your JavaScript files can help catch common coding bloopers, preventing, for example, the accidental creation of global variables.

Example:


"use strict";
document.addEventListener('DOMContentLoaded', () => {
    // Your code here
});
B. Implement Error Handling
Enhance your JavaScript functions with try-catch blocks to handle potential runtime errors gracefully.

Example:


function loadSettings() {
    try {
        chrome.storage.local.get(['mediaSettings'], (result) => {
            if (chrome.runtime.lastError) {
                throw new Error(chrome.runtime.lastError);
            }
            // Rest of your logic...
        });
    } catch (error) {
        console.error('Error loading settings:', error);
        showMessage('Failed to load settings.', 'error');
    }
}
C. Validate File Paths and Names
Ensure that all file paths and names are correctly referenced:

Icons:
Verify that the icons/ folder contains icon16.png, icon48.png, icon128.png, and settings.svg.
JavaScript Files:
Confirm that dashboard.js is named correctly and located in the specified path.
D. Ensure CSS Correctly Handles the Modal
Your CSS should respect the hidden attribute and properly style the modal when it's visible.

Example (styles.css):


/* Modal Styles */
.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
E. Accessibility Considerations
Ensure that all interactive elements are accessible:

ARIA Attributes:
Use appropriate ARIA roles and labels for better screen reader support.
Keyboard Navigation:
Make sure that users can navigate the modal and all controls using the keyboard alone.
6. Converting to a Safari Extension (Optional)
While resolving the current issues in your Chrome extension is paramount, you also expressed interest in converting your project to a Safari extension. Here's a brief guide to help you through this process:

A. Prerequisites
macOS: Safari extension development requires a Mac.
Xcode: Ensure you have the latest version installed from the Mac App Store.
Apple Developer Account: Required for publishing extensions on the Safari Extensions Gallery.
B. Use safari-web-extension-converter Tool
Apple provides a command-line tool called safari-web-extension-converter to facilitate the conversion process.

Locate the Tool:
It's included with Xcode. If you have Xcode installed, you can access it via Terminal.
Run the Converter:
Open Terminal.
Navigate to your extension directory:

cd ~/Desktop/media-loader
Run the converter:

xcrun safari-web-extension-converter --manifest ~/Desktop/media-loader/manifest.json
Follow the on-screen prompts:
App Name: Provide a name for your extension.
Bundle Identifier: Typically in the format com.yourdomain.medialoader.
App Location: Choose where to save the converted project.
Review the Converted Project:
The tool generates an Xcode project tailored for Safari.
Open the project in Xcode:

open Media\ Loader.xcodeproj
C. Modify the Converted Project
Adjust manifest.json if Necessary:
Ensure all permissions and resources are correctly defined.
Safari might require specific adjustments or different permission naming.
Handle API Differences:
While Safari supports most WebExtensions APIs, some might behave differently.
Review Safari's WebExtensions API Reference to ensure compatibility.
Configure Extension Settings in Xcode:
Set up necessary capabilities and entitlements.
Define app icon and other metadata.
D. Test the Extension in Safari
Build and Run:
In Xcode, select your target (e.g., "Media Loader").
Click the "Run" button to install the extension into Safari for testing.
Enable the Extension:
Open Safari.
Navigate to Safari > Preferences > Extensions.
Ensure your extension is listed and enabled.
Test Functionality:
Click the extension icon in Safari.
Verify that the dashboard opens correctly.
Test all media loading and playback functionalities.
Ensure the settings modal behaves as expected.
E. Debugging and Optimization
Use Safari's Web Inspector:
Open your dashboard tab.
Right-click and select "Inspect Element" to open the Web Inspector.
Check for any JavaScript errors or layout issues.
Optimize for Performance:
Ensure media loading is efficient.
Validate responsiveness across different device sizes.
F. Publish the Extension (Optional)
Sign Up for an Apple Developer Account:
If you haven't already, enroll at Apple Developer.
Follow Apple’s Extension Submission Guidelines:
Refer to Submitting a Safari Web Extension.
Submit for Review:
Follow Apple's procedures to submit your extension for approval.
Note: Some functionalities, especially those relying on APIs like Puppeteer or other Chrome-specific APIs, may not work seamlessly in Safari. Ensure to test all features post-conversion thoroughly.

7. Final Checklist
File Structure:
Ensure all files (manifest.json, background.js, dashboard.html, dashboard.js, styles.css, and the icons/ folder) are correctly placed within your extension directory.
Function Definitions:
Verify that all functions, especially loadSettings, are properly defined and free of typos.
Script Loading Order:
Place the <script src="dashboard.js"></script> tag at the end of the <body> to ensure all DOM elements are available when the script runs.
CSS Verification:
Ensure your CSS correctly handles the visibility and styling of the settings modal based on the hidden attribute.
Permissions and CSP:
Make sure your manifest.json correctly defines all necessary permissions and adheres to the Content Security Policy to prevent unauthorized script execution.
Testing:
Thoroughly test all functionalities, including loading media, playback controls, and opening/closing the settings modal.
Error Monitoring:
Continuously monitor the Developer Console for any new errors and address them promptly.
By following this comprehensive guide and ensuring that all components of your extension are correctly configured, you should be able to resolve the issues with the settings modal and the loadSettings function. If you continue to experience problems, please share the contents of your dashboard.html and dashboard.js files so I can provide more targeted assistance.




    <!-- Settings Modal -->
    <div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
        <div class="modal-content">
            <button class="close-button" aria-label="Close Settings Modal">&times;</button>
            <h2 id="settings-modal-title">Settings</h2>
            <form>
                <label for="fullscreen-toggle">
                    <input type="checkbox" id="fullscreen-toggle" name="fullscreen-toggle">
                    Full Screen on Play
                </label>
                <!-- Additional settings can go here -->
            </form>
        </div>
    </div>

    <!-- Load Music Section -->
    <section class="section" id="load-music-section">
        <fieldset>
            <legend>Load Music</legend>
            
            <label for="music-url">Music URL</label>
            <input type="text" id="music-url" name="music-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="music-file">Upload Music File</label>
            <input type="file" id="music-file" name="music-file" accept="audio/*">

            <label for="music-start">Start Time (seconds)</label>
            <input type="number" id="music-start" name="music-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-music" class="load-button">Load Music</button>
        </fieldset>
        <div id="music-player-container" class="player-container"></div>
    </section>

    <!-- Load Video Section -->
    <section class="section" id="load-video-section">
        <fieldset>
            <legend>Load Video</legend>
            
            <label for="video-url">Video URL</label>
            <input type="text" id="video-url" name="video-url" placeholder="Enter YouTube or Vimeo URL">

            <label for="video-file">Upload Video File</label>
            <input type="file" id="video-file" name="video-file" accept="video/*">

            <label for="video-start">Start Time (seconds)</label>
            <input type="number" id="video-start" name="video-start" placeholder="Start Time (seconds)" min="0">

            <button type="button" id="load-video" class="load-button">Load Video</button>
        </fieldset>
        <div id="video-player-container" class="player-container"></div>
    </section>

    <!-- Playback Controls -->
    <section class="controls">
        <button type="button" id="play-button" disabled aria-label="Play">Play</button>
        <button type="button" id="pause-resume-button" disabled aria-label="Pause">Pause</button>
        <button type="button" id="play-start-button" disabled aria-label="Play from Start">Play from Start</button>
    </section>

    <!-- Message Container -->
    <section id="message-container" class="message-container" role="alert" aria-live="assertive"></section>
</main>

<script src="dashboard.js"></script>

Thank you for sharing your dashboard.html. Based on the information provided and the issues you're encountering—the settings modal opening by default and the JavaScript error Uncaught ReferenceError: loadSettings is not defined—the problem likely resides in your dashboard.js file. To effectively resolve these issues, let's walk through the necessary steps and provide a comprehensive dashboard.js example.

1. Understanding the Issue
A. Settings Modal Opening by Default
Cause: If the settings modal is opening by default when the dashboard loads, it might be due to unintended JavaScript code that removes the hidden attribute or incorrectly handles the modal's visibility during initialization.
B. JavaScript Error: Uncaught ReferenceError: loadSettings is not defined
Cause: This error indicates that the loadSettings function is either not defined in dashboard.js or is not accessible in the scope where it's being called. This can halt the execution of subsequent scripts, potentially leaving the modal open.
2. Providing a Corrected dashboard.js
Below is a comprehensive dashboard.js script tailored to your provided dashboard.html. This script ensures that:

The loadSettings function is properly defined and called.
The settings modal remains hidden by default.
All event listeners are correctly set up.
Error handling is in place to catch and log potential issues.
dashboard.js

// dashboard.js

"use strict";

document.addEventListener('DOMContentLoaded', () => {
    // === Element References ===
    const elements = {
        music: {
            urlInput: document.getElementById('music-url'),
            fileInput: document.getElementById('music-file'),
            startInput: document.getElementById('music-start'),
            loadButton: document.getElementById('load-music'),
            playerContainer: document.getElementById('music-player-container')
        },
        video: {
            urlInput: document.getElementById('video-url'),
            fileInput: document.getElementById('video-file'),
            startInput: document.getElementById('video-start'),
            loadButton: document.getElementById('load-video'),
            playerContainer: document.getElementById('video-player-container')
        },
        controls: {
            playButton: document.getElementById('play-button'),
            pauseResumeButton: document.getElementById('pause-resume-button'),
            playStartButton: document.getElementById('play-start-button')
        },
        messageContainer: document.getElementById('message-container'),
        settings: {
            button: document.getElementById('settings-button'),
            modal: document.getElementById('settings-modal'),
            closeButton: document.querySelector('.close-button'),
            fullscreenToggle: document.getElementById('fullscreen-toggle')
        }
    };

    // === State Management ===
    const state = {
        music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
        video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
        isPaused: false,
        fullscreenOnPlay: false
    };

    // === Initialization ===
    loadSettings();

    // === Event Listeners ===
    elements.music.loadButton.addEventListener('click', handleLoadMusic);
    elements.video.loadButton.addEventListener('click', handleLoadVideo);
    elements.controls.playButton.addEventListener('click', handlePlay);
    elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
    elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

    // Settings Modal Event Listeners
    elements.settings.button.addEventListener('click', openSettingsModal);
    elements.settings.closeButton.addEventListener('click', closeSettingsModal);
    window.addEventListener('click', (event) => {
        if (event.target === elements.settings.modal) {
            closeSettingsModal();
        }
    });
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
            closeSettingsModal();
        }
    });
    elements.settings.fullscreenToggle.addEventListener('change', (event) => {
        state.fullscreenOnPlay = event.target.checked;
        saveSettings();
    });

    // === Handler Functions ===

    // Load Music Handler
    function handleLoadMusic() {
        const url = elements.music.urlInput.value.trim();
        const file = elements.music.fileInput.files[0];
        const start = parseInt(elements.music.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.music.playerContainer);

        // Unload existing music if any
        if (state.music) {
            unloadMedia('music');
        }

        if (file) {
            if (file.size > 10 * 1024 * 1024) { // 10MB limit
                showMessage('Music file size exceeds 10MB limit.', 'error');
                hideLoading(elements.music.playerContainer);
                return;
            }

            // Handle local audio file
            const fileUrl = URL.createObjectURL(file);
            const audioElement = document.createElement('audio');
            audioElement.controls = true;
            audioElement.src = fileUrl;
            audioElement.id = 'loaded-music';
            elements.music.playerContainer.innerHTML = '';
            elements.music.playerContainer.appendChild(audioElement);

            state.music = {
                type: 'file',
                element: audioElement,
                start: start
            };
            showMessage('Local audio file loaded.', 'success');
            hideLoading(elements.music.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
                hideLoading(elements.music.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.music.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.music.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Load Video Handler
    function handleLoadVideo() {
        const url = elements.video.urlInput.value.trim();
        const file = elements.video.fileInput.files[0];
        const start = parseInt(elements.video.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.video.playerContainer);

        // Unload existing video if any
        if (state.video) {
            unloadMedia('video');
        }

        if (file) {
            if (file.size > 50 * 1024 * 1024) { // 50MB limit
                showMessage('Video file size exceeds 50MB limit.', 'error');
                hideLoading(elements.video.playerContainer);
                return;
            }

            // Handle local video file
            const fileUrl = URL.createObjectURL(file);
            const videoElement = document.createElement('video');
            videoElement.controls = true;
            videoElement.src = fileUrl;
            videoElement.id = 'loaded-video';
            elements.video.playerContainer.innerHTML = '';
            elements.video.playerContainer.appendChild(videoElement);

            state.video = {
                type: 'file',
                element: videoElement,
                start: start
            };
            showMessage('Local video file loaded.', 'success');
            hideLoading(elements.video.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
                hideLoading(elements.video.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.video.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.video.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Play Handler
    function handlePlay() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // For iframe embeds, play by setting autoplay parameter
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback started!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // Pause/Resume Handler
    function handlePauseResume() {
        if (state.isPaused) {
            resumeMedia();
        } else {
            pauseMedia();
        }
    }

    // Pause Media
    function pauseMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.pause();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // Pausing iframe embed without API by removing autoplay
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.pause();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        state.isPaused = true;
        elements.controls.pauseResumeButton.textContent = 'Resume';
        showMessage('Playback paused.', 'info');
    }

    // Resume Media
    function resumeMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback resumed.', 'success');
    }

    // Play From Start Handler
    function handlePlayFromStart() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.currentTime = state.music.start;
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.music.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.currentTime = state.video.start;
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.video.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback restarted!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // === Settings Modal Functions ===
    function openSettingsModal() {
        elements.settings.modal.removeAttribute('hidden');
        elements.settings.modal.setAttribute('aria-hidden', 'false');
        elements.settings.modal.querySelector('.close-button').focus();
        trapFocus(elements.settings.modal);
    }

    function closeSettingsModal() {
        elements.settings.modal.setAttribute('hidden', '');
        elements.settings.modal.setAttribute('aria-hidden', 'true');
        elements.settings.button.focus();
        removeTrapFocus();
    }

    // Focus Trap Implementation
    let focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
        textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
        [contenteditable]';
    let focusableElements;
    let firstTabStop;
    let lastTabStop;

    function trapFocus(element) {
        focusableElements = element.querySelectorAll(focusableElementsString);
        focusableElements = Array.prototype.slice.call(focusableElements);

        if (focusableElements.length === 0) return;

        firstTabStop = focusableElements[0];
        lastTabStop = focusableElements[focusableElements.length - 1];

        // Listen for and trap the keyboard
        element.addEventListener('keydown', trapTabKey);
    }

    function trapTabKey(e) {
        // Check for TAB key press
        if (e.key === 'Tab') {
            // SHIFT + TAB
            if (e.shiftKey) {
                if (document.activeElement === firstTabStop) {
                    e.preventDefault();
                    lastTabStop.focus();
                }
            } else { // TAB
                if (document.activeElement === lastTabStop) {
                    e.preventDefault();
                    firstTabStop.focus();
                }
            }
        }
    }

    function removeTrapFocus() {
        elements.settings.modal.removeEventListener('keydown', trapTabKey);
    }

    // === Utility Functions ===

    // Extract Media Information from URL
    function extractMediaInfo(url) {
        try {
            const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
            const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
            const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

            let match = url.match(youtubeRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(youtubeShortRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(vimeoRegex);
            if (match && match[1]) {
                return { platform: 'vimeo', id: match[1] };
            }

            return null;
        } catch (error) {
            console.error('Error extracting media info:', error);
            return null;
        }
    }

    // Capitalize First Letter
    function capitalize(text) {
        if (!text) return '';
        return text.charAt(0).toUpperCase() + text.slice(1);
    }

    // Show Messages to User
    function showMessage(message, type) {
        elements.messageContainer.innerHTML = '';
        const msgDiv = document.createElement('div');
        msgDiv.textContent = message;
        msgDiv.classList.add('message', type); // 'success', 'error', 'info'
        elements.messageContainer.appendChild(msgDiv);

        // Automatically hide message after 5 seconds
        setTimeout(() => {
            if (elements.messageContainer.contains(msgDiv)) {
                elements.messageContainer.removeChild(msgDiv);
            }
        }, 5000);
    }

    // Show Loading Indicator
    function showLoading(container) {
        container.innerHTML = '';
        const loader = document.createElement('div');
        loader.classList.add('loader'); // Define loader styles in CSS
        container.appendChild(loader);
    }

    function hideLoading(container) {
        const loader = container.querySelector('.loader');
        if (loader) {
            container.removeChild(loader);
        }
    }

    // Check if Playback Buttons Should be Enabled
    function checkReadyToPlay() {
        const ready = state.music || state.video;
        elements.controls.playButton.disabled = !ready;
        elements.controls.pauseResumeButton.disabled = !ready;
        elements.controls.playStartButton.disabled = !ready;
    }

    // Enter Fullscreen Mode
    function enterFullscreen() {
        let targetElement = null;
        if (state.video && state.video.element) {
            // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
            targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
        } else if (state.music && state.music.element) {
            targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
        }

        if (targetElement && targetElement.requestFullscreen) {
            targetElement.requestFullscreen().then(() => {
                showMessage('Entered fullscreen mode.', 'success');
            }).catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
                showMessage('Failed to enter fullscreen mode.', 'error');
            });
        } else {
            showMessage('Fullscreen not supported on this element.', 'error');
        }
    }

    // === Media Embedding Functions ===

    // Embed YouTube Video without API
    function embedYouTubeVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.width = '100%';
        iframe.height = '360';
        iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
        iframe.frameBorder = '0';
        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'youtube',
            element: iframe,
            start: start
        };
    }

    // Embed Vimeo Video without API
    function embedVimeoVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
        iframe.width = '100%';
        iframe.height = '360';
        iframe.frameBorder = '0';
        iframe.allow = 'autoplay; fullscreen; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'vimeo',
            element: iframe,
            start: start
        };
    }

    // === Settings Management ===

    // Load Settings from Chrome Storage
    function loadSettings() {
        try {
            chrome.storage.local.get(['mediaSettings'], (result) => {
                if (chrome.runtime.lastError) {
                    throw new Error(chrome.runtime.lastError);
                }

                if (result.mediaSettings) {
                    const { music, video, fullscreenOnPlay: fsPlay } = result.mediaSettings;

                    if (music) {
                        if (music.type === 'youtube' || music.type === 'vimeo') {
                            const url = music.type === 'youtube' 
                                ? `https://www.youtube.com/watch?v=${music.id}` 
                                : `https://vimeo.com/${music.id}`;
                            elements.music.urlInput.value = url;
                            elements.music.startInput.value = music.start || 0;
                            // Optionally, auto-load the media by triggering the load button
                            // handleLoadMusic();
                        }
                        // Handle file-based music loading if necessary
                    }

                    if (video) {
                        if (video.type === 'youtube' || video.type === 'vimeo') {
                            const url = video.type === 'youtube' 
                                ? `https://www.youtube.com/watch?v=${video.id}` 
                                : `https://vimeo.com/${video.id}`;
                            elements.video.urlInput.value = url;
                            elements.video.startInput.value = video.start || 0;
                            // Optionally, auto-load the media by triggering the load button
                            // handleLoadVideo();
                        }
                        // Handle file-based video loading if necessary
                    }

                    if (typeof fsPlay === 'boolean') {
                        state.fullscreenOnPlay = fsPlay;
                        elements.settings.fullscreenToggle.checked = fsPlay;
                    }
                }
            });
        } catch (error) {
            console.error('Error loading settings:', error);
            showMessage('Failed to load settings.', 'error');
        }
    }

    // Save Settings to Chrome Storage
    function saveSettings() {
        const settings = {
            music: state.music,
            video: state.video,
            fullscreenOnPlay: state.fullscreenOnPlay
        };
        try {
            chrome.storage.local.set({ mediaSettings: settings }, () => {
                if (chrome.runtime.lastError) {
                    throw new Error(chrome.runtime.lastError);
                }
                console.log('Settings saved.');
            });
        } catch (error) {
            console.error('Error saving settings:', error);
            showMessage('Error saving settings.', 'error');
        }
    }

    // === Unload Media Function ===
    function unloadMedia(mediaType) {
        if (state[mediaType]) {
            if (state[mediaType].type === 'file') {
                state[mediaType].element.src = '';
            } else {
                // Reset iframe src to stop the media
                const iframe = state[mediaType].element;
                iframe.src = '';
            }
            state[mediaType] = null;
        }
    }
});
3. Explanation of the Corrected dashboard.js
A. Strict Mode
Usage: "use strict"; is added at the top to enforce stricter parsing and error handling in your JavaScript code, helping catch common mistakes.
B. Element References
Purpose: Grabs all necessary DOM elements by their IDs or classes to manipulate them later.
C. State Management
Purpose: Keeps track of the current state of loaded media, playback status, and user preferences (like fullscreen mode).
D. Initialization
Function: loadSettings()
Purpose: Retrieves saved settings from Chrome's storage and initializes the dashboard accordingly.
E. Event Listeners
Media Loading: Listens for clicks on "Load Music" and "Load Video" buttons to handle media embedding.
Playback Controls: Listens for "Play," "Pause/Resume," and "Play from Start" button clicks to control media playback.
Settings Modal: Handles opening and closing of the settings modal, including clicks outside the modal and pressing the Escape key.
Fullscreen Toggle: Saves user preference for entering fullscreen mode upon playback.
F. Handler Functions
handleLoadMusic and handleLoadVideo: Manage the loading of local files or embedding media from YouTube/Vimeo based on user input.
handlePlay, handlePauseResume, and handlePlayFromStart: Control media playback, including starting, pausing/resuming, and restarting from a specific time.
openSettingsModal and closeSettingsModal: Manage the visibility of the settings modal with accessibility considerations.
trapFocus and trapTabKey: Ensure that keyboard navigation within the modal is handled correctly, trapping focus inside the modal when it's open.
G. Utility Functions
extractMediaInfo: Parses the provided URL to determine if it's a YouTube or Vimeo link and extracts the relevant video ID.
capitalize: Capitalizes the first letter of a given string (used for display messages).
showMessage: Displays feedback messages to the user with different styles based on the message type (success, error, info).
showLoading and hideLoading: Manage the display of a loading spinner during media loading processes.
checkReadyToPlay: Enables or disables playback control buttons based on whether media is loaded.
enterFullscreen: Attempts to put the media player into fullscreen mode based on user settings.
H. Error Handling
Try-Catch Blocks: Wrapped around settings loading and saving to catch and log any potential errors, preventing unhandled exceptions that could disrupt the script execution.
4. Ensuring the Settings Modal Remains Hidden by Default
Your dashboard.html correctly sets the hidden attribute on the settings modal:


<div id="settings-modal" class="modal" role="dialog" aria-labelledby="settings-modal-title" aria-modal="true" hidden>
    <!-- Modal Content -->
</div>
And your CSS should have the following rule to handle the hidden attribute:


/* Modal Styles */
.modal[hidden] {
    display: none;
}

.modal {
    /* Your modal styles here */
}
Ensure that this CSS rule is present in your styles.css. This ensures that the modal remains hidden unless the hidden attribute is removed by JavaScript.

5. Additional Recommendations
A. Check for Syntax Errors
Use Developer Tools:
Open Developer Tools (F12) in your dashboard tab.
Navigate to the "Console" tab to check for any JavaScript errors.
Address any errors that appear to ensure smooth script execution.
B. Verify File Paths and Names
Script Path: Ensure that dashboard.js is located in the same directory as dashboard.html. If not, adjust the <script> tag's src attribute accordingly.
Icon Path: Verify that icons/settings.svg exists in the specified path and is correctly referenced.
C. Clear Browser Cache (If Necessary)
Sometimes, Chrome may cache older versions of your extension's files. To ensure you're loading the latest version:

Navigate to chrome://extensions/.
Toggle "Developer mode" off and then back on.
Click the "Reload" icon on your "Media Loader" extension to apply the latest changes.
D. Use a JavaScript Linter
Tools like ESLint can help identify and fix potential issues in your JavaScript code before running it.

6. Testing the Corrected Extension
After implementing the corrected dashboard.js, follow these steps to test your extension:

Reload the Extension:
Go to chrome://extensions/.
Click the "Reload" (⟳) icon on your "Media Loader" extension to apply the changes.
Open the Dashboard:
Click the extension icon. A new tab should open displaying the dashboard.
Verify: The settings modal should not be visible by default.
Open the Settings Modal:
Click the settings button (small square at the top left).
Verify: The settings modal should appear.
Close the Settings Modal:
Click the close button (&times;), click outside the modal content, or press the Escape key.
Verify: The settings modal should close.
Load Media:
Enter a valid YouTube or Vimeo URL or upload a local media file in the respective sections.
Click "Load Music" or "Load Video."
Verify: The media player should appear in the designated container without errors.
Use Playback Controls:
Once media is loaded, the "Play," "Pause/Resume," and "Play from Start" buttons should be enabled.
Test each button to ensure they function as expected.
Toggle Fullscreen on Play:
Open the settings modal.
Toggle the "Full Screen on Play" option.
Click "Play" to test if the media enters fullscreen mode based on your setting.
Check Developer Console:
Ensure no JavaScript errors are present in the "Console" tab of Developer Tools.
7. Converting to a Safari Extension (Optional)
If you plan to convert your "Media Loader" Chrome extension to a Safari extension, here's a brief guide:

A. Prerequisites
macOS: Safari extension development requires a Mac.
Xcode: Ensure you have the latest version installed from the Mac App Store.
Apple Developer Account: Required for publishing extensions on the Safari Extensions Gallery.
B. Use safari-web-extension-converter Tool
Apple provides a command-line tool to convert Chrome extensions to Safari:

Open Terminal.
Navigate to Your Extension Directory:

cd ~/Desktop/media-loader
Run the Converter:

xcrun safari-web-extension-converter --manifest ~/Desktop/media-loader/manifest.json
Follow the On-Screen Prompts:
App Name: Provide a name for your extension.
Bundle Identifier: Typically in the format com.yourdomain.medialoader.
App Location: Choose where to save the converted project.
C. Review and Modify the Converted Project
Open the Project in Xcode:

open Media\ Loader.xcodeproj
Adjust manifest.json if Necessary:
Ensure all permissions and resources are correctly defined.
Handle API Differences:
Safari may have slight differences in API support. Refer to Safari Web Extensions for specifics.
Configure Extension Settings in Xcode:
Set up necessary capabilities and entitlements.
Define app icon and other metadata.
D. Test the Extension in Safari
Build and Run:
In Xcode, select your target (e.g., "Media Loader").
Click the "Run" button to install the extension into Safari for testing.
Enable the Extension:
Open Safari.
Navigate to Safari > Preferences > Extensions.
Ensure your extension is listed and enabled.
Test Functionality:
Click the extension icon in Safari.
Verify that the dashboard opens correctly.
Test all media loading and playback functionalities.
Ensure the settings modal behaves as expected.
E. Publish the Extension (Optional)
Sign Up for an Apple Developer Account:
If you haven't already, enroll at Apple Developer.
Follow Apple’s Extension Submission Guidelines:
Refer to Submitting a Safari Web Extension.
Submit for Review:
Follow Apple's procedures to submit your extension for approval.
Note: Ensure thorough testing in Safari as some functionalities may behave differently compared to Chrome.

8. Conclusion
By ensuring that the loadSettings function is properly defined and handling the settings modal's visibility correctly within dashboard.js, you should resolve the issues of the modal opening by default and the JavaScript error. Follow the comprehensive steps and the provided dashboard.js example to align your extension's functionality.

If you continue to experience problems after implementing these changes, please share your current dashboard.js and styles.css files. This will allow for a more detailed review and targeted assistance.

Feel free to reach out with your updated files or any further questions you might have!


// dashboard.js

document.addEventListener('DOMContentLoaded', () => {
// === Element References ===
const elements = {
music: {
urlInput: document.getElementById('music-url'),
fileInput: document.getElementById('music-file'),
startInput: document.getElementById('music-start'),
loadButton: document.getElementById('load-music'),
playerContainer: document.getElementById('music-player-container')
},
video: {
urlInput: document.getElementById('video-url'),
fileInput: document.getElementById('video-file'),
startInput: document.getElementById('video-start'),
loadButton: document.getElementById('load-video'),
playerContainer: document.getElementById('video-player-container')
},
controls: {
playButton: document.getElementById('play-button'),
pauseResumeButton: document.getElementById('pause-resume-button'),
playStartButton: document.getElementById('play-start-button')
},
messageContainer: document.getElementById('message-container'),
settings: {
button: document.getElementById('settings-button'),
modal: document.getElementById('settings-modal'),
closeButton: document.querySelector('.close-button'),
fullscreenToggle: document.getElementById('fullscreen-toggle')
}
};


// === State Management ===
const state = {
    music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
    video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
    isPaused: false,
    fullscreenOnPlay: false
};

// === Initialization ===
loadSettings();

// === Event Listeners ===
elements.music.loadButton.addEventListener('click', handleLoadMusic);
elements.video.loadButton.addEventListener('click', handleLoadVideo);
elements.controls.playButton.addEventListener('click', handlePlay);
elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

// Settings Modal Event Listeners
elements.settings.button.addEventListener('click', openSettingsModal);
elements.settings.closeButton.addEventListener('click', closeSettingsModal);
window.addEventListener('click', (event) => {
    if (event.target === elements.settings.modal) {
        closeSettingsModal();
    }
});
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
        closeSettingsModal();
    }
});
elements.settings.fullscreenToggle.addEventListener('change', (event) => {
    state.fullscreenOnPlay = event.target.checked;
    saveSettings();
});

// === Handler Functions ===

// Load Music Handler
function handleLoadMusic() {
    const url = elements.music.urlInput.value.trim();
    const file = elements.music.fileInput.files[0];
    const start = parseInt(elements.music.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.music.playerContainer);

    // Unload existing music if any
    if (state.music) {
        unloadMedia('music');
    }

    if (file) {
        if (file.size > 10 * 1024 * 1024) { // 10MB limit
            showMessage('Music file size exceeds 10MB limit.', 'error');
            hideLoading(elements.music.playerContainer);
            return;
        }

        // Handle local audio file
        const fileUrl = URL.createObjectURL(file);
        const audioElement = document.createElement('audio');
        audioElement.controls = true;
        audioElement.src = fileUrl;
        audioElement.id = 'loaded-music';
        elements.music.playerContainer.innerHTML = '';
        elements.music.playerContainer.appendChild(audioElement);

        state.music = {
            type: 'file',
            element: audioElement,
            start: start
        };
        showMessage('Local audio file loaded.', 'success');
        hideLoading(elements.music.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
            }
            showMessage(`Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
            hideLoading(elements.music.playerContainer);
        } else {
            showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.music.playerContainer);
        }
    } else {
        showMessage('Please enter a URL or select a file.', 'error');
        hideLoading(elements.music.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Load Video Handler
function handleLoadVideo() {
    const url = elements.video.urlInput.value.trim();
    const file = elements.video.fileInput.files[0];
    const start = parseInt(elements.video.startInput.value) || 0;

    // Show loading indicator
    showLoading(elements.video.playerContainer);

    // Unload existing video if any
    if (state.video) {
        unloadMedia('video');
    }

    if (file) {
        if (file.size > 50 * 1024 * 1024) { // 50MB limit
            showMessage('Video file size exceeds 50MB limit.', 'error');
            hideLoading(elements.video.playerContainer);
            return;
        }

        // Handle local video file
        const fileUrl = URL.createObjectURL(file);
        const videoElement = document.createElement('video');
        videoElement.controls = true;
        videoElement.src = fileUrl;
        videoElement.id = 'loaded-video';
        elements.video.playerContainer.innerHTML = '';
        elements.video.playerContainer.appendChild(videoElement);

        state.video = {
            type: 'file',
            element: videoElement,
            start: start
        };
        showMessage('Local video file loaded.', 'success');
        hideLoading(elements.video.playerContainer);
    } else if (url && isValidMediaURL(url)) {
        const mediaInfo = extractMediaInfo(url);
        if (mediaInfo) {
            if (mediaInfo.platform === 'youtube') {
                embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
            } else if (mediaInfo.platform === 'vimeo') {
                embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
            }
            showMessage(`Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
            hideLoading(elements.video.playerContainer);
        } else {
            showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
            hideLoading(elements.video.playerContainer);
        }
    } else {
        showMessage('Please enter a URL or select a file.', 'error');
        hideLoading(elements.video.playerContainer);
    }

    checkReadyToPlay();
    saveSettings();
}

// Play Handler
function handlePlay() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            // For iframe embeds, play by setting autoplay parameter
            const iframe = state.music.element;
            const src = new URL(iframe.src);
            src.searchParams.set('autoplay', '1');
            iframe.src = src.toString();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = new URL(iframe.src);
            src.searchParams.set('autoplay', '1');
            iframe.src = src.toString();
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage('Playback started!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// Pause/Resume Handler
function handlePauseResume() {
    if (state.isPaused) {
        resumeMedia();
    } else {
        pauseMedia();
    }
}

// Pause Media
function pauseMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.pause();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            // Pausing iframe embed without API by removing autoplay
            const iframe = state.music.element;
            const src = new URL(iframe.src);
            src.searchParams.set('autoplay', '0');
            iframe.src = src.toString();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.pause();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = new URL(iframe.src);
            src.searchParams.set('autoplay', '0');
            iframe.src = src.toString();
        }
    }

    state.isPaused = true;
    elements.controls.pauseResumeButton.textContent = 'Resume';
    showMessage('Playback paused.', 'info');
}

// Resume Media
function resumeMedia() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            const iframe = state.music.element;
            const src = new URL(iframe.src);
            src.searchParams.set('autoplay', '1');
            iframe.src = src.toString();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = new URL(iframe.src);
            src.searchParams.set('autoplay', '1');
            iframe.src = src.toString();
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage('Playback resumed.', 'success');
}

// Play From Start Handler
function handlePlayFromStart() {
    if (state.music) {
        if (state.music.type === 'file') {
            state.music.element.currentTime = state.music.start;
            state.music.element.play();
        } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
            const iframe = state.music.element;
            const src = new URL(iframe.src);
            src.searchParams.set('start', state.music.start.toString());
            src.searchParams.set('autoplay', '1');
            iframe.src = src.toString();
        }
    }

    if (state.video) {
        if (state.video.type === 'file') {
            state.video.element.currentTime = state.video.start;
            state.video.element.play();
        } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
            const iframe = state.video.element;
            const src = new URL(iframe.src);
            src.searchParams.set('start', state.video.start.toString());
            src.searchParams.set('autoplay', '1');
            iframe.src = src.toString();
        }
    }

    state.isPaused = false;
    elements.controls.pauseResumeButton.textContent = 'Pause';
    showMessage('Playback restarted!', 'success');

    if (state.fullscreenOnPlay) {
        enterFullscreen();
    }
}

// === Settings Modal Functions ===
function openSettingsModal() {
    elements.settings.modal.removeAttribute('hidden');
    elements.settings.modal.setAttribute('aria-hidden', 'false');
    elements.settings.modal.querySelector('.close-button').focus();
    trapFocus(elements.settings.modal);
}

function closeSettingsModal() {
    elements.settings.modal.setAttribute('hidden', '');
    elements.settings.modal.setAttribute('aria-hidden', 'true');
    elements.settings.button.focus();
    removeTrapFocus();
}

// Focus Trap Implementation
let focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
    textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
    [contenteditable]';
let focusableElements;
let firstTabStop;
let lastTabStop;

function trapFocus(element) {
    focusableElements = element.querySelectorAll(focusableElementsString);
    focusableElements = Array.prototype.slice.call(focusableElements);

    if (focusableElements.length === 0) return;

    firstTabStop = focusableElements[0];
    lastTabStop = focusableElements[focusableElements.length - 1];

    // Listen for and trap the keyboard
    element.addEventListener('keydown', trapTabKey);
}

function trapTabKey(e) {
    // Check for TAB key press
    if (e.key === 'Tab') {
        // SHIFT + TAB
        if (e.shiftKey) {
            if (document.activeElement === firstTabStop) {
                e.preventDefault();
                lastTabStop.focus();
            }
        } else { // TAB
            if (document.activeElement === lastTabStop) {
                e.preventDefault();
                firstTabStop.focus();
            }
        }
    }
}

function removeTrapFocus() {
    elements.settings.modal.removeEventListener('keydown', trapTabKey);
}

// === Utility Functions ===

// Extract Media Information from URL
function extractMediaInfo(url) {
    try {
        const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
        const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
        const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

        let match = url.match(youtubeRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(youtubeShortRegex);
        if (match && match[1]) {
            return { platform: 'youtube', id: match[1] };
        }

        match = url.match(vimeoRegex);
        if (match && match[1]) {
            return { platform: 'vimeo', id: match[1] };
        }

        return null;
    } catch (error) {
        console.error('Error extracting media info:', error);
        return null;
    }
}

// Capitalize First Letter
function capitalize(text) {
    if (!text) return '';
    return text.charAt(0).toUpperCase() + text.slice(1);
}

// Show Messages to User
function showMessage(message, type) {
    elements.messageContainer.innerHTML = '';
    const msgDiv = document.createElement('div');
    msgDiv.textContent = message;
    msgDiv.classList.add('message', type); // 'success', 'error', 'info'
    elements.messageContainer.appendChild(msgDiv);

    // Automatically hide message after 5 seconds
    setTimeout(() => {
        if (elements.messageContainer.contains(msgDiv)) {
            elements.messageContainer.removeChild(msgDiv);
        }
    }, 5000);
}

// Show Loading Indicator
function showLoading(container) {
    container.innerHTML = '';
    const loader = document.createElement('div');
    loader.classList.add('loader'); // Define loader styles in CSS
    container.appendChild(loader);
}

function hideLoading(container) {
    const loader = container.querySelector('.loader');
    if (loader) {
        container.removeChild(loader);
    }
}

// Check if Playback Buttons Should be Enabled
function checkReadyToPlay() {
    const ready = state.music || state.video;
    elements.controls.playButton.disabled = !ready;
    elements.controls.pauseResumeButton.disabled = !ready;
    elements.controls.playStartButton.disabled = !ready;
}

// Enter Fullscreen Mode
function enterFullscreen() {
    let targetElement = null;
    if (state.video && state.video.element) {
        // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
        targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
    } else if (state.music && state.music.element) {
        targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
    }

    if (targetElement && targetElement.requestFullscreen) {
        targetElement.requestFullscreen().then(() => {
            showMessage('Entered fullscreen mode.', 'success');
        }).catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            showMessage('Failed to enter fullscreen mode.', 'error');
        });
    } else {
        showMessage('Fullscreen not supported on this element.', 'error');
    }
}

// === Media Embedding Functions ===

// Embed YouTube Video without API
function embedYouTubeVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.width = '100%';
    iframe.height = '360';
    iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
    iframe.frameBorder = '0';
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'youtube',
        element: iframe,
        start: start
    };
}

// Embed Vimeo Video without API
function embedVimeoVideo(containerId, videoId, start, mediaType) {
    const iframe = document.createElement('iframe');
    iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
    iframe.width = '100%';
    iframe.height = '360';
    iframe.frameBorder = '0';
    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.id = `iframe-${mediaType}-${videoId}`;

    elements[mediaType].playerContainer.innerHTML = '';
    elements[mediaType].playerContainer.appendChild(iframe);

    state[mediaType] = {
        type: 'vimeo',
        element: iframe,
        start: start
    };
}

// === Settings Management ===

// Load Settings from Chrome Storage
function loadSettings() {
    chrome.storage.local.get(['mediaSettings'], (result) => {
        if (chrome.runtime.lastError) {
            console.error('Error loading settings:', chrome.runtime.lastError);
            showMessage('Failed to load settings.', 'error');
            return;
        }

        if (result.mediaSettings) {
            const { music, video, fullscreenOnPlay: fsPlay } = result.mediaSettings;

            if (music) {
                if (music.type === 'youtube' || music.type === 'vimeo') {
                    const url = music.type === 'youtube' 
                        ? `https://www.youtube.com/watch?v=${music.id}` 
                        : `https://vimeo.com/${music.id}`;
                    elements.music.urlInput.value = url;
                    elements.music.startInput.value = music.start || 0;
                    // Optionally, auto-load the media by triggering the load button
                    // handleLoadMusic();
                }
                // Handle file-based music loading if necessary
            }

            if (video) {
                if (video.type === 'youtube' || video.type === 'vimeo') {
                    const url = video.type === 'youtube' 
                        ? `https://www.youtube.com/watch?v=${video.id}` 
                        : `https://vimeo.com/${video.id}`;
                    elements.video.urlInput.value = url;
                    elements.video.startInput.value = video.start || 0;
                    // Optionally, auto-load the media by triggering the load button
                    // handleLoadVideo();
                }
                // Handle file-based video loading if necessary
            }

            if (typeof fsPlay === 'boolean') {
                state.fullscreenOnPlay = fsPlay;
                elements.settings.fullscreenToggle.checked = fsPlay;
            }
        }
    });
}

// Save Settings to Chrome Storage
function saveSettings() {
    const settings = {
        music: state.music,
        video: state.video,
        fullscreenOnPlay: state.fullscreenOnPlay
    };
    chrome.storage.local.set({ mediaSettings: settings }, () => {
        if (chrome.runtime.lastError) {
            console.error('Error saving settings:', chrome.runtime.lastError);
            showMessage('Error saving settings.', 'error');
            return;
        }
        console.log('Settings saved.');
    });
}

// === Unload Media Function ===
function unloadMedia(mediaType) {
    if (state[mediaType]) {
        if (state[mediaType].type === 'file') {
            state[mediaType].element.src = '';
        } else {
            // Reset iframe src to stop the media
            const iframe = state[mediaType].element;
            iframe.src = '';
        }
        state[mediaType] = null;
    }
}
});


Thank you for providing your current dashboard.js. The issues you're encountering—the settings modal opening by default and the JavaScript error Uncaught ReferenceError: loadSettings is not defined—stem from the fact that your dashboard.js is attempting to call a loadSettings function that hasn't been defined. This error halts the execution of the script, which likely prevents other functionalities (like properly handling the settings modal) from working as intended.

Let's systematically address these problems to ensure your Chrome extension functions correctly.

1. Define the loadSettings Function
Issue:
Error: Uncaught ReferenceError: loadSettings is not defined
Cause: The loadSettings function is called within your dashboard.js but hasn't been defined anywhere in the script.
Solution:
Define loadSettings: Ensure that the loadSettings function is properly defined before it's called. This function should retrieve any stored settings from Chrome's storage and apply them to your dashboard (e.g., setting the state of the "Full Screen on Play" toggle).
2. Provide a Complete dashboard.js
To resolve the issues, here's a comprehensive and corrected version of your dashboard.js. This script includes the loadSettings function, proper error handling, and ensures that the settings modal behaves as expected.

Corrected dashboard.js:

// dashboard.js

"use strict";

document.addEventListener('DOMContentLoaded', () => {
    // === Element References ===
    const elements = {
        music: {
            urlInput: document.getElementById('music-url'),
            fileInput: document.getElementById('music-file'),
            startInput: document.getElementById('music-start'),
            loadButton: document.getElementById('load-music'),
            playerContainer: document.getElementById('music-player-container')
        },
        video: {
            urlInput: document.getElementById('video-url'),
            fileInput: document.getElementById('video-file'),
            startInput: document.getElementById('video-start'),
            loadButton: document.getElementById('load-video'),
            playerContainer: document.getElementById('video-player-container')
        },
        controls: {
            playButton: document.getElementById('play-button'),
            pauseResumeButton: document.getElementById('pause-resume-button'),
            playStartButton: document.getElementById('play-start-button')
        },
        messageContainer: document.getElementById('message-container'),
        settings: {
            button: document.getElementById('settings-button'),
            modal: document.getElementById('settings-modal'),
            closeButton: document.querySelector('.close-button'),
            fullscreenToggle: document.getElementById('fullscreen-toggle')
        }
    };

    // === State Management ===
    const state = {
        music: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLAudioElement | iframe Element, start: Number }
        video: null, // { type: 'file' | 'youtube' | 'vimeo', element: HTMLVideoElement | iframe Element, start: Number }
        isPaused: false,
        fullscreenOnPlay: false
    };

    // === Initialization ===
    loadSettings();

    // === Event Listeners ===
    elements.music.loadButton.addEventListener('click', handleLoadMusic);
    elements.video.loadButton.addEventListener('click', handleLoadVideo);
    elements.controls.playButton.addEventListener('click', handlePlay);
    elements.controls.pauseResumeButton.addEventListener('click', handlePauseResume);
    elements.controls.playStartButton.addEventListener('click', handlePlayFromStart);

    // Settings Modal Event Listeners
    elements.settings.button.addEventListener('click', openSettingsModal);
    elements.settings.closeButton.addEventListener('click', closeSettingsModal);
    window.addEventListener('click', (event) => {
        if (event.target === elements.settings.modal) {
            closeSettingsModal();
        }
    });
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !elements.settings.modal.hasAttribute('hidden')) {
            closeSettingsModal();
        }
    });
    elements.settings.fullscreenToggle.addEventListener('change', (event) => {
        state.fullscreenOnPlay = event.target.checked;
        saveSettings();
    });

    // === Handler Functions ===

    // Load Music Handler
    function handleLoadMusic() {
        const url = elements.music.urlInput.value.trim();
        const file = elements.music.fileInput.files[0];
        const start = parseInt(elements.music.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.music.playerContainer);

        // Unload existing music if any
        if (state.music) {
            unloadMedia('music');
        }

        if (file) {
            if (file.size > 10 * 1024 * 1024) { // 10MB limit
                showMessage('Music file size exceeds 10MB limit.', 'error');
                hideLoading(elements.music.playerContainer);
                return;
            }

            // Handle local audio file
            const fileUrl = URL.createObjectURL(file);
            const audioElement = document.createElement('audio');
            audioElement.controls = true;
            audioElement.src = fileUrl;
            audioElement.id = 'loaded-music';
            elements.music.playerContainer.innerHTML = '';
            elements.music.playerContainer.appendChild(audioElement);

            state.music = {
                type: 'file',
                element: audioElement,
                start: start
            };
            showMessage('Local audio file loaded.', 'success');
            hideLoading(elements.music.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('music-player-container', mediaInfo.id, start, 'music');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('music-player-container', mediaInfo.id, start, 'music');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} music.`, 'success');
                hideLoading(elements.music.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.music.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.music.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Load Video Handler
    function handleLoadVideo() {
        const url = elements.video.urlInput.value.trim();
        const file = elements.video.fileInput.files[0];
        const start = parseInt(elements.video.startInput.value) || 0;

        // Show loading indicator
        showLoading(elements.video.playerContainer);

        // Unload existing video if any
        if (state.video) {
            unloadMedia('video');
        }

        if (file) {
            if (file.size > 50 * 1024 * 1024) { // 50MB limit
                showMessage('Video file size exceeds 50MB limit.', 'error');
                hideLoading(elements.video.playerContainer);
                return;
            }

            // Handle local video file
            const fileUrl = URL.createObjectURL(file);
            const videoElement = document.createElement('video');
            videoElement.controls = true;
            videoElement.src = fileUrl;
            videoElement.id = 'loaded-video';
            elements.video.playerContainer.innerHTML = '';
            elements.video.playerContainer.appendChild(videoElement);

            state.video = {
                type: 'file',
                element: videoElement,
                start: start
            };
            showMessage('Local video file loaded.', 'success');
            hideLoading(elements.video.playerContainer);
        } else if (url && isValidMediaURL(url)) {
            const mediaInfo = extractMediaInfo(url);
            if (mediaInfo) {
                if (mediaInfo.platform === 'youtube') {
                    embedYouTubeVideo('video-player-container', mediaInfo.id, start, 'video');
                } else if (mediaInfo.platform === 'vimeo') {
                    embedVimeoVideo('video-player-container', mediaInfo.id, start, 'video');
                }
                showMessage(`Loaded ${capitalize(mediaInfo.platform)} video.`, 'success');
                hideLoading(elements.video.playerContainer);
            } else {
                showMessage('Invalid URL. Please enter a valid YouTube or Vimeo URL.', 'error');
                hideLoading(elements.video.playerContainer);
            }
        } else {
            showMessage('Please enter a URL or select a file.', 'error');
            hideLoading(elements.video.playerContainer);
        }

        checkReadyToPlay();
        saveSettings();
    }

    // Play Handler
    function handlePlay() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // For iframe embeds, play by setting autoplay parameter
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback started!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // Pause/Resume Handler
    function handlePauseResume() {
        if (state.isPaused) {
            resumeMedia();
        } else {
            pauseMedia();
        }
    }

    // Pause Media
    function pauseMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.pause();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                // Pausing iframe embed without API by removing autoplay
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.pause();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '0');
                iframe.src = src.toString();
            }
        }

        state.isPaused = true;
        elements.controls.pauseResumeButton.textContent = 'Resume';
        showMessage('Playback paused.', 'info');
    }

    // Resume Media
    function resumeMedia() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback resumed.', 'success');
    }

    // Play From Start Handler
    function handlePlayFromStart() {
        if (state.music) {
            if (state.music.type === 'file') {
                state.music.element.currentTime = state.music.start;
                state.music.element.play();
            } else if (state.music.type === 'youtube' || state.music.type === 'vimeo') {
                const iframe = state.music.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.music.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        if (state.video) {
            if (state.video.type === 'file') {
                state.video.element.currentTime = state.video.start;
                state.video.element.play();
            } else if (state.video.type === 'youtube' || state.video.type === 'vimeo') {
                const iframe = state.video.element;
                const src = new URL(iframe.src);
                src.searchParams.set('start', state.video.start.toString());
                src.searchParams.set('autoplay', '1');
                iframe.src = src.toString();
            }
        }

        state.isPaused = false;
        elements.controls.pauseResumeButton.textContent = 'Pause';
        showMessage('Playback restarted!', 'success');

        if (state.fullscreenOnPlay) {
            enterFullscreen();
        }
    }

    // === Settings Modal Functions ===
    function openSettingsModal() {
        elements.settings.modal.removeAttribute('hidden');
        elements.settings.modal.setAttribute('aria-hidden', 'false');
        elements.settings.modal.querySelector('.close-button').focus();
        trapFocus(elements.settings.modal);
    }

    function closeSettingsModal() {
        elements.settings.modal.setAttribute('hidden', '');
        elements.settings.modal.setAttribute('aria-hidden', 'true');
        elements.settings.button.focus();
        removeTrapFocus();
    }

    // Focus Trap Implementation
    const focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]),\
        textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"],\
        [contenteditable]';
    let focusableElements;
    let firstTabStop;
    let lastTabStop;

    function trapFocus(element) {
        focusableElements = element.querySelectorAll(focusableElementsString);
        focusableElements = Array.prototype.slice.call(focusableElements);

        if (focusableElements.length === 0) return;

        firstTabStop = focusableElements[0];
        lastTabStop = focusableElements[focusableElements.length - 1];

        // Listen for and trap the keyboard
        element.addEventListener('keydown', trapTabKey);
    }

    function trapTabKey(e) {
        // Check for TAB key press
        if (e.key === 'Tab') {
            // SHIFT + TAB
            if (e.shiftKey) {
                if (document.activeElement === firstTabStop) {
                    e.preventDefault();
                    lastTabStop.focus();
                }
            } else { // TAB
                if (document.activeElement === lastTabStop) {
                    e.preventDefault();
                    firstTabStop.focus();
                }
            }
        }
    }

    function removeTrapFocus() {
        elements.settings.modal.removeEventListener('keydown', trapTabKey);
    }

    // === Utility Functions ===

    // Extract Media Information from URL
    function extractMediaInfo(url) {
        try {
            const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^\&\?\/]+)/;
            const youtubeShortRegex = /(?:https?:\/\/)?youtu\.be\/([^\&\?\/]+)/;
            const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

            let match = url.match(youtubeRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(youtubeShortRegex);
            if (match && match[1]) {
                return { platform: 'youtube', id: match[1] };
            }

            match = url.match(vimeoRegex);
            if (match && match[1]) {
                return { platform: 'vimeo', id: match[1] };
            }

            return null;
        } catch (error) {
            console.error('Error extracting media info:', error);
            return null;
        }
    }

    // Capitalize First Letter
    function capitalize(text) {
        if (!text) return '';
        return text.charAt(0).toUpperCase() + text.slice(1);
    }

    // Show Messages to User
    function showMessage(message, type) {
        elements.messageContainer.innerHTML = '';
        const msgDiv = document.createElement('div');
        msgDiv.textContent = message;
        msgDiv.classList.add('message', type); // 'success', 'error', 'info'
        elements.messageContainer.appendChild(msgDiv);

        // Automatically hide message after 5 seconds
        setTimeout(() => {
            if (elements.messageContainer.contains(msgDiv)) {
                elements.messageContainer.removeChild(msgDiv);
            }
        }, 5000);
    }

    // Show Loading Indicator
    function showLoading(container) {
        container.innerHTML = '';
        const loader = document.createElement('div');
        loader.classList.add('loader'); // Define loader styles in CSS
        container.appendChild(loader);
    }

    function hideLoading(container) {
        const loader = container.querySelector('.loader');
        if (loader) {
            container.removeChild(loader);
        }
    }

    // Check if Playback Buttons Should be Enabled
    function checkReadyToPlay() {
        const ready = state.music || state.video;
        elements.controls.playButton.disabled = !ready;
        elements.controls.pauseResumeButton.disabled = !ready;
        elements.controls.playStartButton.disabled = !ready;
    }

    // Enter Fullscreen Mode
    function enterFullscreen() {
        let targetElement = null;
        if (state.video && state.video.element) {
            // If it's an iframe (YouTube/Vimeo), request fullscreen on the container
            targetElement = (state.video.type === 'file') ? state.video.element : document.getElementById('video-player-container');
        } else if (state.music && state.music.element) {
            targetElement = (state.music.type === 'file') ? state.music.element : document.getElementById('music-player-container');
        }

        if (targetElement && targetElement.requestFullscreen) {
            targetElement.requestFullscreen().then(() => {
                showMessage('Entered fullscreen mode.', 'success');
            }).catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
                showMessage('Failed to enter fullscreen mode.', 'error');
            });
        } else {
            showMessage('Fullscreen not supported on this element.', 'error');
        }
    }

    // === Media Embedding Functions ===

    // Embed YouTube Video without API
    function embedYouTubeVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.width = '100%';
        iframe.height = '360';
        iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=0&controls=1&rel=0`;
        iframe.frameBorder = '0';
        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'youtube',
            element: iframe,
            start: start
        };
    }

    // Embed Vimeo Video without API
    function embedVimeoVideo(containerId, videoId, start, mediaType) {
        const iframe = document.createElement('iframe');
        iframe.src = `https://player.vimeo.com/video/${videoId}#t=${start}s`;
        iframe.width = '100%';
        iframe.height = '360';
        iframe.frameBorder = '0';
        iframe.allow = 'autoplay; fullscreen; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.id = `iframe-${mediaType}-${videoId}`;

        elements[mediaType].playerContainer.innerHTML = '';
        elements[mediaType].playerContainer.appendChild(iframe);

        state[mediaType] = {
            type: 'vimeo',
            element: iframe,
            start: start
        };
    }

    // === Settings Management ===

    // Load Settings from Chrome Storage
    function loadSettings() {
        try {
            chrome.storage.local.get(['mediaSettings'], (result) => {
                if (chrome.runtime.lastError) {
                    throw new Error(chrome.runtime.lastError);
                }

                if (result.mediaSettings) {
                    const { music, video, fullscreenOnPlay: fsPlay } = result.mediaSettings;

                    if (music) {
                        if (music.type === 'youtube' || music.type === 'vimeo') {
                            const url = music.type === 'youtube' 
                                ? `https://www.youtube.com/watch?v=${music.id}` 
                                : `https://vimeo.com/${music.id}`;
                            elements.music.urlInput.value = url;
                            elements.music.startInput.value = music.start || 0;
                            // Optionally, auto-load the media by triggering the load button
                            // handleLoadMusic();
                        }
                        // Handle file-based music loading if necessary
                    }

                    if (video) {
                        if (video.type === 'youtube' || video.type === 'vimeo') {
                            const url = video.type === 'youtube' 
                                ? `https://www.youtube.com/watch?v=${video.id}` 
                                : `https://vimeo.com/${video.id}`;
                            elements.video.urlInput.value = url;
                            elements.video.startInput.value = video.start || 0;
                            // Optionally, auto-load the media by triggering the load button
                            // handleLoadVideo();
                        }
                        // Handle file-based video loading if necessary
                    }

                    if (typeof fsPlay === 'boolean') {
                        state.fullscreenOnPlay = fsPlay;
                        elements.settings.fullscreenToggle.checked = fsPlay;
                    }
                }
            });
        } catch (error) {
            console.error('Error loading settings:', error);
            showMessage('Failed to load settings.', 'error');
        }
    }

    // Save Settings to Chrome Storage
    function saveSettings() {
        const settings = {
            music: state.music,
            video: state.video,
            fullscreenOnPlay: state.fullscreenOnPlay
        };
        try {
            chrome.storage.local.set({ mediaSettings: settings }, () => {
                if (chrome.runtime.lastError) {
                    throw new Error(chrome.runtime.lastError);
                }
                console.log('Settings saved.');
            });
        } catch (error) {
            console.error('Error saving settings:', error);
            showMessage('Error saving settings.', 'error');
        }
    }

    // === Unload Media Function ===
    function unloadMedia(mediaType) {
        if (state[mediaType]) {
            if (state[mediaType].type === 'file') {
                state[mediaType].element.src = '';
            } else {
                // Reset iframe src to stop the media
                const iframe = state[mediaType].element;
                iframe.src = '';
            }
            state[mediaType] = null;
        }
    }

});
Key Additions and Enhancements:
Strict Mode:
Added "use strict"; at the top to enforce stricter parsing and error handling in JavaScript.
loadSettings Function:
Purpose: Retrieves stored settings from Chrome's storage and applies them to the dashboard, such as setting the state of the "Full Screen on Play" toggle.
Implementation: Uses chrome.storage.local.get to fetch settings and updates the respective UI elements.
Error Handling:
Wrapped loadSettings and saveSettings operations in try-catch blocks to handle any potential errors gracefully.
Logs errors to the console and displays error messages to the user via showMessage.
Modal Visibility Control:
Ensures the settings modal remains hidden by default using the hidden attribute in HTML and corresponding CSS.
Properly handles opening and closing the modal via buttons, clicking outside the modal, or pressing the Escape key.
Implements focus trapping within the modal for better accessibility.
Utility Functions:
isValidMediaURL(url): (Assumed to be implemented as it was referenced in handleLoadMusic and handleLoadVideo but missing in the provided script.)
extractMediaInfo(url): Parses the provided URL to determine if it's a YouTube or Vimeo link and extracts the video ID.
capitalize(text): Capitalizes the first letter of a given string (used for display messages).
Media Embedding Functions:
embedYouTubeVideo(containerId, videoId, start, mediaType): Embeds a YouTube video in the specified container.
embedVimeoVideo(containerId, videoId, start, mediaType): Embeds a Vimeo video in the specified container.
3. Implement Missing Utility Functions
Your current dashboard.js references some utility functions that haven't been defined yet. Let's define them to ensure smooth execution.

A. isValidMediaURL(url) Function
Purpose: Validates whether the provided URL is a valid YouTube or Vimeo URL.

Implementation:


// Checks if the URL is a valid YouTube or Vimeo URL
function isValidMediaURL(url) {
    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
    const vimeoRegex = /^(https?:\/\/)?(www\.)?vimeo\.com\/.+$/;
    return youtubeRegex.test(url) || vimeoRegex.test(url);
}
B. Adding the Function to dashboard.js
Place this function above the handleLoadMusic and handleLoadVideo functions or within the utility section.


// Checks if the URL is a valid YouTube or Vimeo URL
function isValidMediaURL(url) {
    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
    const vimeoRegex = /^(https?:\/\/)?(www\.)?vimeo\.com\/.+$/;
    return youtubeRegex.test(url) || vimeoRegex.test(url);
}
4. Ensure styles.css Correctly Handles the Modal
For the modal to remain hidden by default and display correctly when opened, your CSS should have the following rules.

Sample styles.css:

/* styles.css */

/* General Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    position: relative; /* To position settings button absolutely within the container */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.section {
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.controls button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #4285f4;
    color: #fff;
    transition: background-color 0.3s ease;
}

.controls button:disabled {
    background-color: #a0c3ff;
    cursor: not-allowed;
}

.controls button:hover:not(:disabled) {
    background-color: #357ae8;
}

/* Settings Button positioned at Top Left */
.settings-container {
    position: absolute;
    top: 20px;
    left: 20px;
}

.settings-button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.settings-button:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.settings-icon {
    width: 20px;
    height: 20px;
}

/* Modal Styles */
.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; /* Hidden by default via [hidden] */
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.modal-content h2 {
    margin-top: 0;
}

/* Form Elements */
fieldset {
    border: none;
    padding: 0;
}

fieldset label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

fieldset input[type="text"],
fieldset input[type="number"],
fieldset input[type="file"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

fieldset .load-button {
    width: 100%;
    padding: 10px;
    background-color: #34a853;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

fieldset .load-button:hover {
    background-color: #2c8e46;
}

/* Player Containers */
.player-container {
    margin-top: 10px;
}

/* Messages */
.message-container {
    margin-top: 20px;
    width: 100%;
}

.message {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #fff;
}

.message.success {
    background-color: #4caf50;
}

.message.error {
    background-color: #f44336;
}

.message.info {
    background-color: #2196f3;
}

/* Loader */
.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #4285f4; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    .modal-content {
        padding: 15px 20px;
    }

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

    .controls button {
        width: 100%;
    }

    .settings-container {
        top: 10px;
        left: 10px;
    }

    .settings-button {
        width: 35px;
        height: 35px;
    }

    .settings-icon {
        width: 18px;
        height: 18px;
    }
}
Key Points:
Hidden Modal by Default:
The .modal[hidden] selector ensures that the modal is not displayed when the hidden attribute is present.
The .modal class styles the modal's appearance when it's visible.
Settings Button Positioning:
The .settings-container class positions the settings button absolutely within the container.
Adjustments are made for smaller screens via media queries.
Loader Styling:
The .loader class creates a spinning loader to indicate loading states.
Message Styling:
Different message types (success, error, info) are styled with corresponding background colors.
5. Step-by-Step Checklist for Implementation
Follow these steps to ensure all components are correctly set up and functioning:

A. Verify File Structure and Placement
Ensure your project directory (media-loader/) is organized as follows:


media-loader/
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   ├── icon128.png
│   └── settings.svg
├── background.js
├── dashboard.html
├── dashboard.js
├── styles.css
└── manifest.json
B. Update dashboard.js with Complete Definitions
Replace your current dashboard.js content with the corrected version provided above. Ensure that:

All functions (loadSettings, saveSettings, handleLoadMusic, handleLoadVideo, etc.) are defined.
Utility functions like isValidMediaURL are implemented.
No functions are called before they're defined.
C. Ensure Correct Linking in dashboard.html
Verify that the <script> tag in your dashboard.html correctly links to dashboard.js and is placed just before the closing </body> tag:


...
</main>

<script src="dashboard.js"></script>
</body>
</html>
D. Confirm CSS is Properly Handling the Modal
Ensure that your styles.css includes the rules for hiding the modal by default and styling it appropriately when visible, as provided above.

E. Check for JavaScript Errors
Load the Extension:
Navigate to chrome://extensions/.
Enable "Developer mode" using the toggle in the top right corner.
Click "Load unpacked" and select your media-loader/ directory if not already loaded.
If already loaded, click the "Reload" (⟳) icon on your "Media Loader" extension.
Open the Dashboard:
Click the extension icon to open the dashboard in a new tab.
Verify: The settings modal should not be visible by default.
Check Developer Console:
Press F12 or right-click on the dashboard page and select "Inspect" to open Developer Tools.
Navigate to the "Console" tab.
Ensure there are no errors, especially ReferenceError: loadSettings is not defined.
Interact with the Settings Modal:
Click the settings button (small square at the top left).
Verify: The settings modal appears.
Close the modal by:
Clicking the close button (&times;).
Clicking outside the modal content.
Pressing the Escape key.
Verify: The modal closes without issues.
Load Media:
Enter a valid YouTube or Vimeo URL or upload a local media file in the respective sections.
Click "Load Music" or "Load Video."
Verify: The media player appears in the designated container without errors.
Use Playback Controls:
Once media is loaded, the "Play," "Pause/Resume," and "Play from Start" buttons should be enabled.
Test each button to ensure they work as expected.
Toggle Fullscreen on Play:
Open the settings modal.
Toggle the "Full Screen on Play" option.
Click "Play" to test if it enters fullscreen mode based on your setting.
F. Clear Cache and Retest if Necessary
Sometimes, Chrome may cache older versions of your extension's files. To ensure you're loading the latest version:

Disable and Re-enable Developer Mode:
Navigate to chrome://extensions/.
Toggle "Developer mode" off and then back on.
Reload the Extension:
Click the "Reload" (⟳) icon on your "Media Loader" extension to apply the latest changes.
Force Reload the Dashboard Tab:
Press Ctrl + F5 or Cmd + Shift + R (on Mac) while on the dashboard tab to force a complete reload.
6. Additional Recommendations
A. Use a JavaScript Linter
Implementing a linter like ESLint can help catch syntax errors and enforce coding standards, making your code more robust and maintainable.

B. Optimize Media Handling
YouTube & Vimeo Controls:
Without using their respective APIs, control over embedded media is limited. Consider integrating their APIs for enhanced functionalities like precise playback controls.
Resource Cleanup:
When unloading media, revoke object URLs created with URL.createObjectURL to free up memory.

function unloadMedia(mediaType) {
    if (state[mediaType]) {
        if (state[mediaType].type === 'file') {
            URL.revokeObjectURL(state[mediaType].element.src);
            state[mediaType].element.src = '';
        } else {
            // Reset iframe src to stop the media
            const iframe = state[mediaType].element;
            iframe.src = '';
        }
        state[mediaType] = null;
    }
}
C. Enhance Accessibility
Ensure all interactive elements are accessible via keyboard and screen readers by:

Using semantic HTML elements.
Properly labeling buttons and inputs with aria-label or <label> tags.
Ensuring sufficient color contrast in your design.
D. Handle Edge Cases
Unsupported Media Formats:
Inform users if they upload unsupported media formats.
Network Issues:
Handle cases where media fails to load due to network errors by displaying appropriate error messages.
E. Version Control
Utilize a version control system like Git to track changes, manage versions, and collaborate effectively if you're working with a team.

7. Converting to a Safari Extension (Optional)
If you decide to convert your "Media Loader" Chrome extension to a Safari extension, here's a streamlined guide:

A. Prerequisites
macOS: Safari extension development requires a Mac.
Xcode: Ensure you have the latest version installed from the Mac App Store.
Apple Developer Account: Required for publishing extensions on the Safari Extensions Gallery.
B. Use safari-web-extension-converter Tool
Apple provides a command-line tool to convert Chrome extensions to Safari:

Open Terminal.
Navigate to Your Extension Directory:

cd ~/Desktop/media-loader
Run the Converter:

xcrun safari-web-extension-converter --manifest ~/Desktop/media-loader/manifest.json
Follow the On-Screen Prompts:
App Name: Provide a name for your extension.
Bundle Identifier: Typically in the format com.yourdomain.medialoader.
App Location: Choose where to save the converted project.
C. Review and Modify the Converted Project
Open the Project in Xcode:

open Media\ Loader.xcodeproj
Adjust manifest.json if Necessary:
Ensure all permissions and resources are correctly defined.
Safari might require specific adjustments or different permission naming.
Handle API Differences:
Safari may have slight differences in API support. Refer to Safari Web Extensions for specifics.
Configure Extension Settings in Xcode:
Set up necessary capabilities and entitlements.
Define app icon and other metadata.
D. Test the Extension in Safari
Build and Run:
In Xcode, select your target (e.g., "Media Loader").
Click the "Run" button to install the extension into Safari for testing.
Enable the Extension:
Open Safari.
Navigate to Safari > Preferences > Extensions.
Ensure your extension is listed and enabled.
Test Functionality:
Click the extension icon in Safari.
Verify that the dashboard opens correctly.
Test all media loading and playback functionalities.
Ensure the settings modal behaves as expected.
E. Publish the Extension (Optional)
Sign Up for an Apple Developer Account:
If you haven't already, enroll at Apple Developer.
Follow Apple’s Extension Submission Guidelines:
Refer to Submitting a Safari Web Extension.
Submit for Review:
Follow Apple's procedures to submit your extension for approval.
Note: Ensure thorough testing in Safari as some functionalities may behave differently compared to Chrome.

8. Conclusion
By implementing the corrected dashboard.js with the defined loadSettings function and ensuring your styles.css properly handles the settings modal's visibility, you should resolve the issues of the modal opening by default and the JavaScript error.

Remember to:

Define All Necessary Functions: Ensure that any function you call within your scripts is properly defined.
Handle Errors Gracefully: Implement error handling to provide feedback and prevent script termination due to unexpected issues.
Test Extensively: After making changes, thoroughly test all functionalities to ensure everything works as expected.
If you continue to encounter issues after applying these changes, please provide your updated dashboard.js and styles.css files, and any additional error messages from the console. This will allow me to offer more targeted assistance.

Feel free to reach out with your progress or any further questions!

/* styles.css */

/* General Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    position: relative; /* To position settings button absolutely within the container */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.section {
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.controls button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #4285f4;
    color: #fff;
    transition: background-color 0.3s ease;
}

.controls button:disabled {
    background-color: #a0c3ff;
    cursor: not-allowed;
}

.controls button:hover:not(:disabled) {
    background-color: #357ae8;
}

/* Settings Button positioned at Top Left */
.settings-container {
    position: absolute;
    top: 20px;
    left: 20px;
}

.settings-button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.settings-button:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.settings-icon {
    width: 20px;
    height: 20px;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.modal-content h2 {
    margin-top: 0;
}

/* Form Elements */
fieldset {
    border: none;
    padding: 0;
}

fieldset label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

fieldset input[type="text"],
fieldset input[type="number"],
fieldset input[type="file"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

fieldset .load-button {
    width: 100%;
    padding: 10px;
    background-color: #34a853;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

fieldset .load-button:hover {
    background-color: #2c8e46;
}

/* Player Containers */
.player-container {
    margin-top: 10px;
}

/* Messages */
.message-container {
    margin-top: 20px;
    width: 100%;
}

.message {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #fff;
}

.message.success {
    background-color: #4caf50;
}

.message.error {
    background-color: #f44336;
}

.message.info {
    background-color: #2196f3;
}

/* Loader */
.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #4285f4; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    .modal-content {
        padding: 15px 20px;
    }

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

    .controls button {
        width: 100%;
    }

    .settings-container {
        top: 10px;
        left: 10px;
    }

    .settings-button {
        width: 35px;
        height: 35px;
    }

    .settings-icon {
        width: 18px;
        height: 18px;
    }
}

so with all these files can you find why the settings screen is still active when i run the extension?