Estoy creando una extensión de navegador (principalmente para Chrome).

He creado con éxito otras funciones, excepto el botón Copiar al portapapeles. He estado en esto durante horas y termina en "DOMException no detectada (en promesa): el documento no está enfocado. Por favor, hágame saber qué estoy haciendo mal: NB (eliminé algunas partes del código que no son necesarias para esta pregunta)

HTML y 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 } ```