"Issues with Using more than one html page within Chrome Extension (Manifest V3)"

Question

I'm working on making a Chrome extension using Manifest V3. In this project, I have two web pages. The first one is called "popup.html," and it contains a button for logging in. When I click on this button, it initiates the Spotify account login process through "launchAuthWebFlow." After the user allows my extension to access their data, I want the second web page, "player.html," which has buttons for controlling music tracks, to appear in the popup window.

In "popup.html," I've included links to a JavaScript file called "popup.js" in the head section. This "popup.js" manages the authentication process and loads "player.html" once the login is successful. This is my loadPlayer function. which runs when user grants permission after succesful login.

const playerPageURL = chrome.runtime.getURL("player.html");
        // Dynamically set the popup's content to player.html
        fetch(playerPageURL)
            .then((response) => response.text())
            .then((html) => {
                document.body.innerHTML = html;
            });

Everything seems to work fine regarding the script and the style files linked in "popup.html." However, when "player.html" loads, the style files load correctly, but the JavaScript files don't.

Strangely, when I change the default popup to be "player.html" in the manifest.json , the JavaScript in "player.html" works perfectly.

this is my dir structure.

Extension
 ├ scripts
 │ ├ background.js (empty right now)
 │ ├ content.js (empty right now)
 │ ├ popup.js (handles login and loading player.html or poup.html)
 │ ├ player_script1.js (linked in player.html)
 │ ├ player_script2.js (linked in player.html)
 │ └ player_script3.js (linked in player.html)
 ├ stylesheets
 │ ├ player_styles1.css (linked in player.html)
 │ ├ player_styles2.css (linked in player.html)
 │ ├ player_styles3.css (linked in player.html)
 │ └ login_page_styles.css (linked in popup.html)
 ├ manifest.json
 ├ player.html
 └ popup.html 

this is manifest.json

{
    "manifest_version": 3,
    "name": "name",
    "version": "1.0",
    "description": "Description",
    "permissions": [
        "activeTab",
        "storage",
        "identity",
        "webRequest"
    ],
    "icons": {
        "16": "/images/icon_16.png",
        "48": "/images/icon_48.png",
        "128": "/images/icon_128.png"
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/images/icon_16_2.png",
            "48": "/images/icon_48_2.png",
            "128": "/images/icon_128_2.png"
        }
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "scripts/content.js"
            ]
        }
    ],
    "background": {
        "service_worker": "scripts/background.js"
    },
    "oauth2": {
        "client_id": "my_client_id",
        "scopes": [
            "my_scopes"
        ],
        "redirect_uri": "https://my_uri/"
    },
    "host_permissions": [
        "https://accounts.spotify.com/api/token/*"
    ]
}

I'm consfused about why the JavaScript files in "player.html" are not functioning as expected after they're injected in the manner I've described. I'm unsure whether it's necessary to include these scripts in my manifest.json, or if there might be a more effective way to conditionally load another HTML page.

My primary goal is to display "player.html" in the popup window following the login process, and I want it to persist until the access token expires, even if the popup window or the browser is closed. To accomplish this, I am saving the access token in chrome.storage.local.

1. Are there specific reasons why the JavaScript files in "player.html" aren't running as expected when injected?
2. Is it necessary to include these JavaScript files in the manifest.json, or is there an alternative approach to load "player.html" conditionally that might work better?
3. What are the most effective methods for achieving the desired behavior of displaying "player.html" in the popup window and ensuring it persists until the access token expires, even after the popup or the browser is closed?

If additional context is required to address these concerns, please let me know, as I'm open to providing more information.