利用 Chrome DevTools 把微博打包成 zip 文件

zgq354

发布于 2020-02-17 11:52:39

1.3K0

发布于 2020-02-17 11:52:39

文章被收录于专栏：0x0001

过去在微博遇到许多有趣的内容，但常常因为时间太久远，回看收藏链接往往返回的是404，记忆也随之变成了一个个空洞。脑洞打开，是不是可以把一条微博涉及到的各种文件一键打包下载，在本地阅读呢，就像 docx 文档格式一样。

技术方案

从尽可能简单的角度解决问题的角度出发，能在浏览器端完成的话最好，不需要依赖什么脚本和平台，额外花时间去梳理各种业务逻辑相关的琐事。从此出发，在数据来源方面，选择更简单的手机版；保存数据，优先考虑在浏览器端用文件相关的 API 实现。

理论上来说，文件的本质是一系列二进制数据集合，HTML5 FileAPI 提供了处理二进制数据对象的 Blob。在浏览器环境中字符串可以构造成 Blob，微博中涉及到的图片和视频文件的数据也通过 Blob 的方式处理。

有了 Blob 这一层抽象，文件打包压缩的需求，也用 Blob 的方式去实现的话会更自然一些。寻找已有的解决方案，发现 JSZip，它支持创建 zip 的文件，在输入输出的表达上支持包括 Blob 在内的多种格式，也支持 ArrayBuffer, Base64, 字节数组等等方式的表达，省下不少自己处理的功夫。

文件下载方面，可以用 URL.createObjectURL 基于 Blob 创建一个 Object URL，然后创建一个 <a> 元素，触发 click 事件下载，得到最终的文件。

把数据源与保存的方式都理清楚，大致有了一个流程，就可以动手了。

在运行环境方面，不需要额外安装什么，只需要一个 DevTools 即可，开发者工具提供了 Snippets（代码片段）功能，可以直接在里面写那些需要在注入到页面的代码片段然后运行，很方便。参考这篇文章

下面是实现的思路：

数据的获取

1. 基础数据

微博移动版为减少请求，会在 HTML 输出该条微博的信息，在 $render_data.status 里。

2. 评论与转发

直接上 Networks 面板，定位到相关的 HTTP 请求，然后右键 Copy as fetch，即可得到基于 fetch 的请求代码。

把代码梳理之后抽象成如下函数：

async function fetchWeibo(url) {
  return await fetch(
    url,
    {
      credentials: "include",
      headers: {
        accept: "application/json, text/plain, */*",
        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
        "mweibo-pwa": "1",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-origin",
        "x-requested-with": "XMLHttpRequest",
        "x-xsrf-token": getCookie('XSRF-TOKEN')
      },
      referrer:
        `https://m.weibo.cn/status/${$render_data.status.bid}`,
      referrerPolicy: "no-referrer-when-downgrade",
      body: null,
      method: "GET",
      mode: "cors"
    }
  ).then(r => r.json());

  function getCookie(key) {
    return document.cookie
      .split("; ")
      .map(item => item.split("="))
      .reduce((accu, curr) => {
        accu[curr[0]] = curr[1];
        return accu;
      }, {})[key];
  }
}

async function fetchWeiboComments(max_id = 0, max_id_type = 0) {
  return await fetchWeibo(
    `https://m.weibo.cn/comments/hotflow?id=${$render_data.status.id}&mid=${$render_data.status.mid}&max_id=${max_id}&max_id_type=${max_id_type}`
  );
}

由于分页的关系，实际抓取时需要传最后一条评论的 id 才可获取下一页，考虑到热门的微博评论和转发太多，直接抓取并不现实，且会给服务器带来额外的压力，微博的 robots.txt 不给我们这么干，本着学习研究的初心，这里抓两页就收工。

评论与转发也同理，这里就不贴了。

3. 图片与视频等资源的获取

在 $render_data.status.pics 我们可得到微博配图的 URL，$render_data.status.page_info.media_info，可以得到视频的 URL。遍历的时候 fetch ，相应请求的时候调用 response.blob() 让这个请求返回对应的 Blob。

但这里有个问题，微博配图和视频都不是同一个域名之下的资源，会受到 CORS 机制的限制，微博返回的请求也没有对应的 CORS 头部，自然会被拦截。

为了解决跨域拦截问题，找到一个代理工具 Cors Anywhere，它提供一个 HTTP 服务，只需要在目标 URL 前加入它的地址，按原样请求原始地址，并在返回的响应头中加上对应的 Access-Control-Allow-Origin:。

抓取的请求可以包装为一个函数，corsProxyServer 即 Cors Anywhere 的地址：

const corsProxyServer = '';
async function fetchBlob(url) {
  return await fetch(`${corsProxyServer}${url}`, {
    credentials: "omit",
    referrer: `https://m.weibo.cn/detail/${$render_data.status.id}`,
    referrerPolicy: "no-referrer-when-downgrade",
    body: null,
    method: "GET",
    mode: "cors"
  }).then(r => r.blob());
}

项目主页提供了一个运行在 Heroku 的例子，一般图片都比较大，测试发现下载速度感人，不如在本地搭建一个。

搭建很简单，git clone, npm install 运行一把梭，但是就有一个问题，本地运行的服务开放的端口是 http 的，在 https 的站点对一个 http 的站点发 XHR 会被拦截，需要考虑域名与 https 证书的配置，带来的则是一堆繁琐的事情。

我只是想跑一个小服务，能不能简单点？当然能！这时候祭出一大神器：whistle。

whistle 是一个基于 Node 实现的 Web 请求调试代理工具，支持 HTTP, HTTPS, WebSocket 的请求的修改和转发，通过编写 whistle 配置，可以实现各种非常灵活的功能。

一条 whistle 配置解决一切蛋疼：

cors.proxy 127.0.0.1:8888

打包压缩

（我只是一个调包侠

const zip = new JSZip();
zip.file("content.json", statusDataBlob);
zip.file("interaction.json", interactionDataBlob);

const picsFolder = zip.folder("pics");
imgBlobList.forEach(item => {
  const { pid, smBlob, lgBlob } = item;
  picsFolder.file(`${pid}.${smBlob.type.split('/')[1]}`, smBlob);
  picsFolder.file(`${pid}.large.${lgBlob.type.split('/')[1]}`, lgBlob);
});

const videosFolder = zip.folder("videos");
videoBlobList.forEach(item => {
  const { bid, videoBlob, videoHDBlob } = item;
  videosFolder.file(`video-${bid}.${videoBlob.type.split('/')[1]}`, videoBlob);
  videosFolder.file(`video-${bid}-hd.${videoHDBlob.type.split('/')[1]}`, videoHDBlob);
});

const finalResultBlob = await zip.generateAsync({
  type: "blob",
});

下载

开头已介绍过思路，直接上代码：

const a = document.createElement('a');
a.download = `weibo-${$render_data.status.bid}-${dateStr}.zip`;
a.href = URL.createObjectURL(finalResultBlob);
a.click();