Chrome扩展content.js中navigator.clipboard.writeText()失效问题

问题背景 #

开发Chrome扩展时，popup.js的按钮点击后向当前活跃标签页的content.js发送getClientName指令，content.js尝试调用navigator.clipboard.writeText()写入剪贴板，但始终进入catch分支报错。但直接在popup.js中调用该方法可正常工作，需求是从页面获取信息后执行剪贴板操作。

问题原因 #

• navigator.clipboard API要求操作必须在用户直接交互的上下文中触发，content script通过消息监听执行的操作不属于这个上下文，浏览器会阻止此类无用户交互的剪贴板写入。
• Manifest V3对content script的权限限制更严格，即便声明了clipboardWrite权限，也无法绕过用户交互上下文的要求。

解决方案 #

核心思路是让处于用户交互上下文的popup执行剪贴板写入操作，content script仅负责获取页面数据并返回给popup。

1. 修改content.js：获取页面数据并返回给popup #

chrome.runtime.onMessage.addListener((msg, sender, response) => {
  if (msg.command === 'getClientName') {
    // 替换为实际从页面提取信息的逻辑，示例：
    const clientName = document.querySelector('.client-name').textContent.trim();
    // 将获取到的数据返回给popup
    response(clientName);
  }
});

2. 修改popup.js：接收数据后执行剪贴板写入 #

document.querySelector('#btn').addEventListener('click', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { command: 'getClientName' }, (clientName) => {
      // 在popup的用户交互上下文里执行剪贴板写入
      navigator.clipboard.writeText(clientName)
        .then(() => alert('已复制到剪贴板'))
        .catch(err => alert(`复制失败：${err.message}`));
    });
  });
});

3. 确认Manifest配置（无需额外修改） #

{
  "manifest_version": 3,
  "name": "The Magic Button",
  "version": "1.0.0",
  "description": "Open P.P. client folder in sharepoint",
  "action": {
    "default_icon": {
      "16": "/images/logo16.png",
      "48": "/images/logo48.png",
      "64": "/images/logo64.png",
      "128": "/images/logo64.png"
    },
    "default_popup": "popup.html",
    "default_title": "Open Sharepoint Folder"
  },
  "permissions": ["tabs", "clipboardWrite"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["/styles/contentStyle.css"],
      "run_at": "document_idle",
      "all_frames": false
    }
  ]
}

补充说明 #

如果content.js获取数据是异步操作（比如接口请求），需要在chrome.runtime.onMessage中调用return true;保持消息通道开放，待异步操作完成后再通过response(data)返回结果：

chrome.runtime.onMessage.addListener((msg, sender, response) => {
  if (msg.command === 'getClientName') {
    // 异步获取数据示例
    fetch('/api/client')
      .then(res => res.text())
      .then(clientName => response(clientName));
    // 保持消息通道开放
    return true;
  }
});

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