Chrome扩展background.js与content.js通信报接收端不存在错误如何解决

• chrome.tabs.onRemoved触发时页面已销毁：该事件触发的时机是标签页已经被浏览器回收，对应标签页内注入的content.js已经完全卸载，不存在消息接收端，因此必然抛出Receiving end does not exist错误。
• chrome.tabs.onCreated触发时页面未加载：该事件仅代表标签页实例创建完成，此时页面资源还未开始加载，content.js还未注入到页面上下文，同样没有可用的消息接收端。
• 未捕获通信异常：Manifest V3中chrome.tabs.sendMessage返回Promise，未捕获错误时就会抛出Unchecked runtime.lastError提示。

标签页完全关闭后，页面上下文、注入的content脚本都会被浏览器彻底销毁，没有任何方法可以再访问对应的document对象。如果需要获取页面内容，必须在标签页关闭动作执行前的阶段触发收集逻辑。

方案1：content脚本主动上报页面数据（推荐） #

由content脚本监听页面即将卸载事件，主动把需要的document内容发送给background，不需要background主动发消息触发：
content.js代码：

// 监听页面即将卸载事件，触发时机早于标签页销毁
window.addEventListener('beforeunload', () => {
  // 收集你需要的document内容
  const pageContent = {
    title: document.title,
    fullHtml: document.documentElement.outerHTML,
    // 其他需要的字段
  }
  // 主动发送给background
  chrome.runtime.sendMessage(pageContent)
})

background.js代码：

// 接收content脚本上报的页面数据
chrome.runtime.onMessage.addListener((data, sender) => {
  const tabId = sender.tab.id
  // 后续可将数据存入storage或执行其他业务逻辑
  console.log(`收到标签页${tabId}关闭前的内容：`, data)
})

方案2：background主动通信适配加载时机 #

如果必须由background主动发消息触发逻辑，需要等页面加载完成、content脚本注入完成后再执行通信：
background.js代码：

// 监听标签页更新事件，页面加载完成后再发消息
chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
  if (changeInfo.status === 'complete') {
    // 加catch捕获通信异常，避免抛出未处理错误
    chrome.tabs.sendMessage(tabId, "some-random-message")
      .catch(err => console.log('通信异常忽略：', err))
  }
})

• 如果需要匹配chrome内置页面、新标签页等特殊地址，需要在manifest的content_scripts.matches中单独添加对应匹配规则，默认<all_urls>不会覆盖这些特殊页面。
• 所有跨上下文通信逻辑都建议加异常捕获，避免偶发的通信失败导致扩展报错。

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