Chrome扩展开发报错：Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

架构老林

2026-8-10

Chrome扩展开发问题：chrome.tabs.onUpdated 相关错误与疑问

我正在开发一款用于保存YouTube视频时间戳的Chrome扩展，遇到以下错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

我的配置文件与代码

manifest.json

{
  "name": "My YT Bookmarks",
  "version": "0.1.0",
  "description": "Saving timestamps in YT videos",
  "permissions": ["storage", "tabs"],
  "host_permissions": ["https://*.youtube.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.youtube.com/*"],
      "js": ["contentScript.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "assets/bookmark.png",
        "assets/play.png",
        "assets/delete.png",
        "assets/save.png"
      ],
      "matches": ["https://*.youtube.com/*"]
    }
  ],
  "action": {
    "default_icon": {
      "16": "assets/ext-icon.png",
      "24": "assets/ext-icon.png",
      "32": "assets/ext-icon.png"
    },
    "default_title": "My YT Bookmarks",
    "default_popup": "popup.html"
  },
  "manifest_version": 3
}

background.js

chrome.tabs.onUpdated.addListener((tabId, tab) => {
  if (tab.url && tab.url.includes("youtube.com/watch")) {
    const queryParameters = tab.url.split("?")[1];
    const urlParameters = new URLSearchParams(queryParameters);
    console.log(urlParameters);

    chrome.tabs.sendMessage(tabId, {
      type: "NEW",
      videoId: urlParameters.get("v"),
    });
  }
});