网页与chrome插件实现交互，网页通过插件调取接口获取数据

最近有个需求需要网页调用插件，实现获取淘宝数据

大概思路如下：

• 插件匹配网站url注入js
• 网页上通过postmessage发送数据到content.js
• content.js 中通过监听 postmessage获取参数，然后获取淘宝数据，然后再回传给网页
• 网页监听content.js 传递的消息获取数据

网页端封装请求

export function cjPost(obj) {
  return new Promise((resolve, reject) => {
    let { funName, postData, timeout, isLoading = true } = { ...obj };
    let timer = '';
    obj['type'] = 'vue-send';//发送
    obj['sign'] = getSign();//签名
    let fun = (e) => {
      if(e.data.sign && e.data.sign == obj.sign && e.data.type && e.data.type == 'plugin-send' ) {
        setLoad(isLoading);
        let res = e.data.data
        // 滑块验证
        if(isHk(res)) {
          openHk(res.data.url);
        }else{
          resolve(res);
        }
        removeEventListener('message',fun);
        clearTimeout(timer);
      }
    }
    openLoading(isLoading);
    postMessage(obj);
    addEventListener('message',fun)
    //超时销毁监听
    timer = setTimeout(() => {
      removeEventListener('message',fun);
      reject({
        state: false,
        msg: '请求超时'
      });
    }, timeout || TIMEOUT);
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

插件端消息封装

$(function() {

	// 监听网页发送
	addEventListener('message', async function(e) {
		if (e.data.type && e.data.type == 'vue-send') {
			let funName = e.data.funName;
			let postData = e.data.postData ? JSON.stringify(e.data.postData) : '';
			if(!funName) {return}
			let res = await eval(funName + '('+ postData +')');
			let data = {
				type: 'plugin-sed',
				sign: e.data.sign,
				data: res,
			}
			postMessage(data);
		}
	})
	//淘宝h5接口调用函数
	

})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22