Chrome扩展程序访问用户磁盘存储的可行性及实现方法问询

你的需求完全可以实现，核心依赖Chrome的FileSystem Access API，这个API允许扩展在用户授权的前提下，直接访问本地文件系统。下面是具体实现步骤：

1. 声明必要权限 #

在扩展的manifest.json中添加基础权限配置：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "permissions": ["activeTab"],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "popup.html"
  }
}

注意：无需额外声明fileSystem静态权限，FileSystem Access API基于用户交互授权生效。

2. 创建指定文件夹 #

通过用户交互选择目标目录（比如文档目录），再在其中创建子文件夹：

async function createScreenshotFolder() {
  // 引导用户选择存储根目录（建议提示选择文档目录）
  const rootDirHandle = await window.showDirectoryPicker();
  // 创建名为"ExtensionScreenshots"的子文件夹
  await rootDirHandle.getDirectoryHandle("ExtensionScreenshots", { create: true });
  // 序列化目录句柄并保存，实现权限持久化
  const serializedHandle = await rootDirHandle.toString();
  await chrome.storage.local.set({ targetDir: serializedHandle });
}

3. 存储页面截图 #

先捕获页面截图，再写入到已授权的文件夹：

async function saveScreenshot() {
  // 从存储中读取已保存的目录句柄
  const storedData = await chrome.storage.local.get("targetDir");
  const dirHandle = await window.showDirectoryPicker({
    startIn: storedData.targetDir
  });
  // 捕获当前页面截图（依赖activeTab权限）
  const screenshotUrl = await chrome.tabs.captureVisibleTab();
  const response = await fetch(screenshotUrl);
  const blob = await response.blob();
  // 创建带时间戳的截图文件
  const fileHandle = await dirHandle.getFileHandle(`${Date.now()}.png`, { create: true });
  // 将blob写入文件
  const writableStream = await fileHandle.createWritable();
  await writableStream.write(blob);
  await writableStream.close();
}

4. 读取文件内容 #

读取授权目录下的指定文件：

async function readTargetFile() {
  const dirHandle = await window.showDirectoryPicker();
  // 获取目标文件句柄
  const fileHandle = await dirHandle.getFileHandle("example.png");
  const file = await fileHandle.getFile();
  // 图片文件用arrayBuffer读取，文本文件用text()
  const fileBuffer = await file.arrayBuffer();
  console.log("文件内容:", fileBuffer);
}

5. 删除文件或文件夹 #

删除授权目录下的指定资源：

async function deleteTargetItem() {
  const dirHandle = await window.showDirectoryPicker();
  // 删除单个文件
  await dirHandle.removeEntry("outdated_screenshot.png");
  // 递归删除文件夹及内部所有内容
  await dirHandle.removeEntry("OldScreenshots", { recursive: true });
}

关键注意事项 #

• 用户交互触发：所有FileSystem Access API调用必须绑定用户主动操作（比如点击按钮），不能在扩展加载时自动执行，否则会被浏览器拦截。
• 权限持久化：序列化后的目录句柄可存在chrome.storage.local中，后续调用可通过startIn参数快速定位目录，减少用户重复操作。
• 版本兼容性：该API仅支持Chrome 86及以上版本，需确保目标用户浏览器版本达标。
• 安全限制：扩展无法直接强制访问系统文档目录，必须由用户手动选择授权。

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