chrome扩展- 天猫、淘宝、拼多多、1688 下单开发心得

技术路线

• 后端-java（api或爬虫获取订单）
• 前端-react(展示订单与用户交互)
• chrome插件(与前后端交互，获取下单地址等信息实现下单、发货功能)
• 本文主要讲解chrome插件的实现过程

直接讲实现过程把

• 扩展的基础知识就不讲了，可以参考谷歌、百度的各类文档

1. 前端接收到用户下单请求后、将下单链接与订单编号发送给扩展

window.postMessage({type: 'order', id: 25 }, "*");

2. 扩展cs页监控window.postMessage请求,接收用户发起的下单操作

window.addEventListener("message", (event) => {
     if (eventData.type === 'order') {
            console.log('开始：', event);
            port.postMessage(eventData);
     }
}, false);

3. 扩展的bg与cs交互采用chrome.runtime.connect

// 在cs页我们声明一个connect （上文已经使用了）
var port = chrome.runtime.connect({name: "portName"});
// 在bg页声明chrome.runtime.onConnect.addListener来监控bg的请求
chrome.runtime.onConnect.addListener(function (port) {
    // portName 请求
    if (port.name === 'portName') {
        ///
    }
});

• 有空继续写