Chrome扩展调用chrome.tabs.sendMessage报端口关闭错误，return true无效如何解决？

问题根因与修复方案 #

1 首要遗漏点：未注册消息监听器 #

你给出的content script代码仅定义了消息处理函数messageCheck，但没有将它绑定到Chrome扩展的消息监听事件上，导致content侧根本没有接收消息的入口，popup发送的消息没有接收方处理，端口直接被关闭就会抛出你遇到的报错。
在content script代码末尾添加监听器注册代码即可：

chrome.runtime.onMessage.addListener(messageCheck)

2 异步逻辑适配（如果后续有异步处理需求） #

如果你后续在messageCheck里需要执行异步操作（比如接口请求、DOM异步查询等），才需要在函数末尾加return true，告诉Chrome runtime你要异步调用sendResponse，不要提前关闭端口：

function messageCheck(message, sender, sendResponse) {
  // 示例异步逻辑
  fetch('/some/api').then(res => res.json()).then(data => {
    sendResponse({response: data})
  })
  // 异步场景必须加这行
  return true
}

3 其他排查项 #

如果加了监听器还是报错，按下面顺序排查：

• 确认你的content script在manifest中配置的匹配规则正确，已经成功注入到当前激活的标签页中，可以打开目标标签页的 devtools > Sources > 内容脚本 面板，查看你的扩展的content script是否在列表里
• 确认popup调用sendMessage时，tabs[0].id是有效值，没有拿到undefined，可以在popup侧加一行打印验证console.log(tabs[0]?.id)
• 如果使用的是Manifest V3，不需要用返回Promise的写法，Chrome MV3的消息监听不支持直接返回Promise作为响应，老老实实调用sendResponse+异步场景加return true即可
• 可以在popup的sendMessage回调里先捕获lastError避免控制台抛错，方便排查其他问题：

chrome.tabs.sendMessage(tabs[0].id, htmlStates, (response) => {
  if (chrome.runtime.lastError) {
    console.log('消息发送错误：', chrome.runtime.lastError.message)
    return
  }
  console.log(response)
})

内容的提问来源于stack exchange，提问作者Andrew Howard