Firefox浏览器扩展：无需事件监听的Javascript剪贴板内容获取方法

嘿，我明白你想要避开paste事件监听器来获取剪贴板内容的需求，这其实可以通过现代浏览器提供的Clipboard API来实现，但有几个关键的安全限制和注意事项得先跟你说清楚：

核心前提：浏览器的安全限制 #

现代浏览器（包括Firefox）为了保护用户隐私，绝对不允许脚本在没有用户主动交互的情况下读取剪贴板——这是硬规则，防止恶意脚本窃取用户剪贴板里的敏感信息（比如密码、银行卡号）。所以你还是需要一个用户触发的动作（比如点击按钮、按下快捷键）来触发读取操作，但完全不需要依赖paste事件。

具体实现步骤 #

1. 配置扩展权限 #

首先要在你的扩展manifest文件里声明剪贴板读取权限：

• 如果是Manifest V2，在permissions数组里添加"clipboardRead"：

  {
    "manifest_version": 2,
    "name": "你的扩展名称",
    "version": "1.0",
    "permissions": ["clipboardRead"]
  }
  

• 如果是Manifest V3，同样在permissions数组里添加"clipboardRead"：

  {
    "manifest_version": 3,
    "name": "你的扩展名称",
    "version": "1.0",
    "permissions": ["clipboardRead"]
  }
  

2. 在用户交互中调用Clipboard API #

你可以在用户触发的事件（比如按钮点击、快捷键触发）里调用navigator.clipboard.readText()来读取剪贴板文本内容。举个简单的例子：

// 假设你的扩展弹窗或页面里有一个按钮
const fetchClipboardBtn = document.querySelector('#fetch-clipboard');

// 给按钮绑定点击事件
fetchClipboardBtn.addEventListener('click', async () => {
  try {
    // 读取剪贴板文本
    const clipboardContent = await navigator.clipboard.readText();
    console.log('读取到的剪贴板内容:', clipboardContent);
    // 这里写你处理内容的逻辑
  } catch (error) {
    console.error('读取剪贴板失败:', error);
    // 处理错误场景：比如用户拒绝权限、浏览器不支持等
  }
});

3. 读取非文本内容（可选） #

如果需要读取图片等非文本内容，可以使用navigator.clipboard.read()方法，它会返回一个包含剪贴板项目的数组，你可以从中提取不同类型的数据：

fetchClipboardBtn.addEventListener('click', async () => {
  try {
    const items = await navigator.clipboard.read();
    for (const item of items) {
      // 检查是否有图片类型的数据
      if (item.types.includes('image/png')) {
        const blob = await item.getType('image/png');
        // 将blob转换为可显示的URL
        const imageUrl = URL.createObjectURL(blob);
        console.log('读取到的图片:', imageUrl);
      }
    }
  } catch (error) {
    console.error('读取剪贴板失败:', error);
  }
});

关键注意事项 #

• Firefox版本支持：从Firefox 63开始就支持navigator.clipboard.readText()，所以只要你的扩展目标版本不低于这个，就可以正常使用。
• 用户交互要求：读取操作必须在用户主动触发的事件回调里执行（比如click、keydown），不能在页面加载完成后直接调用，否则会被浏览器的安全机制拦截。
• 权限申请：如果用户拒绝了剪贴板权限，或者你的扩展没有正确声明权限，调用API时会抛出错误，记得做好错误处理。

这样就完全避开了paste事件监听器，只通过用户主动操作就能获取剪贴板内容啦。

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