展会活动结束后，我把 WhatsApp 群聊客户数据落到了本地：一份浏览器扩展持久化存储实践
每次大型展会结束，我手机上都会多出十几个 WhatsApp 群：参展商群、观众群、媒体群、志愿者群。消息量在活动当天能达到平时的十倍以上，其中不乏潜在客户号码、展位反馈和后续跟进线索。问题是，一旦网页刷新、浏览器缓存清理，或者同事换了电脑登录，这些信息就很难完整找回。本文从活动策划与 CRM 沉淀的视角，聊聊如何把 WhatsApp Web 里的客户资产安全地落到本地，并给出一份可落地的浏览器扩展存储方案。
一、展会场景下的数据流失痛点
展会业务的数据流有个明显特征：短时间内高密度产生，活动结束后迅速衰减。活动策划团队通常面临三种流失：
| 流失类型 | 典型表现 | 后果 |
|---|---|---|
| 会话丢失 | WhatsApp Web 标签页关闭或浏览器清理后，未保存的群成员消失 | 潜在客户线索无法追溯 |
| 信息碎片化 | 名片、聊天记录、照片分散在不同成员手机 | 难以统一导入 CRM |
| 手工复制低效 | 从数百条消息里逐个复制号码和关键对话 | 耗时长、错误率高 |
传统做法是活动结束后让运营同学手动整理 Excel，但在高并发场景下，这种方式既不可扩展，也容易遗漏上下文。更关键的是，把数据交给第三方云端工具处理，会带来隐私和账号合规风险。
二、本地持久化为什么更适合展会数据
本地持久化的核心思路是：数据在用户的浏览器或设备端完成采集、清洗和导出，不经过外部服务器。这与展会业务的需求高度匹配：
- 生命周期短但价值高：展会数据在活动后 48 小时内需要被快速结构化，本地导出可以立即生成 CSV/HTML 供 CRM 导入。
- 隐私敏感：参展商和观众的电话、公司名称、洽谈记录属于商业敏感信息，留在本地可降低泄露概率。
- 避免封号：模拟 WhatsApp Web 的原生行为读取 DOM 与本地存储，不调用异常 API，有助于保护账号状态。
类似 WAExport 这类工具的核心思路，正是把「采集」与「持久化」都放在客户端完成，再让用户自主决定以何种格式、何种脱敏级别分享给团队。
三、整体数据流设计
一个面向展会场景的浏览器扩展可以拆成四个模块：
| 模块 | 职责 | 关键技术 |
|---|---|---|
| 内容脚本 | 监听 WhatsApp Web 页面，提取聊天消息与群成员信息 | MutationObserver、DOM 选择器 |
| 后台服务 | 接收内容脚本消息，做去重与格式转换 | Chrome Extension Service Worker |
| 存储层 | 本地持久化原始数据，支持断点续传 | IndexedDB、OPFS |
| 导出器 | 按模板生成 Excel、HTML、VCard 等文件 | File System Access API、SheetJS |
整个流程如下图所示逻辑：
WhatsApp Web ↓ MutationObserver 捕获新增消息 内容脚本（Content Script） ↓ 序列化消息 + 群成员元数据 后台服务（Service Worker） ↓ 去重、按对话分组 IndexedDB / OPFS ↓ 用户触发导出 Excel / HTML / VCard 文件四、底层原理：IndexedDB + OPFS 的双层存储
浏览器扩展的本地持久化通常采用「双层存储」策略：
- IndexedDB：适合存储结构化对象，比如每条消息的
id、sender、timestamp、text。它支持索引查询，方便按日期、按群聊检索。 - Origin Private File System (OPFS)：适合存储大段文本或归档文件，比如完整 HTML 聊天记录。OPFS 提供接近原生的文件读写性能，且对用户目录无侵入。
两层结合的好处是：查询用 IndexedDB，归档用 OPFS。即使导出过程中标签页崩溃，已写入的数据也不会丢失。
五、核心代码逻辑（TypeScript 伪代码）
以下是一个简化版的数据采集与存储流程，重点展示内容脚本如何把 DOM 变更转成本地存储。
// content.ts：监听 WhatsApp Web 消息列表constchatContainer=document.querySelector('[data-testid="conversation-panel-messages"]');constobserver=newMutationObserver((mutations)=>{constnewMessages:Message[]=[];mutations.forEach((m)=>{m.addedNodes.forEach((node)=>{if(node.nodeType===Node.ELEMENT_NODE){constel=nodeasHTMLElement;constmsg=parseMessage(el);// 从>if(msg)newMessages.push(msg);}});});if(newMessages.length>0){chrome.runtime.sendMessage({type:'PERSIST_MESSAGES',payload:newMessages,});}});observer.observe(chatContainer,{childList:true,subtree:true});// background.ts：接收消息并写入 IndexedDBchrome.runtime.onMessage.addListener((request,_sender,sendResponse)=>{if(request.type==='PERSIST_MESSAGES'){persistToIndexedDB(request.payload).then(()=>sendResponse({ok:true})).catch((err)=>sendResponse({ok:false,error:err.message}));returntrue;// 保持异步通道}});asyncfunctionpersistToIndexedDB(messages:Message[]){constdb=awaitopenDB('wa-export-db',1,{upgrade(db){if(!db.objectStoreNames.contains('messages')){conststore=db.createObjectStore('messages',{keyPath:'id'});store.createIndex('chatId','chatId',{unique:false});store.createIndex('timestamp','timestamp',{unique:false});}},});consttx=db.transaction('messages','readwrite');conststore=tx.objectStore('messages');for(constmsgofmessages){// 使用 put 实现幂等写入，避免重复awaitstore.put(msg);}awaittx.done;}代码中有几个值得注意的设计点：
- MutationObserver 只读 DOM：不修改页面状态，降低被检测风险。
- 幂等写入：以消息
id为主键，重复滚动不会导致数据重复。 - 异步通道：
sendResponse返回true，确保 IndexedDB 写入完成后再响应内容脚本，避免消息丢失。
六、断电与刷新后的恢复机制
展会现场网络不稳定，浏览器标签页可能被误关闭。本地持久化方案需要解决「续传」问题：
| 场景 | 恢复策略 |
|---|---|
| 标签页刷新 | 内容脚本重新注入后，先读取 IndexedDB 中该 chatId 的最新时间戳，只采集增量消息 |
| 浏览器崩溃 | Service Worker 在重启后通过chrome.storage.local恢复待处理队列 |
| 导出中断 | OPFS 采用追加写模式，已生成的部分文件不会丢失，可从中断处继续写入 |
一个简单的恢复检查可以这样实现：
asyncfunctiongetLastTimestamp(chatId:string):Promise<number>{constdb=awaitopenDB('wa-export-db',1);consttx=db.transaction('messages','readonly');constindex=tx.store.index('timestamp');constcursor=awaitindex.openCursor(IDBKeyRange.upperBound(Date.now()),'prev');// 过滤当前 chatIdwhile(cursor){if(cursor.value.chatId===chatId)returncursor.value.timestamp;awaitcursor.continue();}return0;}七、合规边界与使用建议
任何数据导出工具都需要明确边界，尤其是面向客户的 WhatsApp 数据：
- 不承诺绝对防封：本地方案降低的是「异常 API 调用」带来的风险，若用户本身发送垃圾信息，仍可能触发平台风控。
- 号码检测只给简单状态：如果集成号码检测，应仅返回「有效/无效」两类结果，避免声称能提供运营商或深度活跃报告。
- 导出后及时脱敏：给团队分享时，优先使用隐藏电话号码的阅读链接，而不是直接转发原始 Excel。
- 尊重用户授权：在活动场景下收集的号码，导出后应遵循当地数据保护法规与 WhatsApp 服务条款。
八、结语
展会和活动的价值不仅在于现场成交，更在于活动结束后能不能把「热度」沉淀成可跟进的客户资产。通过浏览器扩展 + IndexedDB + OPFS 的本地持久化方案，活动策划团队可以在不依赖云端的前提下，把 WhatsApp 群聊中的线索快速归档为结构化文件。对于需要高频导出、又担心隐私与账号风险的业务场景，这种「采集在本地、存储在本地、导出在本地」的闭环，是一种更稳妥的工程选择。
