高效处理电商订单：Chrome插件实现PC端批量退款与退货操作

本文链接：https://blog.csdn.net/qq_35921430/article/details/142747425

引言

在电子商务的日常运营中，处理退款和退货请求是客服工作的重要组成部分。然而，大多数电商平台的PC端界面并未提供批量处理这些请求的功能，导致客服人员不得不逐一进行操作，效率低下。本文将介绍如何通过开发Chrome插件来实现批量退款和退货的操作，大幅提升工作效率。

需求分析

1.手动登录处理：插件设计时，考虑到安全性，登录过程由用户手动完成。一旦登录成功并进入购买列表页面，插件将动态注入“批量退款”和“批量退货”按钮到相关的DOM结构中。
2.批量退款功能：点击“批量退款”按钮后，插件将模拟POST请求，分两步完成批量退款申请。首先选择退款原因为“不想要了”，然后发起实际的退款申请操作。
3.批量退货功能：类似地，点击“批量退货”按钮也分为两步。第一步提示输入物流单号（假设物流服务是固定的），第二步模拟POST请求执行退货操作。
4.分页处理技巧：在处理多页订单时，由于页面不会自动刷新，插件需要监听页面变化，实时更新当前页面的订单信息，确保所有订单都能被正确处理
5.所有实现均基于接口请求,方便转换成其它语言比如python实现同样的功能

效果预览

1.动态注入批量退款批量退货按钮
在这里插入图片描述
2.点击批量退款操作

3.点击批量退货填写订单号操作

4.批量操作执行中

部分代码

1.插入DOM 使用 MutationObserver 监听 DOM 变化实时插入并使用了防抖操作

const insertMultTK = debounce(() => {
  const targetDiv = document.querySelector('.js-actions-row-top');
  if (targetDiv) {
    if (observer) {
      observer.disconnect();
    }
    const newElement2 = document.createElement('div');
    newElement2.className = 'batch-mod__container___sK68S';
    newElement2.setAttribute('data-reactid', '.0.5.0.1');
    newElement2.innerHTML = `
      <button class="button-mod__button___2HDif button-mod__default___2pRKd button-mod__small___1a8rc batch-mod__button___2aEBk" data-reactid=".0.5.0.1.$confirm">批量退款</button>
    `;
    targetDiv.appendChild(newElement2);
    newElement2.addEventListener('click', () => {
      (window as any).popConfirmDispute();
    });

    const newElement = document.createElement('div');
    newElement.className = 'batch-mod__container___sK68S';
    newElement.setAttribute('data-reactid', '.0.5.0.1');
    newElement.innerHTML = `
      <button class="button-mod__button___2HDif button-mod__default___2pRKd button-mod__small___1a8rc batch-mod__button___2aEBk" data-reactid=".0.5.0.1.$confirm">批量退货</button>
    `;
    targetDiv.appendChild(newElement);
    newElement.addEventListener('click', () => {
      (window as any).popOrderNum();
    });
  } else {
    console.log("未查到元素js-actions-row-top");
  }
}, 500);

2.批量退款请求接口是通过chrome background操作能避免跨域的问题

export function fetchAdjustApplyJsonTwo({cookie,bizOrderId,...rest}: {cookie: string,bizOrderId:string, rest: any}, callback: (data: any) => void) {
  const url = 'https://refund2.taobao.com/dispute/adjust/adjustApply.json';
  const headers = {
    'Accept': 'application/json',
    'Accept-Language': 'zh-CN,zh;q=0.9',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'Content-Type': 'application/x-www-form-urlencoded',
    'Origin': 'https://refund2.taobao.com',
    'Pragma': 'no-cache',
    'Cookie': cookie,
    'Referer': 'https://refund2.taobao.com/dispute/apply.htm',
    'Sec-Fetch-Dest': 'empty',
    'Sec-Fetch-Mode': 'cors',
    'Sec-Fetch-Site': 'same-origin',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
    'bx-v': '2.5.11',
    'sec-ch-ua': '"Chromium";v="118", "Google Chrome";v="118", "Not=A?Brand";v="99"',
    'sec-ch-ua-mobile': '?0',
    'sec-ch-ua-platform': '"Windows"',
  };

  const formData = new URLSearchParams();
  formData.append('_tb_token_', rest._tb_token_);
  formData.append('data', rest.data);

  let finalData = formData.toString();
  finalData = finalData.replace(/%28/g, '(').replace(/%29/g, ')');

  chrome.runtime.sendMessage({
    funType: 'axios',
    funName: 'adjustApplyJsonTwoRequest',
    pramas: finalData, 
    headers,
    method: 'post',
    url
  }, (response:any) => {  
    if (response && response[0] && response[0].data) {
        callback(response[0].data)
    } else {
        callback(null);
    }
  });
}

3批量退货

export function fetchAdjustFillGoodsLogisticsJsonTwo({cookie,bizOrderId,disputeId,...rest}: {cookie: string,bizOrderId:string,disputeId:string, rest: any}, callback: (data: any) => void) {
  const url = 'https://refund2.taobao.com/dispute/adjust/adjustFillGoodsLogistics.json';
  const headers = {
    'Authority': 'refund2.taobao.com',
    'Accept': 'application/json',
    'Accept-Language': 'zh-CN,zh;q=0.9',
    'Bx-V': '2.5.20',
    'Cache-Control': 'no-cache',
    'Cookie': cookie,
    'Content-Type': 'application/x-www-form-urlencoded',
    'Origin': 'https://refund2.taobao.com',
    'Pragma': 'no-cache',
    'Referer': 'https://refund2.taobao.com/dispute/fillGoodsLogistics.htm',
    'Sec-Ch-Ua': '"Chromium";v="118", "Google Chrome";v="118", "Not=A?Brand";v="99"',
    'Sec-Ch-Ua-Mobile': '?0',
    'Sec-Ch-Ua-Platform': '"Windows"',
    'Sec-Fetch-Dest': 'empty',
    'Sec-Fetch-Mode': 'cors',
    'Sec-Fetch-Site': 'same-origin',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
  };

  const formData = new URLSearchParams();
  formData.append('_tb_token_', rest._tb_token_);
  formData.append('data', rest.data);

  let finalData = formData.toString();
  finalData = finalData.replace(/%28/g, '(').replace(/%29/g, ')');  

  chrome.runtime.sendMessage({
    funType: 'axios',
    funName: 'adjustFillGoodsLogisticsJsonTwoRequest',
    pramas: finalData, 
    headers,
    method: 'post',
    url
  }, (response:any) => {  
      if (response && response[0] && response[0].data) {  
          callback(response[0].data)
      } else {
          callback(null);
      }
  });
}