Manifest V3下Chrome扩展图标点击事件无效的解决咨询

核心原因 #

当你在manifest.json的action字段中配置了default_popup后，浏览器会直接弹出指定的弹窗页面，chrome.action.onClicked事件会被完全忽略，这就是点击图标无反应、service worker控制台没日志的直接原因。

解决思路一：移除默认弹窗，仅触发background逻辑 #

如果不需要点击图标弹出popup页面，只需要执行background里的代码，修改manifest.json的action配置，删除default_popup项：

"action": {
  "default_title": "Click Me"
}

修改后，点击扩展图标时，chrome.action.onClicked事件会正常触发，background.js里的代码会执行，service worker控制台也能看到cow的日志。

解决思路二：保留弹窗，同时执行逻辑 #

如果需要保留点击图标弹出popup的功能，同时执行自定义逻辑，可以把逻辑移到弹窗的JS文件中：

1. 新建popup.js文件，写入逻辑：

document.addEventListener('DOMContentLoaded', () => {
  console.log('点击图标触发弹窗加载');
  // 执行你需要的操作，比如创建新标签页
  chrome.tabs.create({ url: 'popup.html' });
});

2. 在popup.html中引入这个JS文件：

<script src="popup.js"></script>

注意：弹窗的日志需要右键点击扩展图标，选择「检查弹出内容」，在弹出的控制台中查看，而非service worker的控制台。

进阶：弹窗与background联动执行逻辑 #

如果需要点击图标时，同时让background执行代码，可以通过消息通信实现：

• 在popup.js中发送消息：

document.addEventListener('DOMContentLoaded', () => {
  chrome.runtime.sendMessage({ type: 'iconClicked' }, (response) => {
    console.log('background处理完成');
  });
});

• 在background.js中监听消息并处理：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'iconClicked') {
    console.log('cow');
    chrome.tabs.create({ url: 'popup.html' });
    sendResponse({ status: 'done' });
  }
});

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