Chrome扩展开发：如何指定自定义数据存储路径？

Hey there, let's figure out how to get your Chrome extension saving files to a custom path instead of the default downloads folder. First, let's break down the limitations and the workable solutions:

核心限制说明 #

Chrome enforces security restrictions that prevent extensions from directly specifying absolute file paths (this avoids unauthorized access to your filesystem). But don't worry—we have two solid approaches to achieve your goal:

方案1：相对默认下载文件夹的自定义子路径 #

This is the simplest method, as it lets you save files to a subfolder within the default downloads directory (Chrome will auto-create the folder if it doesn't exist). You just need to add the filename parameter to your chrome.downloads.download() call, specifying the relative path.

Here's your modified code:

chrome.webRequest.onCompleted.addListener(
  function(details) {
    let fileUrl = details.url;
    // 从URL中提取文件名（你可以自定义这个逻辑）
    const fileName = fileUrl.split('/').pop();
    // 保存到默认下载文件夹下的"MyCustomDownloads"子文件夹
    chrome.downloads.download({
      url: fileUrl,
      filename: `MyCustomDownloads/${fileName}` // 这里是相对路径
    });
  },
  {urls: ["<all_urls>"]},
  ["responseHeaders"]
);

• 注意: 这里的路径是相对于用户默认下载文件夹的，不能使用C:\MyFiles或/home/user/Documents这类绝对路径。

方案2：让用户手动选择自定义文件夹（完全自定义路径） #

如果需要让用户选择系统上的任意文件夹，你得用到chrome.fileSystem API，这需要用户手动授权（这是Chrome的安全强制要求）。具体实现步骤如下：

1. 首先在manifest.json中添加所需权限：

{
  "permissions": [
    "webRequest",
    "<all_urls>",
    "downloads",
    "fileSystem",
    "fileSystem.write"
  ]
}

2. 然后更新扩展代码，请求文件夹权限并将文件保存到指定位置：

// 请求用户选择一个文件夹
async function getCustomFolder() {
  const folderEntry = await chrome.fileSystem.chooseEntry({
    type: 'openDirectory',
    acceptsAllTypes: true
  });
  // 持久化文件夹权限，方便后续访问
  await chrome.fileSystem.requestFileSystemAccess({
    entry: folderEntry,
    mode: 'readwrite'
  });
  return folderEntry;
}

// 下载并将文件保存到选中的文件夹
async function saveToCustomFolder(fileUrl, folderEntry) {
  // 获取文件内容
  const response = await fetch(fileUrl);
  const blob = await response.blob();
  // 在选中的文件夹中创建文件条目
  const fileEntry = await folderEntry.getFileHandle(fileUrl.split('/').pop(), { create: true });
  // 将blob写入文件
  const writable = await fileEntry.createWritable();
  await writable.write(blob);
  await writable.close();
}

// 初始化并设置监听器
let selectedFolder;
// 在扩展加载时调用（比如从弹窗或后台脚本触发）
async function init() {
  selectedFolder = await getCustomFolder();
}

chrome.webRequest.onCompleted.addListener(
  async function(details) {
    if (!selectedFolder) {
      // 如果还没选中文件夹，先提示用户选择
      selectedFolder = await getCustomFolder();
    }
    await saveToCustomFolder(details.url, selectedFolder);
  },
  {urls: ["<all_urls>"]},
  ["responseHeaders"]
);

• 注意: 这种方法要求用户首次使用时手动选择文件夹（如果你用requestFileSystemAccess，Chrome会记住这个权限）。你不能在无用户交互的情况下静默选择文件夹——这是Chrome的安全要求。

关键注意事项 #

• 始终在Chrome开发者模式下测试扩展，尽早发现权限问题。
• 使用chrome.fileSystem方案时，要处理用户取消文件夹选择对话框的情况。

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