谷歌插件 The message port closed before a response was received

"manifest_version": 2

content与background消息通信

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

/发送消息
chrome.runtime.sendMessage({
        info: "我是 content.js， 我在发送消息"
    }, res => {
        console.log('我是 content.js ,我收到消息：', res)
  })

// 接收消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log(request, sender, sendResponse)
    sendResponse('我收到了你的消息！');
});

background.js页面接收和发送消息

//background.js
//接收消息
chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
    console.log('我是background，我接收了来自 content.js的消息：', req.info)
    sendResponse('哈哈哈')
    const tabId = await getCurrentTabId()
    // 在背景页面发送消息，需要当前 tabID
    chrome.tabs.sendMessage(tabId, '我是background，我在发送消息', function (res) {
        console.log('background：', res)
    });
})
/**
 * 获取当前 tab ID
 */
function getCurrentTabId() {
    return new Promise((resolve, reject) => {
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            resolve(tabs.length ? tabs[0].id : null)
        });
    })
}

"manifest_version": 3

content与background消息通信

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

background接收到消息后的异步返回处理

// 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;这里可以异步处理消息后返回
  }
})

总结：虽然在"manifest_version": 3版本中可以使用 版本2的消息通信，，但是会报错The message port closed before a response was received