non-module files used for script injection doesn't live reload/update in dev mode

[shamimurrahman19]

script1.tsx is injected in the webpage.
It's called with chrome.runtime.getURL("path to script1.tsx"), and not imported as module.
so, It's not live reloading when I change and save code in script1.tsx
even after extension reload from extension manager, script1.tsx still keeps using old code and doesn't update.
if I turn script1.tsx into a module and import it in content.tsx then script1.tsx live reloads but then the injected script doesn't work.
Adding script1.tsx path in tsconfig.json's compilerOptions causes the same problem.

// injection code from content.tsx

        const injectScript = () => {
            console.log("[ContentScript] Injecting script...");
            const script = document.createElement("script");
            script.src = chrome.runtime.getURL("src/components/voice_message_transcriber/content/scriptsToInject/script1.tsx");
            script.onerror = () => {
                console.error("[ContentScript] Failed to load injected script");
            };
            document.head.appendChild(script);
        };

// script1.tsx full code

(function () {
    console.log("[InjectedScript] Injected script is running.");
    const node = document.querySelector('[marked-element-for-voice-message-transcriber="true"]');
    console.log("[InjectedScript] Found marked-element-for-voice-message-transcriber=true", node);
        node.removeAttribute("marked-element-for-voice-message-transcriber");
    } else {
        console.log("[InjectedScript] No element with marked-element-for-voice-message-transcriber=true found");
    }
})();