如何阻止Safari扩展弹窗在文件选择后关闭？

问题描述 #

我正在开发一款Safari Web Extension弹窗，在弹窗的基础表单中添加了file类型的<input>元素。点击该input打开浏览器文件选择窗口，选择文件并点击“上传”后，弹窗会直接关闭，重新打开时所有数据都会丢失。此处的弹窗是通过manifest.json定义的扩展弹窗。

可能的解决尝试 #

针对这个问题，可以从以下几个方向排查：

• 阻止表单默认提交行为：给表单绑定submit事件，调用event.preventDefault()阻止默认提交流程——弹窗本质是一个独立的小型页面，表单提交会触发页面刷新，进而导致弹窗关闭。
• 使用异步文件处理：放弃依赖表单默认上传，转而监听<input type="file">的change事件，通过FileReader API异步读取文件内容，避免触发页面刷新。
• 检查Safari特定限制：Safari的Web Extension弹窗生命周期与其他浏览器存在差异，可确认manifest.json中是否有影响弹窗持久化的配置，同时确保没有其他代码逻辑在文件选择后触发了弹窗关闭。

临时解决方案 #

编辑：我未能找到合适的解决方案，因此决定将扩展从弹窗改为按需注入页面的侧边栏，这将作为Safari修复该行为前的临时解决方案。

内容的提问来源于stack exchange，提问作者and-k