如何通过站点JavaScript访问浏览器扩展弹窗并监听按钮点击事件

首先明确浏览器的基础安全限制：网页JavaScript默认无法直接访问浏览器扩展的弹窗上下文、读取内部DOM内容，所有可行方案都需要你拥有对应浏览器扩展的开发控制权，无扩展侧配合的情况下无法实现需求。

可行实现方案 #

• 跨上下文消息通信方案（最通用） #

  利用扩展官方提供的外部通信能力实现事件通知：
  1. 在扩展的manifest.json中配置externally_connectable字段，声明你的自有站点为允许通信的域名，示例配置（Chromium系浏览器）：

  {
    "manifest_version": 3,
    "externally_connectable": {
      "matches": ["https://你的站点域名/*"]
    }
  }
  

  2. 在扩展弹窗的逻辑代码中监听按钮点击事件，触发时调用chrome.runtime.sendMessage接口向你的站点发送自定义通知消息
  3. 自有站点的JavaScript中注册对应扩展ID的消息监听回调，即可实时收到按钮点击的通知

• 内容脚本中转方案 #

  如果不想配置外部通信权限，可以用内容脚本作为中间层传递消息：
  1. 扩展声明匹配你的自有站点的内容脚本，内容脚本具备同时访问扩展消息通道和网页DOM上下文的权限
  2. 弹窗内按钮点击时，扩展先将点击事件发送给内容脚本
  3. 内容脚本调用window.postMessage向网页上下文抛出自定义事件，你的站点JS监听页面的message事件即可拿到点击通知

• 自定义事件监听方案（仅适用于注入式弹窗） #

  如果扩展的弹窗是直接注入到你的站点页面内的DOM元素，而非浏览器独立的扩展弹出层，无需跨上下文通信：直接在扩展注入弹窗的代码中给目标按钮绑定自定义事件，你的站点JS直接监听页面内的对应自定义事件即可。

• 所有方案都仅适配你自行开发的浏览器扩展，无法监听未做适配的第三方扩展的弹窗行为，这是浏览器安全沙箱的强制限制
• 消息通信时建议添加自定义校验字段，避免伪造消息触发业务逻辑错误

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