Chrome最大化时上传图片导致Svelte扩展崩溃的原因排查

样式冲突排查 #

• 检查popup.css及组件样式中是否存在overflow: hidden、position: fixed/absolute等属性，这类属性可能在Chrome窗口最大化时导致预览容器被截断。建议给预览容器添加max-width: 100%、height: auto的自适应样式，避免硬编码尺寸。
• 确认预览组件的z-index层级是否足够高，防止被Chrome默认UI元素遮挡，可设置z-index: 9999并确保父容器未限制层级。

Svelte组件渲染逻辑检查 #

• 确保ImagePreview.svelte中图片加载逻辑在onMount钩子内执行，避免DOM未挂载时操作元素。
• 点击上传时的状态更新后，可调用await tick()等待DOM重渲染完成，再执行图片预览的渲染逻辑，避免响应式更新延迟。

Chrome扩展容器限制处理 #

• 在manifest.json中显式指定popup的default_width和default_height，避免浏览器自动调整尺寸引发布局异常：

  "action": {
    "default_popup": "src/routes/popup.html",
    "default_width": 400,
    "default_height": 600
  }
  

• 排查代码中是否依赖window.innerWidth/window.innerHeight这类动态值，DevTools开启时此类值会变化，可能导致预览布局计算错误。

文件读取流程验证 #

• 对比拖拽和点击上传的FileReader逻辑，确保两者的文件读取、base64生成流程完全一致，可在读取完成后打印日志确认数据正常。
• 给预览图片元素添加onerror事件监听，捕获加载错误信息，排查是否存在MIME类型判断错误或文件读取异常。

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