离线状态下，同步暂停并将状态队列保存到本地，恢复网络后手动合并本地和远程数据。

Stack Overflow Blog2026年5月12日

构建一个能在MV3服务工作器环境下稳定运行的Google Drive同步引擎

8.5Score

TL;DR · AI 摘要

本文介绍了如何构建一个能够在MV3服务工作器环境下稳定运行的Google Drive同步引擎，重点在于内存状态管理、离线处理和使用原生Fetch替代Google SDK。

核心要点

MV3强制采用严格的磁盘优先模型，所有用户操作立即保存到本地存储。
离线状态下，同步暂停并将状态队列保存到本地，恢复网络后手动合并本地和远程数据。
移除官方Google API客户端，改用原生Fetch以提高性能和减少依赖包大小。

结构提纲

按章节快速跳转。

§内存状态的终结
MV3强制采用严格的磁盘优先模型，所有用户操作立即保存到本地存储。
§处理离线掉线
离线状态下，同步暂停并将状态队列保存到本地，恢复网络后手动合并本地和远程数据。
§放弃Google SDK，使用原生Fetch
移除官方Google API客户端，改用原生Fetch以提高性能和减少依赖包大小。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）

Google Drive Sync Engine
- In-Memory State
  - Disk-First Model
- Offline Handling
  - Manual Merge
- Native Fetch
  - Performance Improvement

金句 / Highlights

值得收藏与分享的关键句。

MV3将随时杀死服务工作器以释放内存，因此必须将所有用户操作立即保存到本地存储。
— 第 1 节
⬇︎ 下载 PNG 𝕏 分享到 X
离线状态下，同步暂停并将状态队列保存到本地，恢复网络后手动合并本地和远程数据。
— 第 2 节
⬇︎ 下载 PNG 𝕏 分享到 X
移除官方Google API客户端，改用原生Fetch以提高性能和减少依赖包大小。
— 第 3 节
⬇︎ 下载 PNG 𝕏 分享到 X

#Chrome MV3#Service Worker#Google Drive#Sync Engine

打开原文

构建一个能在 MV3 服务工作器中存活的 Google Drive 同步引擎 - Stack Overflow

博客

