要在网页中直接编辑本地文件，听起来很理想，但实际落地时却面临不少挑战。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 是两个完全独立的权限主体，需要分别处理。
方法一：适用于 https://localhost 或 https 站点
1、先确认已启用上一步的 Flag 并重启过浏览器。
2、打开目标网页（例如 https://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:// 或 https://localhost 时，Chrome默认将这些地址视为非安全上下文，从而禁止调用部分API。此步骤专为本地开发环境设计，生产环境必须使用HTTPS。
第一步：关闭所有Chrome进程
打开任务管理器（Ctrl+Shift+Esc），结束所有 chrome.exe 进程——漏掉一个后台进程会导致参数失效。
第二步：创建专用快捷方式
右键桌面Chrome图标 → 属性 → 在“目标”末尾添加空格及以下完整参数（请将端口号和路径按实际情况替换）：
--unsafely-treat-insecure-origin-as-secure="https://localhost:3000" --user-data-dir="C:/chrome-fs-dev" --allow-file-access-from-files
第三步：启动并验证
双击该快捷方式启动新Chrome实例 → 访问 https://localhost:3000 → 打开开发者工具（F12）→ 在控制台输入 window.showOpenFilePicker，若返回函数而非 undefined，则配置成功。
