I’m writing a very simple Chrome Extension that aims to check whether an endpoint could
be embedded as an Iframe –
If it is – write “Success” in green in dev console, if not write it in red.

More context –
My goal is here to check whether an iframe could be embedded in my local extension without violating the CSP.

So once the user click on “Check Endpoint” the checking process will go in the background.

Currently i’m using ChatGPT, and my code did append a new iframe with the designated endpoint to the page, but than either it –
Blocked by inline script policy or providing False Positive whether it got embedded or not.

This is the current code the ChatGPT provide me with –

function checkEndpointCommunication(endpoint, button) {
    console.log(`Checking communication for endpoint: ${endpoint}`);

    let communicationEstablished = false;

    // Create an iframe and embed it
    const iframe = document.createElement("iframe");
    iframe.src = endpoint;
    iframe.style.display = "none"; // Hide the iframe from view
    document.body.appendChild(iframe);

    // Timeout to handle embedding failures
    const timeout = setTimeout(() => {
        if (!communicationEstablished) {
            console.warn(`[TIMEOUT] Iframe communication timeout for: ${endpoint}`);
            button.classList.remove("default", "green");
            button.classList.add("red"); // Mark as failure
            cleanup();
        }
    }, 5000); // 5-second timeout

    // Cleanup function
    const cleanup = () => {
        if (iframe.parentNode) iframe.remove();
        clearTimeout(timeout);
    };

    // Iframe onload handler
    iframe.onload = () => {
        clearTimeout(timeout); // Cancel timeout if iframe loads
        try {
            // Try to access the iframe content
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            const iframeBody = iframeDocument.body;

            if (iframeBody) {
                console.log(`[INFO] Iframe content loaded successfully for: ${endpoint}`);
                communicationEstablished = true;
                button.classList.remove("default", "red");
                button.classList.add("green"); // Mark as success
            } else {
                console.warn(`[FAILURE] Iframe content is inaccessible for: ${endpoint}`);
                button.classList.remove("default", "green");
                button.classList.add("red"); // Mark as failure
            }
        } catch (err) {
            console.warn(`[ERROR] Iframe access failed for: ${endpoint}, Error: ${err.message}`);
            button.classList.remove("default", "green");
            button.classList.add("red"); // Mark as failure
        } finally {
            cleanup();
        }
    };

    // Iframe onerror handler
    iframe.onerror = () => {
        console.warn(`[FAILURE] Iframe failed to load for: ${endpoint}`);
        button.classList.remove("default", "green");
        button.classList.add("red"); // Mark as failure
        cleanup();
    };
}