[](https://stackoverflow.com/)[](https://stackoverflow.blog/feed)[](https://stackoverflow.com/users/email/settings/current)

登录注册

Stack Overflow 企业版

**Stack 内部**: 为企业 AI 提供动力的知识智能层。**Stack 数据许可**: 数十年验证过的技术知识，提升 AI 性能和信任度。**Stack 广告**: 在开发者的日常工作中吸引他们。

2026年5月12日

构建一个能在 MV3 服务工作器中存活的 Google Drive 同步引擎

迁移到 Chrome 的 Manifest V3 (MV3) 不仅仅是一个简单的语法更新。它完全打破了我们以前构建浏览器扩展的方式。

对于简单的工具，修复起来很容易。但当你构建一个以离线优先的应用程序，该应用不断与 Google Drive 通信时，MV3 强制你抛弃所有关于状态管理、网络中断和依赖项的知识。

这里展示了我为了使云同步引擎在 MV3 服务工作器的严格限制下平稳运行所做出的权衡。

1. 内存状态的终结

在 MV2 时代，在后台脚本变量中保持同步队列是一种标准做法。现在你不能这么做了。MV3 可以随时杀死你的服务工作器以释放内存。如果用户剪辑了一个网页，而工作器在上传完成之前死亡，那么数据就永远丢失了。

你必须转向严格的磁盘优先模型。chrome.storage.local 成为你唯一的真相来源。

我不得不将应用程序连接起来，使得任何用户操作——剪辑文本、输入笔记或使用语音输入——都立即保存到本地存储中。同步到云端则严格在后台作为次要任务进行。由于服务工作器不持有任何状态，浏览器可以唤醒它，检查本地存储中的待同步项目，触发上传，然后死亡。整个过程中不会丢失数据。

2. 处理离线中断

你永远不能信任网络，尤其是在运行在不稳定 Wi-Fi 或笔记本电脑休眠的浏览器扩展上。

如果用户掉线，扩展会立即停止同步并将状态排队到本地。最难的部分是重新上线。如果你盲目地将本地更改推送到云端，可能会覆盖用户从另一台笔记本电脑所做的更新。

我最终编写了一个快速脚本来手动合并这些更改。当连接恢复时，代码会从 Drive 中的 appDataFolder 拉取现有的 JSON。然后我将本地笔记和远程笔记一起放入一个 Map 中。因为我的笔记 ID 基本上只是时间戳，排序非常简单并且自然处理重复项。一旦所有内容合并成一个数组，我就将其上传回 Google。虽然有点粗糙，但它完全阻止了意外覆盖——即使 Chrome 在同步中间关闭了后台脚本。

3. 放弃 Google SDK 使用原生 Fetch

我做出的最大权衡是完全剥离官方的 Google API 客户端。

当然，SDK 让生活更轻松，但它们很大。将庞大的依赖树塞入 MV3 服务工作器会减慢执行速度并增加包大小。这完全违背了新清单的性能目标。

因此，我严格使用原生 fetch API 来与 Google Drive v3 REST API 通信。这让扩展变得异常快速和轻量级。但有一个陷阱？如果你想在同一个请求中上传元数据和文件内容，你需要手动构建 multipart/related HTTP 身体。

这意味着用纯 JavaScript 手动处理字符串边界，并确保换行符 (\r\n) 完美无缺。

javascript

// 构建原始多部分字符串
const boundary = 'sync_boundary_' + Date.now();
const delimiter = "\r\n--" + boundary + "\r\n";
const close_delim = "\r\n--" + boundary + "--";

const bodyString = delimiter + 
    'Content-Type: application/json; charset=UTF-8\r\n\r\n' + 
    JSON.stringify(metadata) + delimiter + 
    'Content-Type: application/json\r\n\r\n' + 
    JSON.stringify({ notes: localData }) + close_delim;

像这样手动编写原始 HTTP 请求实际上相当麻烦，尤其是当你知道 drive.files.create() 在 SDK 中只需一行代码就能完成时。但摆脱所有这些依赖项的负担使扩展程序能够瞬间启动，所以这是一个我愿意再次做出的权衡。

在约束下进行工程设计

Manifest V3 初次使用时感觉很受限。然而，将其视为一个严格的约束会促使更好的设计。通过接受状态将会消失、编写防御性的离线检查以及放弃沉重的库，你可以构建出真正感觉像是浏览器原生功能的云集成。

有兴趣投稿吗？ 提交一篇文章的想法，我们未来可能会联系你。

使用你的 stackoverflow.com 账户来建议一篇文章。

作者

Najmul Alam Miraj ![Image 1: Najmul Alam Miraj 的照片 Najmul Alam Miraj 是一位专注于使用现代 UI/UX 和离线优先架构构建有意义的数字解决方案的孟加拉国科技产品开发者。他曾担任前端开发人员、前端开发讲师和资深图形设计师……](https://stackoverflow.blog/author/najmul-alam-miraj/ "查看完整简介和文章")

The Heap 编程

加入讨论

使用你的 stackoverflow.com 账户参与讨论。

我们的堆栈

公司

支持

其他地方

博客
开发者通讯
播客
发布
[开发者调查](https://survey.stackoverflow.co/ "年度开发者调查")

浅色深色自动

[](https://linkedin.com/company/stack-overflow/ "LinkedIn")[](https://x.com/stackoverflow/ "Twitter/X")[](https://www.threads.net/@thestackoverflow "Threads")[](https://www.instagram.com/thestackoverflow/ "Instagram")[](https://www.youtube.com/c/StackOverflowOfficial "YouTube")

点击“接受所有 Cookie”，即表示您同意 Stack Exchange 可以根据我们的 Cookie 政策在您的设备上存储 Cookie 并披露相关信息。

接受所有必需的 Cookie 仅

自定义设置

Cookie 同意偏好中心

当你访问我们的任何一个网站时，它可能会在你的浏览器中存储或检索信息，通常是以 cookie 的形式。这些信息可能涉及你、你的偏好或你的设备，并且主要用于使网站按预期运行。这些信息通常不会直接识别你，但可以为你提供更个性化的网络体验。因为我们尊重你的隐私权，你可以选择不允许某些类型的 cookie。点击不同的类别标题以了解更多信息并管理你的偏好。请注意，阻止某些类型的 cookie 可能会影响你在网站上的体验以及我们能够提供的服务。

Cookie 政策

管理同意偏好

#### 必要的 Cookie

始终启用

这些 cookie 对网站的功能至关重要，无法在系统中关闭。它们通常仅在你执行请求服务的操作时设置，例如设置隐私偏好、登录或填写表单。你可以将浏览器设置为阻止或提醒你这些 cookie，但这可能导致网站的部分功能无法正常工作。这些 cookie 不会存储任何个人身份信息。

#### 功能性 Cookie

[x] 功能性 Cookie

这些 cookie 使网站能够提供增强的功能和个性化服务。它们可能由我们或我们页面上添加的第三方提供商设置。如果你不允许这些 cookie，则某些或所有这些服务可能无法正常运行。

#### 目标性 Cookie

[x] 目标性 Cookie

这些 cookie 用于使广告信息更加符合你的兴趣，可能由我们或我们的广告合作伙伴通过我们的网站设置。它们可能用于构建你的兴趣档案并在我们的网站或其他网站上向你展示相关广告。它们不会直接存储个人信息，而是基于唯一标识你的浏览器和互联网设备。

#### 性能 Cookie

[x] 性能 Cookie

这些 cookie 允许我们统计访问量和流量来源，以便我们可以衡量和改进网站性能。它们帮助我们了解哪些页面最受欢迎，哪些最不受欢迎，以及访客如何在网站上移动。这些 cookie 收集的所有信息都是汇总的，因此是匿名的。如果你不允许这些 cookie，我们将无法知道你何时访问过我们的网站，也无法监控其性能。

Cookie 列表

清除

- [x] 复选框标签

应用取消

同意法律利益

[x] 复选框标签

[x] 复选框标签

[x] 复选框标签

仅必要 cookie 确认我的选择