如何在Firefox浏览器的网页Javascript脚本中读取剪贴板文本

背景说明 #

Firefox 网页环境默认禁用了 navigator.clipboard.readText 接口的非用户主动触发调用，只有在扩展上下文且授予 clipboardRead 权限时才允许无交互读取剪贴板，你遇到的返回 undefined 属于浏览器正常限制。

方案1：无需扩展的降级实现（仅支持用户主动触发粘贴时读取） #

如果可以接受用户手动按 Ctrl+V/Command+V 或者点击粘贴按钮触发读取，直接在网页端监听 paste 事件即可实现，无需开发扩展：

document.addEventListener('paste', (e) => {
  // 阻止默认粘贴行为
  e.preventDefault();
  // 读取剪贴板文本
  const clipboardText = e.clipboardData.getData('text/plain');
  console.log('读取到的剪贴板内容：', clipboardText);
});

方案2：自定义扩展实现无交互读取（支持网页主动调用） #

如果需要网页无需用户操作主动读取剪贴板，可通过自定义扩展做中转，通信逻辑如下：

1. 扩展manifest.json配置（Manifest V3版本） #

在扩展清单中声明必要权限、允许外部网页通信的域名白名单、后台服务配置：

{
  "manifest_version": 3,
  "name": "剪贴板读取中转",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["clipboardRead"],
  // 配置允许调用扩展的网页域名，替换成你自己的网页域名
  "externally_connectable": {
    "matches": ["https://你的网页域名.com/*"]
  }
}

2. 扩展后台逻辑（background.js） #

监听来自网页的消息请求，在扩展上下文读取剪贴板后返回结果：

chrome.runtime.onMessageExternal.addListener(
  (request, sender, sendResponse) => {
    // 判断是读取剪贴板的请求
    if (request.action === 'getClipboardText') {
      navigator.clipboard.readText()
        .then(text => sendResponse({success: true, data: text}))
        .catch(err => sendResponse({success: false, error: err.message}));
      // 异步返回需要返回true保持端口开放
      return true;
    }
  }
);

3. 网页侧调用代码 #

网页侧通过扩展ID向扩展发送请求，用 async/await 封装即可达到书写上的同步调用效果（浏览器跨上下文通信本身没有原生同步实现，异步封装是唯一方案）：

// 替换成你自己的扩展ID
const EXTENSION_ID = '你的扩展ID字符串';

// 封装成异步方法，调用时用await即可同步写法获取结果
async function getClipboardTextFromExtension() {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage(
      EXTENSION_ID,
      {action: 'getClipboardText'},
      (response) => {
        if (response?.success) {
          resolve(response.data);
        } else {
          reject(response?.error || '调用扩展失败');
        }
      }
    );
  });
}

// 调用示例
async function test() {
  try {
    const text = await getClipboardTextFromExtension();
    console.log('获取到剪贴板内容：', text);
  } catch (e) {
    console.error('读取失败：', e);
  }
}

注意事项 #

• manifest中的 externally_connectable.matches 必须填写你实际的网页域名，不支持过宽泛的通配符
• 扩展安装后需要确认已授予剪贴板读取权限，可在浏览器扩展管理页的扩展详情中检查
• 测试临时扩展时要替换成浏览器生成的临时扩展ID，发布扩展后替换成正式扩展ID

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