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

港控/mmm° 2023-10-10 14:52 21阅读 0赞

**背景：**  
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)
    })

重点关注一下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 runtime API]  
[chrome extension 官网关于异步消息返回描述][chrome extension]  
![在这里插入图片描述][ce60128d37864826861766b45c464d2d.jpeg_pic_left]

[chrome runtime API]: https://developer.chrome.com/docs/extensions/reference/runtime/
[chrome extension]: https://developer.chrome.com/docs/extensions/mv3/messaging/
[ce60128d37864826861766b45c464d2d.jpeg_pic_left]: https://img-blog.csdnimg.cn/ce60128d37864826861766b45c464d2d.jpeg#pic_left