浏览器扩展Popup调用AWS Amplify上传S3中断问题求优化方案

最优方案：修复后台脚本调用AWS Amplify的问题 #

你遇到的后台脚本无法调用Amplify API的问题，基本是因为Amplify默认依赖浏览器window全局对象导致的，只需做适配即可正常在后台运行：

• Manifest V2场景：后台本身是带完整window上下文的后台页，只需在后台页仅引入@aws-amplify/core和@aws-amplify/storage模块（不要引入带UI组件的Amplify模块），完成初始化后即可直接调用Storage.put()方法
• Manifest V3 Service Worker场景：初始化Amplify时开启SSR适配即可兼容无window的运行环境，示例配置：

import { Amplify } from '@aws-amplify/core';
import '@aws-amplify/storage';

Amplify.configure({
  // 你的原有AWS配置
  ssr: true // 关键配置，兼容无DOM环境
});

适配完成后逻辑如下：

1. 弹窗拿到用户输入后，通过chrome.runtime.sendMessage将上传参数传给后台脚本
2. 后台执行Storage.put()，将上传进度、状态临时存在内存变量中，同时持久化到chrome.storage.local
3. 弹窗关闭后不影响后台任务运行，下次打开弹窗时主动向后台拉取当前上传进度即可同步状态

替代方案：使用Offscreen文档运行上传逻辑 #

如果始终无法完成后台脚本的Amplify适配，可以使用Manifest V3提供的chrome.offscreenAPI（火狐109+版本已支持）：

• 扩展内新增一个空白的静态HTML页面作为离屏页面，在页面内完成Amplify初始化和上传逻辑的封装，该页面拥有完整的浏览器上下文，可正常运行所有Amplify能力，且生命周期和扩展绑定，不会因弹窗、普通标签页关闭而终止
• 用户触发上传时，弹窗先调用chrome.offscreen.createDocument创建离屏页面，将上传参数发送给离屏页面执行上传
• 上传进度同样可通过后台中转存储，弹窗重新打开时主动拉取状态即可
  该方案完全不需要用户感知额外页面，体验远优于打开新标签页提示用户不要关闭的方案，也不会出现content script随标签页终止的问题。

额外优化建议 #

• 可以给Storage.put()配置resumable: true开启断点续传，结合chrome.storage.local持久化的上传进度，就算浏览器意外退出，下次启动也可以继续未完成的上传
• 上传过程中可以通过扩展图标上的badge显示上传进度，用户不需要打开弹窗也能感知上传状态

内容的提问来源于stack exchange，提问作者rb.611