Only applicable for collecting similar data https://shopee.co.id/product/shop_id/item_id The address
当前为
// ==UserScript==
// @name desty Shopee Collection Plugin
// @namespace http://tampermonkey.net/
// @version 1.0.2
// @license MIT
// @description Only applicable for collecting similar data https://shopee.co.id/product/shop_id/item_id The address
// @author Gao yongshun
// @match *://shopee.co.id/*
// @icon https://deo.shopeemobile.com/shopee/shopee-pcmall-live-sg/assets/icon_favicon_1_32.0Wecxv.png
// @grant none
// @require http://code.jquery.com/jquery-3.6.0.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js
// @run-at document-body
// ==/UserScript==
(function() {
'use strict';
// 代码1 - 创建弹窗的 HTML 结构
const modalHTML = `
<div id="customModal" style="display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4);">
<div style="background-color: #fefefe; margin: 20px auto 0; padding: 20px; border: 1px solid #888; width: 300px; border-radius: 10px;">
<div style=" display: flex; align-items: center; justify-content: space-between;">
<span class="msg" style="font-weight: bold;">Custom Content</span>
<span class="close" style="color: rgba(249, 78, 47); float: right; font-size: 28px; font-weight: bold; cursor: pointer;">×</span>
</div>
<div class="product-info">
<p class="title"></p>
<p class="price"></p>
<p class="item_id"></p>
<p class="currency"></p>
<div class="imgs"></div>
</div>
</div>
</div>
`;
// 将弹窗 HTML 结构插入到页面中
document.body.insertAdjacentHTML('beforeend', modalHTML);
// 获取弹窗元素
const modal = $('#customModal');
const msgDom = $('#customModal .msg');
const closeBtn = $('#customModal .close');
const infoDom = $('#customModal .product-info')
const titleDom = $('#customModal .title')
const priceDom = $('#customModal .price')
const itemIdDom = $('#customModal .item_id')
const currencyDom = $('#customModal .currency')
const imgsDom = $('#customModal .imgs')
// 显示弹窗
function showModal(msg, form = null) {
msgDom.text(msg)
if(form) {
titleDom.text("title: " + form.title)
priceDom.text("price: " + form.price)
itemIdDom.text("item_id: " + form.item_id)
currencyDom.text("currency: " + form.currency)
imgsDom.html("<p>images: </p>" + form.imgs.map(img => "<p>" + img + "</p>").join(""))
infoDom.show()
}else {
infoDom.hide()
}
modal.show();
// 设置定时器，3秒后自动关闭弹窗title
//setTimeout(() => {
//modal.hide();
//}, 3000);
}
// 绑定关闭按钮的点击事件
closeBtn.on('click', () => {
modal.hide();
});
// 代码2 - 创建功能区域的 dom 元素
// 后续增加功能按钮请在此处维护
const buttons = [
{ id: 'colectButton', content: 'collect'}
];
const floatingButtonsContainer = document.createElement('div');
floatingButtonsContainer.id = 'floating-buttons-container';
document.body.appendChild(floatingButtonsContainer);
buttons.forEach(button => {
const buttonElement = document.createElement('a');
buttonElement.id = button.id;
buttonElement.className = 'floating-button';
buttonElement.innerHTML = button.content;
floatingButtonsContainer.appendChild(buttonElement);
});
const customStyle = document.createElement('style');
customStyle.innerHTML = `
#floating-buttons-container {
display: flex;
flex-direction: column;
position: fixed;
top: 50%;
right: 5px;
transform: translateY(-50%);
z-index: 9999;
}
.floating-button {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(249, 78, 47);
color: #ffffff;
width: 50px;
height: 50px;
border-radius: 5px;
font-weight: bold;
font-size: 14px;
margin-top: 10px;
text-align: center;
}
`;
document.head.appendChild(customStyle);
// 代码3 - 功能按钮绑定事件
const requestPath = '/api/v4/pdp/get_pc'
const filePath = 'https://down-id.img.susercontent.com/file/'
// 绑定采集事件
$('#colectButton').on('click', function(e) {
e.preventDefault()
const origin = window.location.origin
const pathArr = window.location.pathname.split('/')
axios.get(requestPath,{
baseURL: origin,
params: {
shop_id: pathArr[2],
item_id: pathArr[3],
tz_offset_minutes: 480,
detail_level: 0,
}
}).then((res) => {
if(res.data.error) {
showModal('Collection failed')
return
}
const data = res.data.data
// 存储采集信息
const form = {}
form.title = data.item.title
form.item_id = data.item.item_id
form.price = data.item.price
form.currency = data.item.currency
form.imgs = data.product_images.images.map(img => filePath + img )
showModal('Collection successful', form)
console.log('Collected data',form)
// 将数据上传到后台
// ......
})
})
})();