如何实现Chrome扩展弹窗打开时的点击/加载事件监听？

• Chrome扩展原生体系不存在chrome.popup.onClick、chrome.popup.onLoad这类针对popup打开状态的专用事件接口
• 官方对chrome.browserAction（Manifest V3版本为chrome.action）的规则做了明确界定：一旦扩展的动作按钮绑定了popup页面，点击按钮时仅会弹出对应popup，不会触发chrome.browserAction.onClicked事件，该事件仅在未配置popup的动作按钮被点击时才会触发

方案1：直接复用popup页面自身的生命周期逻辑 #

这是零额外成本的实现方式，popup本质是独立的HTML文档，其JS上下文仅在弹窗被打开时才会被初始化、弹窗关闭后立即销毁。只需要在popup引入的脚本中增加DOM加载完成的监听，就能精准捕获popup的打开、加载完成事件：

// 写入popup.js，即popup.html关联的前端脚本
document.addEventListener('DOMContentLoaded', () => {
  // 此处写入popup打开后需要执行的所有自定义逻辑
  console.log('popup加载完成，已捕获打开状态')
})

方案2：后台侧（Service Worker）感知popup打开状态 #

如果需要在扩展的后台逻辑中感知popup的打开动作，不需要引入轮询这类高成本、低可靠性的方案，直接在上述popup的生命周期逻辑中向后台发送结构化消息即可：

1. 在popup的DOM加载完成回调中增加消息发送逻辑：

   // 接在popup.js的DOMContentLoaded回调内
   chrome.runtime.sendMessage({
     event: 'POPUP_OPEN',
     openTime: Date.now()
   })
   

2. 在Service Worker脚本中增加消息监听逻辑，即可接收到popup的打开通知：

   // 写入service-worker.js
   chrome.runtime.onMessage.addListener((message) => {
     if (message.event === 'POPUP_OPEN') {
       // 此处写后台侧需要执行的popup打开关联逻辑
       console.log('收到popup打开通知，打开时间：', message.openTime)
     }
   })
   

• 不要尝试通过后台脚本轮询检测popup状态，Chrome本身没有开放查询popup当前是否展示的公开接口，轮询方案既浪费资源也存在检测误差
• 不要依赖chrome.action.onClicked事件来捕获popup点击，绑定popup后该事件会永久失效，属于扩展的既定设计逻辑

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