Uncaught (in promise) Error for a couple of cycles then stopping

Question

I am getting the error when running my code in about:debugging in FireFox to see if the extension works properly. After a few times of getting this error, it works as intended. Here is the error: Uncaught(in Promise) Error: Could not establish connection. Receiving end does not exist.

This is my background.js:

const securityInfo = await browser.webRequest.getSecurityInfo(
            details.requestId,
            { certificateChain: true }
        );
        if (securityInfo.state === "insecure" || securityInfo.state === "broken") {
            browser.runtime.sendMessage("no");
        }
        else if (!securityInfo.isUntrusted
            && securityInfo.certificates.length > 0) { //if Root Info exists
            const root = securityInfo.certificates[securityInfo.certificates.length - 1].issuer; //"subject" property from CertificateInfo Object
            let rootCA = root.substring(3, root.indexOf(",")); //substring to only include the root CA name (comma seperated list)
            browser.runtime.sendMessage({ rootCA }); //send to popup.js
        }

This is my popup.js for my extension:

document.addEventListener("DOMContentLoaded", () => {
    ... 

    var faviconImage = document.getElementById('faviconImage'); //Favicon (Logo)
    var websiteUrlElement = document.getElementById('websiteUrl'); //URL

    // get the information on the extension
    browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        const url = tabs[0].url;
        const favicon = tabs[0].favIconUrl;
        websiteUrlElement.textContent = url;
        faviconImage.src = favicon;

        // Receive message from background.js for CA Info and update html
        browser.runtime.onMessage.addListener((request) => {
            if (request.rootCA) { // Check if root CA exists in the request
                caInfo = request.rootCA;
                document.getElementById("rootCAInfo").textContent = caInfo;
                checkCA(url, caInfo);
            }
            if (request.secure) {
                if (request.secure === "no") {
                    siteStatusDivs.notMarked.style.display = "none";
                    siteStatusDivs.unsecure.style.display = "block";
                }
            }
        });
});

I get this error multiple times and when I don't the root certificate ends up showing. any thoughts on why this is happening and how I can fix it?