必须启用Chrome的File System Access API实验性开关并重启浏览器,否则showOpenFilePicker等API调用直接失败;再按站点粒度手动授权Local file system权限,或对file://协议添加路径白名单,开发时还可通过--unsafely-treat-insecure-origin-as-secure参数临时解除不安全源限制。

要在网页中直接编辑本地文件(比如用在线代码编辑器保存修改到原路径),必须让Chrome允许网页调用showOpenFilePicker、showSaveFilePicker或showDirectoryPicker等API,否则点击保存按钮会静默失败或抛出“Permission denied”错误。
启用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,则配置成功。











