Chrome扩展点击图标报错：Cannot read properties of undefined (reading 'onClicked')

错误原因分析 #

1. Manifest V3 API变更：你用的是manifest_version: 3，这个版本里chrome.browserAction已被废弃，统一替换为chrome.action，所以原来的chrome.browserAction是undefined，才会触发"Cannot read properties of undefined (reading 'onClicked')"错误。
2. Popup存在时事件不触发：你的扩展配置了default_popup，点击图标会直接打开popup，此时chrome.action.onClicked事件不会生效——这个事件仅在扩展没有设置popup时才会触发。
3. addListener用法错误：正确的addListener不需要传入第一个参数'click'，直接传回调函数即可。

解决方案分两种场景 #

场景1：点击图标打开popup，同时打印hello world #

因为点击图标会自动加载popup页面，直接在popup.js中执行打印逻辑即可：

// popup加载完成时自动打印
console.log("hello world");

// 如果需要等DOM加载完成再执行（比如操作popup元素），可以加监听
document.addEventListener('DOMContentLoaded', () => {
  console.log("hello world (DOM已加载)");
});

场景2：点击图标不打开popup，直接触发打印 #

先移除manifest里的default_popup配置，然后在background service worker中监听点击事件：

1. 修改manifest.json：

{
  "name": "club-tab",
  "description": "to club active tabs",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "action": {}, // 移除default_popup配置
  "permissions": ["tabs", "activeTab"],
  "host_permissions": ["http://*/*", "https://*/*"]
}

2. 在background.js中添加监听：

chrome.action.onClicked.addListener(() => {
  console.log("hello world");
});

关于你的疑问 #

chrome.browserAction.onClick.addEventListener()本身就是错误写法，不管是Manifest V2还是V3，正确的都是用onClicked.addListener()监听图标点击。而且当扩展设置了popup后，点击图标会优先打开popup，这个点击事件根本不会触发，所以在popup.js里也无法通过这个事件监听图标点击操作。

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