Chrome扩展弹窗中替代废弃document.execCommand('copy')的方案咨询

核心问题原因 #

你在popup页调用navigator.clipboard返回pending状态，本质是Chrome对异步剪贴板API的焦点校验规则和扩展popup的特殊生命周期不兼容：异步剪贴板API要求调用上下文必须处于用户主动交互触发的激活聚焦状态，但popup作为点击扩展图标弹出的临时页面，焦点状态判定经常出现异常，导致Promise永远不会决议，这个问题从Chrome 9x版本存在至今，没有原生修复。
把剪贴板逻辑迁到内容脚本的方案本身设计就有缺陷：内容脚本共享宿主页面的上下文，必须要求宿主页面所在窗口、标签页完全处于激活状态才能调用剪贴板API，你用的窗口、标签页激活代码存在天然竞态——API回调触发时，系统层面的焦点切换还没完成，自然无法稳定运行，而且必然会出现焦点从popup跳转到页面的闪烁问题，完全没必要采用。

可行替代方案 #

不需要依赖废弃API，也不需要抢页面焦点，目前有稳定的官方支持方案：

• 使用 Offscreen Document（离屏文档）实现剪贴板操作，这是Chrome官方针对扩展后台/popup这类无法稳定持有焦点的上下文给出的标准解决方案
  实现步骤非常简单：
  1. 在扩展的manifest.json中声明offscreen权限
  2. 在popup的交互逻辑中，先检查是否已经创建了离屏文档，没有的话调用chrome.offscreen.createDocument创建一个和扩展同源的隐藏离屏页面，指定理由为CLIPBOARD
  3. 所有剪贴板读写逻辑都放在离屏页面中实现，通过chrome.runtime.sendMessage在popup和离屏页面之间传递要复制的内容、或者读取到的剪贴板结果即可。整个过程完全在后台运行，用户看不到任何页面切换、焦点跳转，navigator.clipboard接口在离屏文档上下文中可以稳定运行，不会出现pending问题。

如果你的需求只有写入剪贴板（复制内容），不需要读取用户剪贴板内容，也可以直接在popup页使用document.execCommand('copy')，注意正确实现姿势即可稳定运行：

1. 提前在popup的DOM中写入一个隐藏的textarea元素，设置样式为position: fixed; opacity: 0; pointer-events: none;，不要动态创建插入后立刻调用
2. 用户点击复制按钮时，把要复制的内容赋值给textarea的value，调用textarea.select()选中全部内容
3. 直接调用document.execCommand('copy')即可完成复制，不需要切换任何焦点，成功率100%。

关于废弃API的审核问题 #

使用document.execCommand('copy')不会对Chrome网上应用店审核造成任何影响：

• 虽然该API在普通网页环境被标记为废弃，但Chrome扩展运行时至今没有移除该API的支持，官方扩展文档中也没有禁止使用该API的规则
• 只要你是在用户主动触发交互（比如点击复制按钮）的场景下调用，不存在未经用户许可读写剪贴板的恶意行为，审核不会因为使用该API拒绝你的扩展，目前大量已上架的主流扩展都在使用该方法实现复制功能，没有合规风险。

你之前测试的无法稳定聚焦的代码片段，问题出在Chrome窗口/标签页激活API的回调触发时机早于系统层面焦点切换完成的时机，就算增加延时也无法保证跨设备、跨系统版本的稳定性，不建议继续尝试该方向：

chrome.windows.update(
    tab.windowId,
    { focused: true },
    () => {
        chrome.tabs.update(tab.id, { 'active': true }, (tab) => {
            console.log("not even this is focused reliably");
        });
    },
)

内容的提问来源于stack exchange，提问作者Peter V. Mørch