如何在Manifest V3版Chrome扩展弹窗中读取剪贴板图片？

方案1：用户交互触发下使用Clipboard API #

Chrome对剪贴板访问有严格的用户交互限制，弹窗内直接调用会挂起，但在用户手势事件（如点击）的回调中执行即可正常工作。

实现步骤 #

• 在弹窗HTML中添加触发按钮：

<button id="pasteImgBtn">读取剪贴板图片</button>

• 在弹窗JS中绑定点击事件，回调内调用Clipboard API：

document.getElementById('pasteImgBtn').addEventListener('click', async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const item of clipboardItems) {
      // 筛选图片类型（可根据需求添加jpeg等格式）
      if (item.types.includes('image/png')) {
        const imgBlob = await item.getType('image/png');
        // 处理图片Blob，示例：转为URL显示在弹窗中
        const imgUrl = URL.createObjectURL(imgBlob);
        const imgElement = document.createElement('img');
        imgElement.src = imgUrl;
        imgElement.style.maxWidth = '300px';
        document.body.appendChild(imgElement);
      }
    }
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
});

• 在manifest.json中声明必要权限：

{
  "permissions": ["clipboardRead"],
  "action": {
    "default_popup": "popup.html"
  }
}

方案2：利用可编辑DOM元素配合paste事件 #

如果Clipboard API存在兼容性问题，可通过创建隐藏的可编辑元素，结合paste事件读取图片：

实现步骤 #

document.getElementById('pasteImgBtn').addEventListener('click', () => {
  // 创建隐藏的可编辑div
  const tempPasteArea = document.createElement('div');
  tempPasteArea.contentEditable = true;
  tempPasteArea.style.position = 'absolute';
  tempPasteArea.style.left = '-9999px';
  tempPasteArea.style.top = '-9999px';
  document.body.appendChild(tempPasteArea);

  // 监听paste事件
  tempPasteArea.addEventListener('paste', (e) => {
    e.preventDefault();
    const clipboardData = e.clipboardData;
    for (const item of clipboardData.items) {
      if (item.kind === 'file' && item.type.startsWith('image/')) {
        const imgFile = item.getAsFile();
        // 处理图片文件，示例：转为Blob URL显示
        const imgUrl = URL.createObjectURL(imgFile);
        const imgElement = document.createElement('img');
        imgElement.src = imgUrl;
        imgElement.style.maxWidth = '300px';
        document.body.appendChild(imgElement);
      }
    }
    // 清理临时元素
    document.body.removeChild(tempPasteArea);
  });

  // 聚焦并触发粘贴（需在用户交互回调内执行）
  tempPasteArea.focus();
  document.execCommand('paste');
});

核心注意点 #

• 所有剪贴板读取操作必须在用户主动触发的交互事件（如点击、按键）回调中执行，Chrome禁止无用户交互的剪贴板访问。
• 弹窗属于独立的页面上下文，无需通过content script或service worker中转，直接在弹窗JS中处理即可。
• 确保manifest.json中正确声明clipboardRead权限，否则会触发权限错误。

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