逆向抖店获取商家体验分数据的思路（一）

又有些日子没有写博客了，主要是真的没啥能写的东西。然后又考虑要做微信公众号，一直纠结再纠结。
其实这几个月也有很多东西是可以整理成文章的。干了几年开发，简单的编码能力基本上都有。
但是人与人之间的差距还是蛮大的，对于一个程序员来讲，感觉主要的还是思路。
正好这几天群里有人问一个问题：他们公司想做获取抖音广告流量主数据的功能，说其他公司已经实现了，他们在抖音开放平台没有找到这个API。领导觉得其他人都能做到，他们做不到，技术很菜。
我就试探性的问了一句，有尝试过逆向嘛？对方说还是第一次听说到逆向。
问他怎么看到的那个页面？跟我说：啊？在抖音后台啊~
嗯，真的很无语。很难想象到居然是一个两年开发经验的后端说的话。
众所周知，目前此类网站的数据大都取自接口。找到对应的接口即可拿到相关的数据~
这个话题到此结束，现在以我目前在搞的抖店为例。阐述一下我目前使用的方案~（仅作为个人研究娱乐，没有用于任何商业。）
首先，抖音的算法还是蛮多的。在Git上面能看到很多大神分享的计算token和生成cookie的思路技巧。
但是抖店这玩意儿目前用的人少啊~只有一些商家在用。所以网上找了好几天，有没有找到直接的教程。
目测网上已经有人能够生成cookie，但是收费的。单纯的研究，花那个钱干啥。而且这玩意儿也没啥售后，多少不太划算，直接pass掉。
既然无法自己生成cookie，那只能拿它的cookie了~我的思路是先写个chrome插件，然后获取当前浏览器标签页的cookie，拿着这个cookie去请求我的接口。我的接口取到cookie之后自然可以调他们的各个接口，并取到我要的数据啦。
本来一直没有写过chrome插件，正好趁这次也练练手。

经过我粗浅的研究发现，chrome插件其实也就几个文件：
manifest.json：这是Chrome插件的清单文件，定义了插件的基本信息、权限、资源文件等。它包含了插件的名称、版本、描述、图标以及插件所需的权限等信息。
popup.html：这是插件的弹出页面的HTML文件。当用户点击插件图标时，会弹出一个小窗口显示该页面内容。通常用于显示插件的主要功能或提供与插件相关的操作界面。
popup.js：这是弹出页面的JavaScript文件，用于实现与用户交互的功能。它包含了处理用户点击事件、向后台发送请求以及更新弹出页面内容等逻辑。
background.js：这是插件的后台脚本文件，用于在插件生命周期内处理各种事件和任务。例如，可以监听浏览器的各种事件，处理来自内容脚本或其他插件组件的消息，以及执行后台任务等。
icon.png：这是插件的图标文件，用于显示在浏览器工具栏或扩展管理页面上。它通常是插件的标识性图标，用于让用户识别和访问插件。

那就很简单了嘛，先是这样，然后那样，最后就好了~
上个代码吧，我写的cookie获取器：

manifest.json

{
  "manifest_version": 3,
  "name": "Cookie获取工具",
  "version": "0.0.1",
  "author": "youthme.cn",
  "description": "本工具用于一键获取任意网站的Cookie.",
  "permissions": [
    "cookies"
  ],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "action": {
    "default_title": "Cookie获取工具",
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

PS：这里我们用到了cookies权限。

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Grabber</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #cookieTextArea {
            width: 300px;
            height: 200px;
        }
        #copyButton {
            margin-top: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Cookie Grabber</h1>
    <textarea id="cookieTextArea" readonly></textarea>
    <br>
    <button id="getButton">Get Cookies</button>

    <script src="popup.js"></script>
</body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() {
  var cookieTextArea = document.getElementById('cookieTextArea');
  var getButton = document.getElementById('getButton');

  function showToast(message) {
    // 你的showToast函数保持不变
  }

  // 修改后的getButton事件监听器
  getButton.addEventListener('click', function() {
    // 你现有的查询和获取cookie的代码保持不变
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var url = tabs[0].url;
      chrome.cookies.getAll({url: url}, function(cookies) {
        let cookiesText = '';
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i];
          cookiesText += cookie.name + '=' + cookie.value + (i < cookies.length - 1 ? '; ' : '');
        }
        cookieTextArea.value = cookiesText; // 用cookie填充文本区域
        // 如果需要，可以在此调用showToast函数
      });
    });
  });
});

使用方法：
1.新建一个文件夹，把上面的文件挨个保存。
2.然后找个图片命名为：icon.png。
3.最后在chrome浏览器地址栏输入：chrome://extensions/。
4.打开右上角开发者模式。
5.左上角加载已解压的扩展程序，选择你刚才的文件夹。
6.开启插件就好了，然后把插件固定在浏览器扩展程序栏，随便打开一个网页，点击插件图标-Get Cookies。

后面我在此插件的基础上又加了个功能，点击另一个按钮将cookie作为请求体去请求我部署在本地的接口。
由于是请求的本地IP，这就涉及到一个跨域的问题。在修改Java代码允许请求但依然不能生效后，我把chrome插件的请求方式改成了JSONP，需要注意的是它只能发送GET请求，而且无法设置请求头。由于安全性和浏览器的限制，JSONP请求通常只支持GET方法，而不支持POST方法。涉及到具体业务，这部分代码我就不放出来了。

我们的接口拿到该cookie以后就可以将它放在请求头里面去请求抖店的对应接口，然后根据自己的需求进行处理。
我在获取抖店商家体验分之后，拿到了：我的体验分、全部指标、各项指标的单日诊断数据。
然后对这些数据进行单位转换和拼接单位类型最终通过easyExcel导出表格到本地。
后续如果有时间，我将记录一下后端Java项目的各个部分功能。

逆向抖店获取商家体验分数据的思路（一）