背景

最近在研究商品抓取，发现市面上有jd、taobao、1688等的商品信息抓取工具，唯独没有某物的。

为什么？ 因为不好做？就让我来研究研究。

预览

初探某物

研究发现

某物网页端几乎没有入口， 客户端的入口只有小程序和app, 对于不会app逆向的我来说，这俩我无能为力。

不过复制某物app商品详情的分享链接倒是h5能打开。 不过点开控制台发现，商品详情接口入参和返回值都是加密的。

看了半天我总结如下:

• 鲜有web入口
• 接口出入都有复杂的加密。
• 时不时会弹出验证码。
• 访问多了会拒绝访问。

初始方案-全自动

最开始我想，搁商品详情接口打个断点，一步步看调用栈 看他怎么加密的解密，把加密方法和规则都复制出来，模拟他的规则去加密解密访问商品详情接口，拿到数据。

可惜限制太多，尝试多次，一时半会搞不定。 好多限制没过，作为工具给人用，还是不太稳定。

原因

1、多种多样的验证码，要过

得先判断那种类型，再过吧，假如多了种类型，是不就过不了了

2、复杂的加密规则

有没有大佬来试试？

最终方案-半自动

为什么称之为是半自动，因为限制都让使用的人过。

要点一下插件抓取。

整体逻辑概述

1、浏览器插件替换dw的一个js文件，换成修改过的；里边有段注入逻辑，将商品详情数据，输出到html；

2、浏览器插件获取html中的数据。

3、按需加工处理数据。

为什么不挂在window上 插件直接获取window上的数据不就完事了？ 本来我也是这么想的，后来查阅文档发现插件不能直接访问目标网站window对象， 只能访问dom。

浏览器插件入门科普

对咱开发，主要分为3块。

1、popup（用户界面、交互窗口)

浏览器扩展里的小图标打开的就是这个，这个相当于用户界面

2、content script(注入页面运行的脚本)

注入页面执行的逻辑。

3、background (后台程序)

可以在后台运行的脚本。

这三块之间通过，onMessage、sendMessage通信，这三块配合起来实现我们插件的逻辑。

更详细的插件教程，请自行学习。

实现

复制替换目标js

background (后台程序)

利用chrome chrome.webRequest.onBeforeRequest api替换文件

js

复制代码
chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        return { redirectUrl: chrome.extension.getURL('本地文件') }
    },
    {urls: ["目标文件"]},
    ["blocking"]
);

获取商品数据, 输出到html

获取商品数据

JS

复制代码
// 详情图
const descImages = t.productDetail.spuShowSpread.length > 0 ?t.productDetail.spuShowSpread[0].images : []
// 组装自己需要的数据
const data = JSON.stringify({
    //  基础属性信息
    baseProperties: t.productDetail.baseProperties,
    // sku数据
    skuData: t.skuData,
    // sku价格列表
    priceList: t.priceList,
    // 商品标题
    title: t.detail.title,
    descImages: descImages,
    // 主图列表
    imgList: t.productDetail.image.spuImage.images.map(item => item.url)
})

输出到html

JS

复制代码
// 插入dom中
const script = document.getElementById("dw_data");
if (script) {
    document.body.removeChild(script)
}
var d = document.createElement("script");
d.type = "text/javascript";
d.id = "dw_data";
d.textContent = data;
document.body.appendChild(d);

查看html中的数据

如下图，明显是有了，我们需要的数据的json串，就在这里了。

那么接下来只需要获取标签内的JSON串，解一下，数据就拿到了。

获取数据

content script

通过插件获取dom

window.top.document; 即可获取当前页面的dom对象。

js

复制代码
const topDoc = window.top.document;

拿数据

既然上一步都已经获取到整个document对象了，那么直接根据id选择器#dw_data先获取标签，再获取标签的内容 innerHtml

js

复制代码
const el = topDoc && topDoc.querySelector(rootSelector);
if (el) {
    const parent = $(el).clone();
    // 拿到数据
    const data = $(parent).find('#dw_data').text()
    ... 后续自己逻辑
}

既然数据都拿到了，家人们，接下来想怎么处理，是修改数据结构导入其他平台还是等等等等，就按自己的需求开发后续逻辑了...

获取数据完整代码

javascript

复制代码
const topDoc = window.top.document;
const rootSelector = "body"
const el = topDoc && topDoc.querySelector(rootSelector);
if (el) {
    const parent = $(el).clone();
    const data = $(parent).find('#dw_data').text()
}

插件学习下载

下载链接: 已下架

使用文档:使用文档

最后

以上利用浏览器插件实现了数据抓取功能，接下来我的目标是全自动抓取。

有兴趣的朋友可以关注一下。

以上内容仅供学习参考，请勿做非法行为。

源文：某物商品数据抓取插件

如有侵权请联系站点删除！