背景
作为 Upwork 的自由职业者,我一直觉得它的消息管理界面信息量太大,不够直观。我想做一个 Chrome 插件来简化消息管理,核心需求很简单:一眼看出哪些对话需要我回复,哪些在等对方。
传统做法是下载混淆后的 JS 文件慢慢分析,但这次我决定换个思路——全程和 AI 配合,看看能多快搞定。
结果远超预期。从零开始到完全摸清 API、认证方式、数据结构,总共不到 2 小时。
技术栈识别
打开 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 实例定位
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.__vue__.$store;
}
});
if (s) {
console.log('模块:', Object.keys(s._modules.root._children));
.(, .(s.));
.(, .(s.));
}
}();

