如何实现点击Chrome扩展图标启动时触发指定事件

首先明确结论：chrome.runtime 命名空间下不存在专门监听用户点击扩展图标行为的事件，对应功能的API归属chrome.action命名空间。

核心对应API说明 #

你需要的点击触发事件是 chrome.action.onClicked，该事件触发时机仅为用户主动点击浏览器工具栏上的扩展图标，不会在浏览器启动、扩展安装/更新、配置文件加载等其他场景自动触发，完全匹配你排除chrome.runtime.onStartup的使用需求。
使用这个事件有个关键前提：

• 如果你在扩展的manifest.json中配置了action.default_popup字段（即指定了点击图标后弹出的popup页面，这也是React类扩展的常见配置），该事件不会触发——此时点击图标浏览器会直接加载并打开popup页面，popup页内的代码只会在点击触发的popup加载流程中执行。
• 如果你没有配置default_popup字段，点击图标不会弹出弹窗，此时chrome.action.onClicked才会正常派发事件。

不同场景的合理实现方案 #

场景1：点击图标需要弹出popup交互界面（你的React项目大概率属于这个场景） #

你目前在App.tsx根组件的useEffect钩子中编写触发逻辑的方案是完全可行的，没有架构问题：

• popup页面的生命周期和点击行为强绑定：用户点击图标才会加载popup页面、挂载React根组件，触发useEffect逻辑；用户关闭popup（点击页面其他区域、失焦）后页面会直接销毁，下次点击重新走完整加载流程，完全匹配点击触发的需求。
• 注意不要在popup的React逻辑中编写需要长期驻留运行的代码，popup关闭后所有JS执行上下文会被直接回收，这类逻辑要放到后台service worker中。

场景2：点击图标不需要弹出popup，直接执行后台逻辑 #

这种场景不要把逻辑写在前端React组件里，最优实现是在Manifest V3的后台service worker（Manifest V2对应持久化后台页）中直接监听点击事件，参考代码：

// 后台service worker入口文件代码
chrome.action.onClicked.addListener(async (activeTab) => {
  // 此处编写点击图标后要执行的逻辑，例如：
  // 1. 向当前标签页注入内容脚本
  // 2. 打开扩展侧边栏/功能页
  // 3. 向已打开的扩展页面派发消息
  console.log('扩展图标被点击，当前激活标签页：', activeTab);
});

常见误区提醒 #

不要误用以下事件做图标点击触发，触发时机完全不匹配：

• chrome.runtime.onStartup：浏览器启动、对应配置文件加载时触发，和用户点击行为无关，正是你排除的场景
• chrome.runtime.onInstalled：扩展首次安装、版本更新、浏览器更新时触发，和日常点击行为无关

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