I am building a browser extension (mainly for chrome).

I have successfully created other features except the copy to clipboad button. I have been on this for hours and it ends up in "Uncaught (in promise) DOMException: Document not in focus. Kindly let me know what I am doing wrong: NB(I removed some parts of code not needed for this question)

HTML and JS:

    <button id="input-btn" >Save Input</button>
    <button id="save-tab" >Save Tab</button>
    <button id="delete-btn" >Delete All</button>
    <button id="copy-btn" onclick="copyFunc()">Copy All</button>
    
    <ul id="ul"> </ul>```

//Javascript


let leads = []
const inputEl = document.getElementById("input-el") 
const inputBtn = document.getElementById("input-btn") // Using const since these two will not be reassigned later
const ulEl = document.getElementById("ul") //Grabbing the unorderd list from html

const deleteButton = document.getElementById("delete-btn") //Fetch the delet bttn from html

const fetchedLocalStrorage = JSON.parse (  localStorage.getItem("leads") )  //Fetch items from local storage and parsing it out to become an array again
const tabButton = document.getElementById("save-tab")

//Copy to clipboard function

function copyFunc() { 
      
        render(leads)

        /* Copy the text inside the listed items */
        navigator.clipboard.writeText(ulEl.textContent)
       
       /* Alert the copied text */
       alert("Copied to Clipboard");
     }


//Making the input button active

inputBtn.addEventListener("click", function(){

    leads.push(inputEl.value)
    inputEl.value = ""

    localStorage.setItem("leads", JSON.stringify(leads))

    render(leads)
    }

)



function render (leads){
    let listItems = ""

//loop through the array and give the result

for (let i = 0; i<leads.length; i ++ ) {
    listItems += `
    <li> 
        <a target='_blank' href= '${leads[i]}'>
         ${leads[i]}
        </a>
    </li>
    `
}

    ulEl.innerHTML = listItems

    } ```