I am creating a chrome extension that scans a googlemail email that is on an open tab. It then looks for elements that would indicate that the email is suspicious. Currently there are four buttons – 1 copies the e-mail to the HTML. The next compares the Sender Title with the Domain name to see if they’re a match.

The issue that I am having is that I want each button to send a message that allows a function to change the content of the HTML code of the popup. The error occurs where I try to define elements of the HTML in the content.js, but the content.js is loading before the HTML. To solve this, I tried to use OnClick and OnMessage to make sure the application waits for an input, but I can’t seem to get the code to recognise the content of the SendMessage. I have attached all code – I apologise for the extension commenting, I have tried multiple things and commented out old code to change it

Content.js

contentbutton.addEventListener("click", async () => {
    //Get current active tab
    let [tab] = await chrome.tabs.query(
        {active: true, currentWindow: true});
    // Execute script
    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        func: readEmail,
    });
})


// Listen for the content of the email to be passed to OnMessage - run once passed. Creates new paragraph in html
chrome.runtime.onMessage.addListener((request, sender, sendMessage) => {
    // let paragraph = document.getElementById('MainBody');
    // let emailContentText = request.emailContent;
    // var display = document.createElement(display);
    // display.innerText = ("Here is a copy of your email" + "n" + "n" + emailContentText);
    // paragraph.appendChild(display);
    contentPanelSwitch(request)
    })

function contentPanelSwitch(message) {

    if (message === 'emailContent') {
        let paragraph = document.getElementById('MainBody');
        let emailContentText = request.emailContent;
        var display = document.createElement(display);
        display.innerText = ("Here is a copy of your email" + "n" + "n" + emailContentText);
        paragraph.appendChild(display);
    }

    else if (message === 'senderAddressResult') {
        let paragraph = document.getElementById('MainBody');
        let senderAddressText = request.senderAddress;
        var display = document.createElement(display);
        display.innerText = (senderAddressText);
        paragraph.appendChild(display);
    }
}



function readEmail() {
     //Read current tab e-mail and save text
    const emailBodyElement = document.body.querySelector('.adn.ads');
    const emailContent = emailBodyElement.innerText;
    chrome.runtime.sendMessage({emailContent});
}

senderbutton.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query(
        {active: true, currentWindow: true});
    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        func: checkSender,
    });

})

function checkSender() {
    const emailBodyElement = document.body.querySelector('.adn.ads');
    const emailContent = emailBodyElement.innerText;
// Seperates "innertext" into lines. [0] is always Sender and Email
    const emailContentLines = emailContent.split('n');
    const senderAddress = emailContentLines[0]; 
//Parse Sender from line[0]
    const parseSender = senderAddress.split("<")[0];
    const emailSenderOnly = parseSender.replace(/s+/g, '');
//Parse Domain from line [0]. Check for secondary domain for example @news.google.com 
    const parseEmail = senderAddress.match(/<([^>]+)>/)[1];
    const emailDomainAndTLD = parseEmail.split("@")[1];
    const emailDomainOnly = emailDomainAndTLD.split(".")[0];
    const emailSecondDomainOption = emailDomainAndTLD.split(".")[1];

//Converts all entries to uppercase to compare
    const emailSenderUpper = emailSenderOnly.toUpperCase();
    const emailDomainOnlyUpper = emailDomainOnly.toUpperCase();
    const emailSecondDomainOptionUpper = emailSecondDomainOption.toUpperCase();
  
//Checks to see if sender name matches with the domain name   
if (emailSenderUpper != emailSecondDomainOptionUpper) {

   if (emailSenderUpper != emailDomainOnlyUpper) {
    console.log(emailSenderUpper);
    console.log(emailDomainOnlyUpper);
    console.log(" hmmm");
    console.log(emailSenderUpper);
    console.log(emailSecondDomainOptionUpper);
    console.log("Does not match");
//     //alert("Warning, Sender Title" + " " + "'" + emailSenderOnly + "'" + " " + "does not match the domain name of the address" + " " + "'" + emailDomainOnly + "'" + 
//    // 'n' + "The Sender Title also does not match the second level" + " " + "'" + emailSecondDomainOption + "'");
//    globalSenderCheck = ("Warning, Sender Title" + " " + "'" + emailSenderOnly + "'" + " " + "does not match the domain name of the address" + " " + "'" + emailDomainOnly + "'" + 
//    'n' + "The Sender Title also does not match the second level" + " " + "'" + emailSecondDomainOption + "'")
    const senderAddressResult = "Does Not Match";
   chrome.runtime.sendMessage({senderAddressResult});
}
else {
    console.log("its a match");
    const senderAddressResult = "It is a match 1";
   chrome.runtime.sendMessage({senderAddressResult});
}
}
else {
        console.log("Its a match");
    const senderAddressResult = "It is a match 2";
   chrome.runtime.sendMessage({senderAddressResult});
        
    }
}

Style.css

body {
    min-width: 640px;
}

.center {
    text-align: center;
}

.mainBody {
    text-align: center;
}

Welcome.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="center">
        <button id="contentbutton">Launch E-mail Scan</button>
        <button id="senderbutton">Check Sender</button>
        <button id="wordingbutton">Check Suspicious Phrasing</button>
        <button id="hyperlinkbutton">Check Suspicious Links</button>
        
        <script src="content.js">
        </script>
    </div>
    <div class="mainBody" id="mainBody">
     <p id="MainBody"></p>
    </div>
    
</body>
</html>

Manifest.json

{
    "name": "Email Reader",
    "description": "Secure social engineering-based attack detector. E-mail security application",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": ["activeTab", "scripting"],

    "content_scripts": [
        {
            "matches": ["*://mail.google.com/*"],
            "js": ["content.js"],
            "css": ["style.css"]
        }
    ],

    "action" : {
        "default_popup": "welcome.html"
    }
}