Firefox WebExtensions开发：如何将剪贴板内容读取到变量？

我来帮你排查这个剪贴板读取的问题～你的思路方向是对的，但当前实现存在几个关键问题，导致无法正常读取剪贴板内容：

为什么你的代码没效果？ #

• document.execCommand("paste")的局限性：这个方法属于旧的DOM操作API，现在已经被废弃。它要求目标元素必须获得焦点，而且后台页面（background page）是浏览器后台运行的不可见页面，焦点状态不稳定，很难保证execCommand("paste")能成功执行。
• 依赖DOM元素的不可靠性：你通过textarea来中转剪贴板内容，但后台页面的DOM元素交互能力有限，即使调用了focus()，也可能因为页面不可见而无法触发粘贴动作。

正确的实现方式（使用现代Clipboard API） #

现代浏览器推荐使用Clipboard API来处理剪贴板操作，它是异步的，不需要依赖DOM元素，权限控制更明确，完全适配WebExtensions的后台环境。

修正后的代码 #

manifest.json（你的配置已经没问题，保留即可）

{ 
  "description": "Paste from clipboard to variable test.", 
  "manifest_version": 2, 
  "name": "Clipboard test", 
  "version": "1.0", 
  "background": { "page": "background-page.html" }, 
  "icons": { "48": "icons/clipboard-48.png" }, 
  "permissions": [ "clipboardRead" ], 
  "browser_action": { 
    "default_icon": { 
      "16": "icons/clipboard-16.png", 
      "32": "icons/clipboard-32.png" 
    } 
  } 
}

background-page.html（可以移除textarea，因为不再需要它）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>background-page</title> 
</head> 
<body> 
  <script type="text/javascript" src="background.js"></script> 
</body> 
</html>

background.js（核心修改部分）

async function paste() {
  try {
    // 直接读取剪贴板文本，不需要DOM元素中转
    const pasteText = await navigator.clipboard.readText();
    console.log("剪贴板内容: " + pasteText);
    // 这里可以直接把pasteText赋值给你的变量，比如：
    // let myVariable = pasteText;
  } catch (err) {
    console.error("读取剪贴板失败: ", err);
  }
}

function toolbarButtonClick(){
  paste();
  console.log("Button clicked.");
}

browser.browserAction.onClicked.addListener(toolbarButtonClick);

额外注意事项 #

• 确保你的Firefox版本支持Clipboard API（Firefox 63及以上版本都支持）。
• 扩展必须申请clipboardRead权限（你已经在manifest里配置了，这点没问题）。
• 如果后续打算升级到Manifest V3，后台页面需要改成Service Worker，但剪贴板API的使用逻辑基本一致。

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