我用 AI 逆向 Upwork 消息系统，2 小时搞定数据层开发
前言
作为 Upwork 自由职业者，我一直觉得它的消息管理界面信息量太大，不够直观。我想做一个 Chrome 插件来简化消息管理，核心需求很简单：一眼看出哪些对话需要我回复，哪些在等对方。
传统做法是下载混淆后的 JS 文件慢慢分析，但这次我决定换个思路——全程和 AI 配合，看看能多快搞定。
结果远超预期。从零开始到完全摸清 API、认证方式、数据结构，总共不到 2 小时。
第一步：摸清技术栈（5 分钟）
打开 Upwork 消息页面，F12 看 Sources 面板，从加载的 JS 文件名就能判断出技术栈：
ThunderNuxt/rooms.fdb6ff58.js ThunderNuxt/realtime.fa79131f.js ThunderNuxt/composer.9c0ad3d8.js
'Thunder' 是 Upwork 消息系统的内部代号，基于 Nuxt.js（Vue 2 SSR 框架）。实时通信用了两条 WebSocket 连接，都基于 Atmosphere.js 框架：
wss://tl.upwork.com/wp?app=thunder&... // 消息主通道
wss://tl.upwork.com/wp?app=global-dash-api&... // 通知/监控
同时还加载了 Forter、Incognia 两套反欺诈 SDK 和 OneTrust 隐私合规组件。整体架构很清晰。
关键发现：不需要下载和分析任何 JS 文件。 那些代码都是混淆压缩过的，变量名全是 o4Y、H1l 这种乱码。我需要的只是数据从哪来、长什么样。
第二步：找到 Vue 实例和 Store（15 分钟）
Upwork 消息页面实际上有两个独立的 Vue 应用——顶部导航栏是一个微前端（spa_user.umd.js），消息主体是另一个。直接用 document.querySelector('#app').__vue__ 是找不到的。
最终通过遍历 DOM 定位到正确的入口：
void function() {
let s = null;
document.querySelectorAll('div').forEach(el => {
if (el.__vue__ && el.__vue__.$store && !s) {
s = el..;
}
});
(s) {
.(, .(s...));
.(, .(s.));
.(, .(s.));
}
}();
