Chrome扩展开发报错：Cannot read properties of undefined (reading 'sendMessage')

错误原因分析 #

该错误说明chrome.runtime对象未被定义，导致无法调用sendMessage方法，常见触发场景包括：

• 扩展未正确加载或更新，content script无法获取扩展API上下文
• 扩展被浏览器禁用，API无法正常访问
• 目标页面存在自定义chrome全局变量，覆盖了扩展提供的API对象
• Manifest配置存在语法错误或路径错误，导致扩展核心组件（如service worker）未正常注册

解决方案 #

1. 重新加载并验证扩展
   打开Chrome扩展管理页面（chrome://extensions/），开启开发者模式，点击目标扩展的「重新加载」按钮，同时确认扩展处于启用状态。

2. 规避全局变量冲突
   部分网页会自定义chrome变量，导致扩展API被覆盖。可修改content.js代码，用自执行函数隔离上下文：

   (function(chrome) {
     document.addEventListener("visibilitychange", event => {
       if (document.visibilityState === "visible") {
         chrome.runtime.sendMessage({ mycontent: "from content script" })
         console.log("tab is active")
       } else {
         chrome.runtime.sendMessage({ mycontent: "from content script" })
         console.log("tab is inactive")
       }
     })
   })(window.chrome);
   

3. 修正Manifest配置问题
   你的manifest.json中"background"字段使用了中文引号，属于语法错误，会导致扩展加载失败。修正后的关键配置如下：

   {
     "name": "Ju Close Chrome",
     "description": "Build an Extension!",
     "version": "1.0",
     "manifest_version": 3,
     "background": {
       "service_worker": "background.js"
     },
     // 其他配置保持不变
   }
   

   同时确认background.js、content.js等文件路径与配置一致，content_scripts的matches规则覆盖目标页面。

4. 检查Service Worker状态
   在扩展管理页面，点击目标扩展的「服务工作者」下的「检查」按钮，查看控制台是否有报错，确认service worker正常激活。

你的代码参考 #

content.js #

document.addEventListener("visibilitychange", event => {
  if (document.visibilityState === "visible") {
    chrome.runtime.sendMessage({ mycontent: "from content script" })
    console.log("tab is active")
  } else {
    chrome.runtime.sendMessage({ mycontent: "from content script" })
    console.log("tab is inactive")
  }
})

background.js #

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.mycontent) {
    // 可在此添加消息处理逻辑
    console.log("收到content script消息:", message);
  }
})

修正后的manifest.json #

{
  "name": "Ju Close Chrome",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "permissions": ["notifications", "storage", "alarms", "activeTab"],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery.js", "content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

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