谷歌翻译图片粘贴按钮JS模拟点击无效问题求助

问题描述 #

我正在开发一款JavaScript扩展程序，用于翻译Windows剪贴板中的图片，目标页面为谷歌翻译图片翻译页：https://translate.google.fr/?hl=fr&sl=auto&tl=fr&op=images。剪贴板中已存在图片，在控制台执行代码：

document.querySelector('[aria-label="Coller une image depuis le presse-papiers"]').click();

时，按钮可被选中并触发点击，但弹出提示“目前无法粘贴剪贴板内容，请重试复制图片”；而手动点击该按钮却能正常工作，请问原因是什么？如何用JavaScript实现正常粘贴？

原因 #

核心问题是浏览器的安全限制：

• 浏览器为了防止恶意网站擅自读取用户剪贴板，要求剪贴板相关操作必须由真实的用户交互动作触发（比如手动点击按钮、键盘快捷键）。
• 通过JS代码模拟的点击事件属于“非用户主动触发”的操作，会被浏览器的权限机制拦截，导致页面无法访问剪贴板内容，因此弹出错误提示。

解决方法 #

不要通过模拟按钮点击来触发粘贴，而是直接利用浏览器剪贴板API读取图片，再模拟文件上传流程：

1. 配置扩展权限 #

在扩展的manifest.json中添加剪贴板读取和当前标签页权限：

{
  "manifest_version": 3,
  "name": "剪贴板图片翻译",
  "version": "1.0",
  "permissions": ["clipboardRead", "activeTab"],
  "content_scripts": [
    {
      "matches": ["https://translate.google.fr/*"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 编写核心逻辑代码（content.js） #

通过剪贴板API读取图片，再注入到谷歌翻译的文件上传控件中：

async function uploadClipboardImage() {
  try {
    // 读取剪贴板中的图片
    const clipboardItems = await navigator.clipboard.read();
    for (const item of clipboardItems) {
      // 只处理图片类型
      if (item.types.some(type => type.startsWith('image/'))) {
        const imageBlob = await item.getType(item.types.find(type => type.startsWith('image/')));
        // 创建File对象，模拟本地文件
        const imageFile = new File([imageBlob], "clipboard-img.png", { type: imageBlob.type });
        
        // 找到谷歌翻译页面的隐藏文件上传输入框
        const fileInput = document.querySelector('input[type="file"][accept="image/*"]');
        if (!fileInput) return;

        // 构造DataTransfer对象，模拟文件选择
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(imageFile);
        fileInput.files = dataTransfer.files;

        // 触发change事件，让页面识别到文件已上传
        fileInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
        break;
      }
    }
  } catch (error) {
    console.error("处理剪贴板图片失败：", error);
  }
}

3. 触发逻辑（popup.html） #

添加一个按钮，让用户主动点击来触发操作，避免权限拦截：

<!DOCTYPE html>
<html>
<body>
  <button id="pasteBtn">粘贴剪贴板图片翻译</button>
  <script>
    document.getElementById('pasteBtn').addEventListener('click', async () => {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: uploadClipboardImage
      });
      window.close();
    });
  </script>
</body>
</html>

关键注意事项 #

• 所有剪贴板操作必须由用户主动交互触发（比如点击扩展的按钮），不能在页面加载时自动执行，否则依然会被浏览器拦截。
• 不同浏览器的剪贴板API可能有细节差异，需要针对Chrome、Firefox等做适配测试。

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