Chrome扩展：如何通过chrome.downloads API预定义录屏文件的下载路径与文件名

阿华AIGC实验室

2026-5-26

如何在Chrome扩展中预定义录屏视频的下载路径和文件名

这个需求我之前也碰到过，Chrome的安全机制确实对本地文件访问有严格限制，但还是有两种可行的方案，取决于你是只想指定文件名，还是需要自定义具体的存储路径：

方案1：仅预定义文件名（使用默认下载路径）

如果只是想固定文件名，不需要改变默认下载目录，直接用chrome.downloads.download()就能实现，关键是设置saveAs: false来跳过用户选择弹窗。

步骤：

在manifest.json中声明权限：
确保你的扩展已经申请了downloads权限：
```
{
  "permissions": ["downloads"]
}
```

录屏完成后处理Blob并触发下载：
假设你用MediaRecorder完成录屏，得到了视频Blob，先把它转成可下载的URL，然后调用API：

// 录屏结束后获取视频Blob（recorderChunks是MediaRecorder收集的片段）
const videoBlob = new Blob(recorderChunks, { type: 'video/webm' });
const videoUrl = URL.createObjectURL(videoBlob);

// 调用downloads API，指定文件名并跳过保存弹窗
chrome.downloads.download({
  url: videoUrl,
  filename: '我的录屏视频.webm', // 这里设置你想要的固定文件名
  saveAs: false // 关键参数：跳过用户选择保存位置的弹窗
}, (downloadId) => {
  if (chrome.runtime.lastError) {
    console.error('下载失败:', chrome.runtime.lastError);
  } else {
    console.log('下载已触发，ID:', downloadId);
    // 记得释放URL对象，避免内存泄漏
    URL.revokeObjectURL(videoUrl);
  }
});

这样视频会直接保存到用户Chrome设置里的默认下载文件夹，文件名就是你指定的内容，不会弹出选择窗口。

方案2：自定义存储路径（需要用户授权）

如果必须要指定自定义的本地路径，Chrome不允许扩展直接硬编码路径（安全限制），但可以通过File System Access API让用户一次性授权一个目录，之后扩展就能在这个目录下自由创建/写入文件，不需要每次都弹窗。

步骤：

在manifest.json中声明相关权限：
需要申请fileSystem.write权限（Chrome 86+支持）：
```
{
  "permissions": ["fileSystem.write"]
}
```

请求用户授权目标目录并持久化存储：
第一次使用时，让用户选择要保存录屏的目录，然后把目录句柄存在chrome.storage.local里，下次就不用再选了：

async function getTargetDirectory() {
  // 先尝试从存储中读取已授权的目录句柄
  const storedHandle = await chrome.storage.local.get('recordingDir');
  if (storedHandle.recordingDir) {
    // 验证句柄是否还可用（比如用户可能删除了目录）
    try {
      await storedHandle.recordingDir.queryPermission({ mode: 'readwrite' });
      return storedHandle.recordingDir;
    } catch (e) {
      // 权限失效，重新请求
    }
  }

  // 请求用户选择目录
  const handle = await window.showDirectoryPicker({
    mode: 'readwrite',
    suggestedName: '录屏存储目录'
  });

  // 保存句柄到本地存储，下次复用
  await chrome.storage.local.set({ recordingDir: handle });
  return handle;
}

将录屏Blob写入指定目录的文件：
录屏完成后，获取目录句柄，然后创建/写入文件：

async function saveRecordingToCustomDir(videoBlob) {
  try {
    const dirHandle = await getTargetDirectory();
    // 创建或覆盖指定文件名的文件
    const fileHandle = await dirHandle.getFileHandle('我的录屏视频.webm', { create: true });
    // 创建可写流并写入Blob
    const writable = await fileHandle.createWritable();
    await writable.write(videoBlob);
    await writable.close();
    console.log('录屏已保存到自定义目录');
  } catch (e) {
    console.error('保存失败:', e);
  }
}

// 录屏结束后调用
saveRecordingToCustomDir(videoBlob);