Chrome扩展开发实现按钮点击复制到剪贴板功能报错排查

• 你调用的navigator.clipboard.writeText是异步API，现有代码没有等待执行完成就触发了alert，弹窗会抢走扩展popup页面的焦点，导致剪贴板API调用时关联的文档处于失焦状态，触发报错
• Chrome扩展调用剪贴板写入能力需要在manifest配置中声明clipboardWrite权限，未声明也会触发相关权限/焦点错误
• 扩展popup页面生命周期极短，仅在用户交互且处于激活状态时可正常调用敏感API，异步逻辑如果执行时序错位就会触发页面失焦类错误

1. 调整剪贴板调用逻辑，增加异步处理和兜底方案 #

替换原有copyFunc代码为以下内容：

async function copyFunc() { 
  render(leads)
  const copyContent = ulEl.textContent.trim()
  try {
    // 等待剪贴板写入完成后再弹出提示
    await navigator.clipboard.writeText(copyContent)
    alert("已复制到剪贴板")
  } catch (err) {
    // 兜底兼容方案：使用传统的document.execCommand实现复制
    const tempInput = document.createElement('input')
    tempInput.value = copyContent
    document.body.appendChild(tempInput)
    tempInput.select()
    document.execCommand('copy')
    document.body.removeChild(tempInput)
    alert("已复制到剪贴板")
  }
}

2. 补充扩展权限配置 #

在你的manifest.json文件的permissions数组中添加权限声明：

"permissions": ["clipboardWrite"]

3. 优化事件绑定（可选，规避作用域问题） #

移除HTML中copy-btn标签的onclick="copyFunc()"行内属性，改为在JS中绑定事件：

const copyBtn = document.getElementById("copy-btn")
copyBtn.addEventListener("click", copyFunc)

内容的提问来源于stack exchange，提问作者AnatuGreen