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

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)
})

重点关注一下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;这里可以异步处理消息后返回
  }
})

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

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