如何在Chrome扩展中永久获取目录访问权限？

问题核心 #

Chrome的FileSystem Access API要求权限请求必须在用户激活上下文（比如点击、输入等主动交互）中触发，而且直接存储的FileSystemDirectoryHandle在浏览器重启、标签全部关闭后，权限状态会重置为prompt，此时自动调用requestPermission必然报错。

具体解决步骤 #

1. 正确持久化存储目录句柄 #

存储句柄时必须通过API的持久化标记，并且用IndexedDB存储（localStorage无法保存复杂对象）：

// 存储目录句柄到IndexedDB
async function storeHandle(directoryHandle: FileSystemDirectoryHandle) {
  // 标记句柄为持久化，确保浏览器重启后仍能识别
  await directoryHandle.persisted();
  // 封装IndexedDB操作（这里使用了idb库简化代码，也可以原生实现）
  const db = await openDB('ExtensionStorage', 1, {
    upgrade(db) {
      db.createObjectStore('handles');
    },
  });
  await db.put('handles', directoryHandle, 'savedDirectory');
}

// 从IndexedDB恢复存储的句柄
async function getStoredHandle(): Promise<FileSystemDirectoryHandle | null> {
  const db = await openDB('ExtensionStorage', 1);
  return db.get('handles', 'savedDirectory');
}

2. 恢复权限必须绑定用户交互 #

页面加载完成后不能自动请求权限，必须通过用户主动触发的操作（比如点击按钮）来检查并恢复权限：

// 页面初始化时检查已存储的句柄状态
document.addEventListener('DOMContentLoaded', async () => {
  const savedHandle = await getStoredHandle();
  if (savedHandle) {
    const permission = await savedHandle.queryPermission({ mode: 'readwrite' });
    if (permission === 'granted') {
      // 权限仍有效，直接使用句柄
      initDirectoryOperations(savedHandle);
    } else {
      // 权限需要重新授权，显示引导按钮
      document.getElementById('restore-perm-btn').style.display = 'block';
    }
  }
});

// 按钮点击时触发权限请求
document.getElementById('restore-perm-btn').addEventListener('click', async () => {
  const savedHandle = await getStoredHandle();
  if (!savedHandle) return;
  
  const permission = await savedHandle.requestPermission({ mode: 'readwrite' });
  if (permission === 'granted') {
    // 权限恢复成功，隐藏按钮并初始化业务逻辑
    document.getElementById('restore-perm-btn').style.display = 'none';
    initDirectoryOperations(savedHandle);
  }
});

// 业务逻辑：使用目录句柄进行读写操作
function initDirectoryOperations(handle: FileSystemDirectoryHandle) {
  console.log('目录权限已恢复，可进行操作', handle);
  // 这里添加你的文件读写逻辑
}

3. 扩展manifest配置补充 #

在manifest.json中声明必要权限：

{
  "permissions": ["storage"],
  "host_permissions": ["<all_urls>"] // 访问本地文件系统需要此权限
}

关键注意事项 #

• 无论如何都不能在页面自动加载阶段调用requestPermission，必须绑定到用户的主动交互（点击、触摸等），否则必然触发权限错误。
• 即使标记了句柄持久化，Chrome仍可能在用户清除浏览器数据、重置权限时失效，需要做好权限丢失后的引导处理。

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