技术路线
- 后端-java(api或爬虫获取订单)
- 前端-react(展示订单与用户交互)
- chrome插件(与前后端交互,获取下单地址等信息实现下单、发货功能)
- 本文主要讲解chrome插件的实现过程
直接讲实现过程把
- 扩展的基础知识就不讲了,可以参考谷歌、百度的各类文档
- 前端接收到用户下单请求后、将下单链接与订单编号发送给扩展
window.postMessage({type: 'order', id: 25 }, "*");
- 扩展cs页监控window.postMessage请求,接收用户发起的下单操作
window.addEventListener("message", (event) => {
if (eventData.type === 'order') {
console.log('开始:', event);
port.postMessage(eventData);
}
}, false);
- 扩展的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') {
///
}
});