Chrome扩展开发：如何将页面查询结果传递至剪贴板？

你的核心问题在于两点：一是未处理chrome.scripting.executeScript的Promise异常（导致then回调未触发），二是Manifest V3中后台服务工作者无法直接操作剪贴板，必须通过Offscreen页面完成。以下是完整的修复方案：

1. 修正后台脚本（background.js） #

改用await+try/catch捕获错误，确保能获取页面脚本的返回结果，再调用剪贴板处理逻辑：

chrome.action.onClicked.addListener(async (tab) => {
  if (!tab.url.includes('chrome://')) {
    try {
      // 执行页面脚本并获取结果
      const injectionResults = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: getWorkItems, // 该函数将在目标页面执行
      });

      // 提取结果并调用剪贴板功能
      for (const frameResult of injectionResults) {
        const { result } = frameResult;
        if (result) {
          await copyToClipboard(result);
          console.log('内容已复制到剪贴板');
        }
      }
    } catch (err) {
      console.error('操作失败:', err); // 捕获执行脚本或复制时的错误
    }
  }
});

// 目标页面执行的内容提取函数（必须可序列化，内部仅使用目标页面的API）
function getWorkItems() {
  // 示例：提取页面中所有.work-item元素的文本并格式化
  const items = document.querySelectorAll('.work-item');
  return Array.from(items).map(item => item.textContent.trim()).join('\n');
}

// 借助Offscreen页面实现剪贴板写入
async function copyToClipboard(text) {
  // 创建Offscreen页面（若未存在）
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.CLIPBOARD],
    justification: '复制页面提取的内容到剪贴板',
  });

  // 向Offscreen页面发送复制指令
  await chrome.runtime.sendMessage({
    type: 'copy-data',
    data: text,
  });

  // 可选：复制完成后关闭Offscreen页面
  await chrome.offscreen.closeDocument();
}

2. 创建Offscreen页面文件 #

offscreen.html #

<!DOCTYPE html>
<html>
<body>
  <script src="offscreen.js"></script>
</body>
</html>

offscreen.js #

// 接收后台脚本的消息，执行剪贴板写入
chrome.runtime.onMessage.addListener(async (message) => {
  if (message.type === 'copy-data') {
    try {
      await navigator.clipboard.writeText(message.data);
    } catch (err) {
      console.error('剪贴板写入失败:', err);
    }
  }
});

3. 配置manifest.json #

确保添加所需权限：

{
  "name": "页面内容复制工具",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["activeTab", "scripting", "offscreen"],
  "action": {}
}

关键注意事项 #

• getWorkItems函数必须是可序列化的独立函数，不能引用后台脚本中的外部变量，它会被完整传输到目标页面执行。
• 若executeScript的then未触发，大概率是脚本执行抛出了异常（比如目标页面中找不到指定元素、函数语法错误），通过try/catch可以捕获具体错误原因。
• Manifest V3中后台服务工作者无DOM环境，必须通过Offscreen页面调用navigator.clipboardAPI，这是官方规定的剪贴板操作方式。

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