Chrome扩展消息通信报错：无法读取undefined的'text'属性

嘿，这个报错我太熟了！问题出在你直接访问request.greeting.text的时候，request.greeting可能是undefined——也就是说，你的background脚本收到的消息里，不一定每次都有greeting这个字段，直接读它的text属性就会触发这个类型错误。

快速修复：先做存在性检查 #

最简单的办法是在访问request.greeting.text之前，先确认request.greeting确实存在。你可以用ES6+的可选链操作符（?.），或者传统的短路判断来实现：

修改后的background.js代码：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
    // 使用可选链操作符，安全访问嵌套属性
    if (request.greeting?.text === "varhello"){
      sendResponse({farewell: "goodbye"});
      console.log(request.greeting);
    }
    // 如果需要兼容更老的Chrome版本，用短路判断：
    // if (request.greeting && request.greeting.text === "varhello") {
    //   sendResponse({farewell: "goodbye"});
    //   console.log(request.greeting);
    // }
  });

更健壮的方案：给消息添加类型标识 #

如果你的扩展后续会有多种消息类型，建议给每个消息加一个type字段，先判断消息类型再处理，这样能彻底避免处理无关消息导致的错误：

修改content.js：

var varHello = { image_url: 'www.google.com', text: "varhello" };
// 添加type字段标识消息类型
chrome.runtime.sendMessage( {type: "GREETING", greeting: varHello}, function(response) {
  console.log(response.farewell);
});

修改background.js：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
    // 先判断消息类型，再安全访问greeting属性
    if (request.type === "GREETING" && request.greeting?.text === "varhello"){
      sendResponse({farewell: "goodbye"});
      console.log(request.greeting);
    }
  });

这样一来，只有类型为GREETING的消息才会被处理，完全避免了因意外消息格式导致的报错。

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