要在网页中直接编辑本地文件，听起来很美好，但实际操作起来有不少坑。 Chrome默认把这类API关得死死的。你不主动去撬开它，点击保存按钮要么静默失败，要么直接抛个“Permission denied”。 基于实际开发经验来看，想顺利调用`showOpenFilePicker`这类API，必须从三个层面逐级打通权限。

启用Chrome实验性文件系统访问开关

别小看这一步，它是一切的基础。你不开启这个开关，后面所有授权操作都会卡壳。权限弹窗根本不会出现，API调用直接返回`undefined`或彻底拒绝。

1. 在Chrome地址栏输入 chrome://flags/#file-system-access 并回车。
2. 页面顶部搜索框中输入 file system access，快速定位到“File System Access API”条目。
3. 将下拉菜单从 Default 改为 Enabled。
4. 点击右下角 Relaunch 按钮重启浏览器——不重启则设置不生效。

为当前网页手动授予本地文件系统权限

Chrome按协议+域名+端口粒度管理授权。`localhost:3000` 和 `file:///C:/test/index.html` 是两个完全独立的权限主体，必须分别处理。

方法一：适用于 http://localhost 或 https 站点

1. 先确保已启用上一步的 Flag 并重启过浏览器。
2. 打开目标网页（例如 http://localhost:3000/editor.html）。
3. 点击地址栏左侧锁形图标 → 选择“站点设置” → 滚动到底部找到 Local file system 项。
4. 将该权限设为 Allow，关闭设置页后刷新网页。

方法二：适用于 file:// 协议本地网页（如双击打开的HTML文件）

1. 访问 chrome://settings/content/fileSystem 页面。
2. 点击“添加”按钮，在弹出框中输入完整路径，例如：file:///C:/my-project/（注意末尾斜杠不能少）。
3. 点击“添加”，该路径下所有HTML页面即可调用文件系统API。

启动Chrome时绕过不安全源限制（仅限开发调试）

当使用 `file://` 或 `http://localhost` 时，Chrome默认将这些视为非安全上下文，禁止调用部分API。此步骤专为本地开发环境设计，生产环境必须用HTTPS。

第一步：关闭所有Chrome进程

打开任务管理器（Ctrl+Shift+Esc），结束所有 `chrome.exe` 进程——漏掉一个后台进程会导致参数失效。

第二步：创建专用快捷方式

右键桌面Chrome图标 → 属性 → 在“目标”末尾添加空格及以下完整参数（请将端口号和路径按实际替换）：

--unsafely-treat-insecure-origin-as-secure="http://localhost:3000" --user-data-dir="C:/chrome-fs-dev" --allow-file-access-from-files

第三步：启动并验证

双击该快捷方式启动新Chrome实例 → 访问 `http://localhost:3000` → 打开开发者工具（F12）→ 控制台输入 window.showOpenFilePicker，若返回函数而非 `undefined`，则配置成功。