content向background发送消息的异步消息返回

背景：
    content向background发送消息后，没有等到background执行完毕直接进行了sendResponse返回，导致content拿不到background处理后的数据集。

    下面需要做的就是，content监听background执行，能异步拿到background执行结果。只需要在onMessage的时候进行一个return true 就可以了。

content向background发送消息后的异步消息返回
popul与content & background的消息通信这里不描述，异步消息的处理方式是相同的

// content.js
// content给后台发送消息
function sendMessageToBackground(msg, callback) {
  chrome.runtime.sendMessage(msg, (response) => {
    if(callback) {
      callback(response)
    } 
  })
}

// content发送消息并等待消息返回
sendMessageToBackground({type: 'xxx'}, (response) => {
	console.log(response)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

重点关注一下backgroun接收到消息后的异步返回处理

// background.js
// background 接收到消息后处理
function getMessage(handler) {
  if(handler) {
    chrome.runtime.onMessage.addListener((request, render, sendResponse) => {
      handler(request, render, sendResponse)
      return true // 重点是这一个 返回true：允许返回异步消息
    })
  }
}

// background 接收到消息后的处理
getMessage((request, render, sendResponse) => {
  // 假设去掉return ture后，放开下面代码，是会返回ok还是result？
  // sendResponse('ok')
  if(request.type === 'xxx') {
    // 一些异步消息的处理
    // 假设在handler回调之后没有做 return ture; 处理？而且该代码块是一段时间较长异步操作，sendResponse()返回将会报错，不能正确返回到调用处
    sendResponse('reslut')  // 因为return true;这里可以异步处理消息后返回
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

关于chrome.runtime.onMessage.addListener监听消息的异步返回找了很长时间才在官网找到相关描述。

chrome runtime API 相关描述
chrome extension 官网关于异步消息返回描述