Mac全屏模式下Chrome扩展弹窗遮挡文件选择对话框的解决求助

临时快速变通 #

• 点击「选择文件」按钮前，先点击弹窗外部让弹窗收起，再重新点击按钮唤起文件选择框
• 手动退出浏览器全屏模式，选完文件后再切回全屏

代码层面修复方案 #

方法1：先隐藏弹窗再唤起选择器 #

通过监听按钮点击事件，先暂时隐藏扩展弹窗，延迟几十毫秒后再触发文件选择，避免弹窗遮挡系统对话框。示例代码：

// 弹窗内的脚本
document.querySelector('.file-pick-btn').addEventListener('click', () => {
  // 发送消息给background，让弹窗隐藏
  chrome.runtime.sendMessage({cmd: 'hidePopup'});
  // 延迟唤起文件选择
  setTimeout(() => {
    document.getElementById('hidden-file-input').click();
  }, 60);
});

对应的background脚本处理：

// background.js
chrome.runtime.onMessage.addListener((msg, sender, res) => {
  if (msg.cmd === 'hidePopup') {
    chrome.action.setPopup({popup: ''});
    // 1秒后恢复弹窗（可选，根据需求调整）
    setTimeout(() => {
      chrome.action.setPopup({popup: './popup.html'});
    }, 1000);
  }
});

方法2：使用Chrome文件系统API替代原生input #

如果扩展有足够权限，用chrome.fileSystem.chooseEntry直接唤起系统级文件选择器，这个选择器不会被弹窗遮挡。示例代码：

document.querySelector('.file-pick-btn').addEventListener('click', () => {
  chrome.fileSystem.chooseEntry({type: 'openFile'}, (fileEntry) => {
    if (!fileEntry) return;
    // 读取选中的文件
    fileEntry.file((file) => {
      const reader = new FileReader();
      reader.onload = function(e) {
        // 处理文件内容，比如展示或上传
        console.log('文件内容:', e.target.result);
      };
      reader.readAsText(file);
    });
  });
});

需要在manifest.json中添加权限：

{
  "permissions": ["fileSystem"]
}

额外排查点 #

• 检查弹窗CSS里的z-index设置，不要设得过高（比如超过99999），避免干扰系统对话框的层级
• 测试不同Mac OS版本（比如Ventura、Sonoma）和浏览器版本，确认是否是特定版本的兼容性问题

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