网页版微信抓包+注入实现表情贴纸显示 · Issue #2 · geeeeeeeeek/electronic-wechat (original) (raw)

作者：Zhongyi Tong (geeeeeeeeek@github)

协议：知识共享-署名 (CC BY 2.5 AU)

提示: 这是最初的实现方式。#13 中 @arrowrowe 提出了Angular注入的思路，取代了原先的DOM注入，极大地简化了逻辑并提升了性能。这份文档仅供参考。

由于微信协议变动，目前表情商店里的贴纸无法显示。

我们使用网页版微信登录时都会发现，聊天中的表情贴纸都无法显示，被替换成了一段[Sent a sticker. View on phone.]文本，提示你到手机上查看。原本以为微信在下发消息推送时根据终端做了手脚，但抓包的结果表明表情贴纸就在response中，只不过微信出于某些考虑，没有在前端解析出来。

受够了万年不更新bug一大堆的官方微信客户端，我最近用Electron封装了一个Mac和Linux下的WeChat客户端。做了很多本地化的工作，包括自适应窗口、docker上的消息计数，还有就是这个表情贴纸注入，效果如下图所示。由于还没有到production-ready的程度，所以先分享一篇技术文，介绍这个功能的实现。

请求分析

为了知道收到的是不是贴纸，以及是什么贴纸，我们先来分析Web WeChat发起的网络请求。打开Chrome的DevTools，Network选项卡，只需要关注XHR请求即可。

主要有下面两种请求：

GET https://webpush.weixin.qq.com/cgi-bin/mmwebwx-bin/synccheck
消息的同步请求，HTTP长连接，默认30s或需要同步时返回。
POST https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxsync
上面synccheck请求返回时，也就是有新消息时，微信发起一个webwxsync请求。在这个请求的response中，包含了我们需要的新消息数量AddMsgCount、消息IdMsgId、消息内容Content等等有用的内容。

我们具体看看一个表情贴纸的消息Content是怎样的：

这就很清晰了，头部表明自己是个emoji，然后是一些CheckSum的数据，后面跟着的cdnurl是贴纸的gif资源，thumburl是贴纸的缩略图。理论上拿到这些资源之后，我们就可以在页面中显示贴纸了。

Electron中的抓包

先放一个无关的提醒，如果你想在Electron中嵌入第三方网页，直接用browserWindow.loadURL即可，不要使用官方提供的webview标签。webview标签带来的输入法错位、窗口resize性能问题对产品体验的影响非常严重。

Electron的WebContents提供了did-get-response-details事件，但回调中只能获取到Response Headers，无法获取到Response Body。因此我们需要寻找一些tricky的方法来解决这个问题。我采用的方案是Chrome Debugging Protocol，这其实就是我们日常使用的DevTools为Chrome Apps暴露的一套API。只不过我们平时使用它的UI来调试，现在使用文本命令。

在Electron中我们可以这样连接debugger [docs]：

try { browserWindow.webContents.debugger.attach("1.1"); } catch (err) { console.log("Debugger attach failed : ", err); }

browserWindow.webContents.debugger.on('detach', (event, reason) => { console.log("Debugger detached due to : ", reason); });

browserWindow.webContents.debugger.on('message', (event, method, params) => { if (method == "Network.responseReceived" && params.type == "XHR") { // Code here. } });

browserWindow.webContents.debugger.sendCommand("Network.enable");

首先注册debugger，然后通过Network.enable开启记录Network日志，接收Network.responseReceived事件，类似于我们在DevTools Network选项卡中看到的请求。查看请求详情需要额外发送一个指令：

debug.sendCommand("Network.getResponseBody", { "requestId": requestId }, (error, response) => { // Code here. });

剩余的工作就是用正则表达式和一些逻辑判断从请求中获取到cdnurl，这里不再赘述，可以参考我的代码。

Electron中的页面注入

如何在Electron中向WebContents注入代码请参考[文档]。大致思路是在dom-ready和有新的贴纸消息到达时分别注入下面两行代码：

browserWindow.webContents.executeJavaScript(injectBundle.initEmojiListJS()); browserWindow.webContents.executeJavaScript(injectBundle.updateEmojiListJS('${JSON.stringify(emojiList)}'));

我们在浏览器环境中维护一个window.emojiList对象，emojiList[msgId] = imageUrl。在DOM中找到div.js_message_bubble且data-cm标签中包含相应msgId的组件，注入background等CSS使其显示贴纸。

我们要对页面上所有可见的贴纸消息气泡执行上述逻辑，因此注入的时机非常重要。Web WeChat是一个由Angular构建的应用，聊天气泡的加载是一个动态的过程，每次切换聊天，甚至是滚动聊天消息时，都会不断有节点的移除和加载。如果新加入的节点有贴纸消息的话，我们就需要及时注入。最后，我采用了一个对性能有些影响的解决方案：

新的贴纸消息到达时替换这个贴纸消息
切换聊天时替换所有贴纸消息
滚动聊天消息时替换所有贴纸消息

下面是注入部分的代码：

injectBundle.replaceEmojiMessageJS = (msgId, imageUrl, delay) => { setTimeout(()=> { let bubble=bubble = bubble=(div.js_message_bubble:regex("${msgId}")) .css('background', url('${imageUrl}') no-repeat) .css('background-size', '120px') .css('height', '120px') .css('width', '120px'); $bubble.addClass('no_arrow'); $bubble.find('pre').text('') .css('width', '120px'); }, delay); };

injectBundle.updateEmojiListJS = (newList)=> { newList = JSON.parse(newList); window.emojiList = $.extend(window.emojiList, newList); for (let msgId in newList) { injectBundle.replaceEmojiMessageJS(msgId, window.emojiList[msgId], 0); } };

injectBundle.initEmojiListJS = ()=> { $.expr[':'].regex = (elem, index, match) => { var regex = new RegExp(match[3]), elem=elem = elem=(elem); return regex.test($elem.attr('data-cm')); };

完整的项目请见electronic-wechat。