控制台执行JS触发扩展页面剪贴板写入遇权限错误的解决方法

问题原因 #

你通过代码模拟按钮点击触发剪贴板写入，这种操作不属于浏览器认可的用户主动交互动作，Firefox的安全策略要求剪贴板写入必须由真实的用户点击、键盘输入等交互直接触发，因此会抛出NotAllowedError。

解决方案 #

1. 绑定剪贴板操作到真实用户点击事件

直接将剪贴板写入逻辑放在按钮的原生点击事件回调中，确保操作由用户真实点击触发：

// 获取目标按钮
const copyButton = document.evaluate(
  "/html/body/div/section/div/div/div[2]/div/div/button",
  document.body,
  null,
  9,
  null
).singleNodeValue;

// 替换或添加按钮的点击事件监听
copyButton.addEventListener('click', async (e) => {
  // 若原有按钮逻辑不需要，可取消默认行为
  e.preventDefault();
  
  try {
    // 写入剪贴板的内容，替换为你需要的文本
    await navigator.clipboard.writeText('目标复制内容');
    console.log('内容已成功复制到剪贴板');
  } catch (error) {
    console.error('剪贴板写入失败:', error);
  }
});

2. 借助扩展后台脚本绕过用户激活限制

如果必须通过代码触发（非用户直接点击），可以利用Firefox扩展后台脚本的更高权限来执行剪贴板操作：

• 第一步：配置扩展权限
  在manifest.json中添加clipboardWrite权限：

  {
    "manifest_version": 3, // 或你的扩展使用的版本
    "permissions": ["clipboardWrite"]
    // 其他扩展配置项...
  }
  

• 第二步：页面脚本发送消息到后台
  在你的browser.html页面脚本中，将模拟点击改为向后台发送复制请求：

  const copyButton = document.evaluate(
    "/html/body/div/section/div/div/div[2]/div/div/button",
    document.body,
    null,
    9,
    null
  ).singleNodeValue;
  
  // 触发后台复制逻辑
  copyButton.addEventListener('click', () => {
    browser.runtime.sendMessage({
      action: "copyToClipboard",
      text: "要复制的目标内容"
    });
  });
  

• 第三步：后台脚本处理剪贴板写入
  在扩展的background.js中监听消息并执行复制：

  browser.runtime.onMessage.addListener(async (message) => {
    if (message.action === "copyToClipboard") {
      try {
        await navigator.clipboard.writeText(message.text);
      } catch (error) {
        console.error('后台剪贴板写入失败:', error);
      }
    }
  });
  

注意事项 #

• 确保页面运行在扩展自身的上下文内，而非普通网页上下文；
• 若使用Manifest V3版本扩展，后台脚本需配置为service_worker，注意对应语法差异。

内容的提问来源于stack exchange，提问作者d-b