Chrome扩展写入剪贴板报错：Document is not focused 求助

问题根源 #

navigator.clipboard.writeText属于Web标准API，它要求操作必须在用户交互触发的上下文内，且当前文档处于聚焦状态。Windows Chrome对该限制的校验比Mac更严格，点击扩展图标/快捷键时页面可能未及时聚焦，导致抛出Document is not focused错误。而Chrome扩展自带的chrome.clipboard.writeTextAPI不受页面聚焦限制，只要申请了clipboardWrite权限即可直接使用，跨平台兼容性更强。

最优方案：直接在Service Worker中完成提取与剪贴板写入 #

你已经拥有tabs权限，点击扩展图标时可直接获取当前活跃标签的URL，无需向页面注入脚本，彻底避开页面聚焦问题。

修改后的background.js代码：

chrome.action.onClicked.addListener(async (tab) => {
  // 从URL提取Salesforce Record Id，替换为你的正则逻辑
  const url = tab.url;
  // 示例正则：匹配15/18位Salesforce标准Record Id
  const recordIdMatch = url.match(/([a-zA-Z0-9]{15}|[a-zA-Z0-9]{18})/);
  
  if (!recordIdMatch) {
    console.log("未找到Record Id");
    return;
  }
  
  const recordId = recordIdMatch[0];
  
  try {
    await chrome.clipboard.writeText(recordId);
    console.log("Record Id已复制：", recordId);
    // 可选：给用户弹出成功提示
    chrome.notifications.create({
      type: "basic",
      iconUrl: "hello_extensions.png",
      title: "复制成功",
      message: `Record Id: ${recordId}`
    });
  } catch (err) {
    console.error("复制失败：", err);
  }
});

备选方案：若需在Content Script中处理数据 #

如果必须在页面脚本内提取数据，可将结果传回Service Worker，由后者完成剪贴板写入：

修改后的background.js：

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    func: extractRecordId,
  }).then((results) => {
    if (results?.[0]?.result) {
      chrome.clipboard.writeText(results[0].result)
        .then(() => console.log("复制成功"))
        .catch(err => console.error("复制失败：", err));
    }
  });
});

// 注入到页面执行的提取函数
function extractRecordId() {
  const url = window.location.href;
  // 替换为你的正则提取逻辑
  const recordIdMatch = url.match(/([a-zA-Z0-9]{15}|[a-zA-Z0-9]{18})/);
  return recordIdMatch ? recordIdMatch[0] : null;
}

额外优化点 #

• 原代码中const url = await tab.url是冗余写法，tab.url为同步属性，无需await
• 若不再需要向页面注入脚本，可从manifest.json的permissions中移除scripting权限

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