Back Button doesn’t work when iframe is clicked on

I am creating a chrome extension which embeds an iframe on a website and it works well except when a user clicks on the iframe (or anything inside the iframe) and then tries to use the back button to navigate back to a previous page on the parent/actual site. When you attempt to go back the page just reloads the iframe (even when you press the back button many times, each time it just reloads the iframe). If the user doesn’t click on the iframe (just mouseover) everything works as expected. Here is what my chrome extension is doing:

background.js:

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status == 'complete') {
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            function: createIframe
        });
    }
});

function createIframe() {
    var location = document.getElementById(id of location);
    var embed = document.createElement("iframe");
    embed.setAttribute('src', link);
    location.appendChild(embed.cloneNode(true));
}

Responses to similar problems said the issue was setting the src link using setAttribute and that this method added the iframe loading to the browser history. To fix this they suggest using iframe.contentWindow.location.replace(link);. I tried doing this, but the iframe didn’t even load the link content (not sure if replace requires a location to be set already):

embed.setAttribute('id', 'uniqueid');
var frame = document.getElementById('uniqueid');
frame.contentWindow.location.replace(link);

I am new to web development (and chrome extension development) and any help would be greatly appreciated! Thanks in advance.