前言

考虑到很多小伙伴找不到谷歌浏览器插件开发类型的教程,这里博主打算实操写一个插件,所以就把流程记录一下,顺便帮助一下不懂的小伙伴门,希望能通过这次教程快速入门谷歌浏览器插件。这次插件主要写的是获取淘宝热卖信息并显示在淘宝热卖的左边板块。本次插件纯属研究所用,造成的一切后果皆与本人无关!!!

废话不多说了,进入主题,这一篇文章主要讲的是如何获取淘宝热卖数据以及数据分析。完成图大概如下
完成效果图

开整

1.打开热卖页面初步观察数据

初步观察了下外面需要完成的效果。
咱们需要获取的数据有:旺旺、信誉、销量、等级、是否为天猫

打开下面页面

https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&clk1=cab6e9b4b36f8ff6eec6cca229c4e7e7&keyword=%E7%83%AD%E5%8D%96&page=0

q1.png

打开地址后可以发现咱们获取的数据在页面上也能看到,
但是页面上的数据并不完整所以在页面上取数据并不是最好的结果。

2.分析来源

一般来说淘宝数据只有2中传输方式
1.就是随页面过来json进行解析的
2.就是接口调用了。
q2.png

咱们先右键查看源代码搜索一下旺旺缤纷彩虹456789,看看能不能找到一些数据线索。
这里需要注意一下由于淘宝传输多半中文都是编码了的,所以这里搜索一部分456789
q3.png

这里可以看到咱们并没有搜索到,这足以证明数据不是跟随页面过来的。
下面咱们f12抓一下请求之后在ctrl+f搜索一下关键词看看
q4.png

可以看到上面已经找到了热卖数据所在,咱们进去之后分析一下数据

3.分析数据

q5.png

loc:地址
price:价格
sellCount:销量
itemId:商品ID
wangwangId:旺旺
ismall:是否为天猫店铺

可以看到其中并没有等级数据,这里就不管那么多了。

4.再次分析

通过上面的分析过程已经可以获取到数据了
现在咱们整理一下思路看看怎么写。
我想的是模拟请求取获取数据,来看一下请求数据。

//源数据
Request URL: https://h5api.m.taobao.com/h5/mtop.alimama.union.sem.landing.pc.items/1.0/?jsv=2.4.0&appKey=12574478&t=1565169973858&sign=3fbd95e29f043458e02372e62fc38d2b&api=mtop.alimama.union.sem.landing.pc.items&v=1.0&AntiCreep=true&dataType=jsonp&type=jsonp&ecode=0&callback=mtopjsonp1&data=%7B%22keyword%22%3A%22%E7%83%AD%E5%8D%96%22%2C%22ppath%22%3A%22%22%2C%22loc%22%3A%22%22%2C%22minPrice%22%3A%22%22%2C%22maxPrice%22%3A%22%22%2C%22ismall%22%3A%22%22%2C%22ship%22%3A%22%22%2C%22itemAssurance%22%3A%22%22%2C%22exchange7%22%3A%22%22%2C%22custAssurance%22%3A%22%22%2C%22b%22%3A%22%22%2C%22clk1%22%3A%22cab6e9b4b36f8ff6eec6cca229c4e7e7%22%2C%22pvoff%22%3A%22%22%2C%22pageSize%22%3A%22100%22%2C%22page%22%3A%220%22%2C%22elemtid%22%3A%221%22%2C%22refpid%22%3A%22mm_26632258_3504122_32538762%22%2C%22pid%22%3A%22430673_1006%22%2C%22featureNames%22%3A%22spGoldMedal%2CdsrDescribe%2CdsrDescribeGap%2CdsrService%2CdsrServiceGap%2CdsrDeliver%2C%20dsrDeliverGap%22%2C%22ac%22%3A%22w9x7FaK%2BsywCAXZxAYrp1Abf%22%2C%22wangwangid%22%3A%22qq2757189408%22%2C%22catId%22%3A%22%22%7D
Request Method: GET
//解码后
https://h5api.m.taobao.com/h5/mtop.alimama.union.sem.landing.pc.items/1.0/?jsv=2.4.0&appKey=12574478&t=1565169973858&sign=3fbd95e29f043458e02372e62fc38d2b&api=mtop.alimama.union.sem.landing.pc.items&v=1.0&AntiCreep=true&dataType=jsonp&type=jsonp&ecode=0&callback=mtopjsonp1&data={"keyword":"热卖","ppath":"","loc":"","minPrice":"","maxPrice":"","ismall":"","ship":"","itemAssurance":"","exchange7":"","custAssurance":"","b":"","clk1":"cab6e9b4b36f8ff6eec6cca229c4e7e7","pvoff":"","pageSize":"100","page":"0","elemtid":"1","refpid":"mm_26632258_3504122_32538762","pid":"430673_1006","featureNames":"spGoldMedal,dsrDescribe,dsrDescribeGap,dsrService,dsrServiceGap,dsrDeliver, dsrDeliverGap","ac":"w9x7FaK+sywCAXZxAYrp1Abf","wangwangid":"qq2757189408","catId":""}

可以看到是get请求,但是get数据在哪呢?
再次复制一部分数据在源码中搜索即可看到

<div mx-view="app/views/itemcollections/index" view-mtopdata="keyword=%E7%83%AD%E5%8D%96&ppath=&loc=&minPrice=&maxPrice=&ismall=&ship=&itemAssurance=&exchange7=&custAssurance=&b=&clk1=cab6e9b4b36f8ff6eec6cca229c4e7e7&pvoff=&pageSize=100&page=0&elemtid=1&refpid=mm_26632258_3504122_32538762&pid=430673_1006&featureNames=spGoldMedal%2CdsrDescribe%2CdsrDescribeGap%2CdsrService%2CdsrServiceGap%2CdsrDeliver%2C%20dsrDeliverGap&ac=w9x7FaK+sywCAXZxAYrp1Abf&wangwangid=qq2757189408&catId=" data-spm="07626516002"></div>

这里方便查看我将数据解码一下

keyword=热卖&ppath=&loc=&minPrice=&maxPrice=&ismall=&ship=&itemAssurance=&exchange7=&custAssurance=&b=&clk1=cab6e9b4b36f8ff6eec6cca229c4e7e7&pvoff=&pageSize=100&page=0&elemtid=1&refpid=mm_26632258_3504122_32538762&pid=430673_1006&featureNames=spGoldMedal,dsrDescribe,dsrDescribeGap,dsrService,dsrServiceGap,dsrDeliver, dsrDeliverGap&ac=w9x7FaK+sywCAXZxAYrp1Abf&wangwangid=qq2757189408&catId=

这里对比之后可以看到上面提交的参数就是这里。
那么咱们只需要将这个转为对象json模拟提交就可以了。
数据获取到了后面写还不简单吗?

总结

今天分析了数据,并整理了插件写作思路来。希望大家能够学到一些方法,大家最后是下去自己动手做一下。好了,今天就到这里,下一章将写如何制作。

标签: 谷歌插件开发教程, 淘宝热卖插件, 淘宝数据分析, 支烟原创, 易支烟系列教程

添加新评论