某物商品抓取插件

背景

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

为什么？ 因为不好做？

预览

初探某物

研究发现

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

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

看了半天我总结如下:

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

初始方案

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

可惜我失败了，尝试多次，未果。

有没有大佬来试试？

最终方案

概述

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

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

这样搞得弊端就是，目标更新了，咱也得更新

浏览器插件入门

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

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

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

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

注入页面执行的逻辑。

3、background (后台程序)

可以在后台运行的脚本。

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

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

实现

复制替换目标js

background (后台程序)

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

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

获取商品数据, 输出到html

获取商品数据

// 详情图
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

// 插入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对象。

const topDoc = window.top.document;

拿数据

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

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

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

获取数据完整代码

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()
}

插件学习下载

下载链接: 下载链接

使用文档:使用文档

最后

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