Chrome Extension v3弹窗无法读取剪贴板问题求助

你遇到的是Manifest V3版本Chrome扩展弹窗中，navigator.clipboard.readText()无执行、无报错的问题，以下是几个可行的解决思路：

方案1：使用Chrome扩展原生chrome.clipboard API（推荐） #

扩展内置的剪贴板API专门适配扩展环境，比标准navigator.clipboard更可靠：

1. 确保manifest.json已声明clipboardRead权限（你已配置），新增background service worker配置：

"background": {
  "service_worker": "background.js"
}

2. 创建background.js，处理剪贴板读取请求：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'readClipboard') {
    chrome.clipboard.readText({
      callback: (text) => {
        sendResponse({success: true, data: text});
      }
    });
    return true; // 保持消息通道开放至回调执行
  }
});

3. 修改popup.js，通过消息传递调用后台逻辑：

document.getElementById("ReadFromClipboard").addEventListener("click", (ev) => {
  console.log("popup.js::ReadFromClipboard: does document have focus (1)? " + document.hasFocus());
  try {
        console.log("popup.js::ReadFromClipboard: inside try block");
        chrome.runtime.sendMessage({action: 'readClipboard'}, (response) => {
          response.success 
            ? console.log("popup.js::ReadFromClipboard: readText clipCopy= " + response.data)
            : console.log("popup.js::ReadFromClipboard: failed to read clipboard");
        });
      } catch (err) {
          console.log("popup.js::ReadFromClipboard: error = " + err);
      }
}, false);

方案2：使用传统execCommand('paste')方法 #

该方法虽已标记为废弃，但凭借扩展的clipboardRead权限，仍可在弹窗环境正常工作：
修改popup.js代码：

document.getElementById("ReadFromClipboard").addEventListener("click", (ev) => {
  console.log("popup.js::ReadFromClipboard: does document have focus (1)? " + document.hasFocus());
  try {
        console.log("popup.js::ReadFromClipboard: inside try block");
        // 创建隐藏文本框接收粘贴内容
        const textArea = document.createElement('textarea');
        textArea.style.cssText = 'position:fixed;opacity:0;';
        document.body.appendChild(textArea);
        textArea.focus();
        // 执行粘贴命令
        document.execCommand('paste');
        const clipCopy = textArea.value;
        document.body.removeChild(textArea);
        console.log("popup.js::ReadFromClipboard: readText clipCopy= " + clipCopy);
      } catch (err) {
          console.log("popup.js::ReadFromClipboard: readText error = " + err);
      }
}, false);

补充排查点 #

• 确认Chrome浏览器为较新版本（Manifest V3对版本有最低要求）；
• 在扩展管理页面的「权限」标签中，核实clipboardRead权限已授予；
• 弹窗打开后等待1-2秒再点击按钮，规避初始化阶段的焦点异常。

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