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') {
        ///
    }
});

• 有空繼續寫