Chrome扩展点击弹窗选文件夹后出现AbortError报错求助

报错原因 #

这个AbortError本质是Chrome扩展弹窗（Popup）的生命周期限制导致的：当调用window.showDirectoryPicker()打开系统文件夹选择对话框时，Popup会失去焦点并被Chrome自动销毁，后续的异步代码（await handle.getDirectoryHandle(...)）失去执行上下文，最终抛出中止错误。调试器指向事件监听函数结束行，是因为异步函数的未捕获Promise拒绝会被关联到函数执行的收尾位置。

解决方案 #

1. 添加错误捕获，明确错误来源 #

给异步代码加上try/catch，能让错误信息更清晰，避免调试器指向模糊的位置：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('btnCreate').addEventListener('click', async function() {
        try {
            // 请求文件系统写入权限
            const handle = await window.showDirectoryPicker();

            // 在选中目录内创建新文件夹
            await handle.getDirectoryHandle('myFolder', { create: true });
        } catch (err) {
            console.error('操作出错:', err);
            // 可在此添加用户提示，比如弹窗告知操作失败
        }
    });
})

2. 解决Popup销毁问题 #

要避免Popup在文件选择时被销毁，有两种可行方案：

• 方案一：用独立窗口替代Popup处理文件选择
  点击按钮时创建一个小型独立窗口来执行文件选择逻辑，这个窗口不会因打开系统对话框而被销毁：

  document.getElementById('btnCreate').addEventListener('click', function() {
      chrome.windows.create({
          url: 'file-picker.html', // 新建专门处理文件选择的页面
          type: 'popup',
          width: 300,
          height: 150
      });
  });
  

  在file-picker.html中放置文件选择逻辑，确保系统对话框打开时窗口不会关闭，代码能正常执行。

• 方案二：使用Service Worker持久化文件句柄
  先在Popup的用户交互上下文里获取文件句柄，序列化后传递给Service Worker，后续文件操作由后台运行的Service Worker完成（不受Popup生命周期影响）：

  // Popup.js 代码
  try {
      const handle = await window.showDirectoryPicker();
      // 序列化文件句柄
      const root = await window.navigator.storage.getDirectory();
      await root.put('selected-dir', handle);
      // 给Service Worker发消息执行创建文件夹操作
      chrome.runtime.sendMessage({ action: 'createFolder', handleKey: 'selected-dir' });
  } catch (err) {
      console.error(err);
  }
  
  // Service Worker 代码
  chrome.runtime.onMessage.addListener(async (message) => {
      if (message.action === 'createFolder') {
          const root = await window.navigator.storage.getDirectory();
          const handle = await root.getFileHandle(message.handleKey);
          await handle.getDirectoryHandle('myFolder', { create: true });
          // 后续操作...
      }
  });
  

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