如何实现浏览器扩展点击另一个扩展图标并操作其弹出窗口

出于浏览器扩展沙箱安全限制，默认不允许任意扩展直接触发其他扩展的图标点击事件、操作其弹出窗口，避免恶意扩展窃取其他扩展的敏感交互数据。

可修改目标扩展代码的场景 #

这是唯一合规可上架扩展商店的实现方案，需要目标扩展配合做授权配置：

• 第一步：在目标扩展的manifest.json中添加外部连接授权配置，声明允许你的扩展发起通信

  // 目标扩展 Manifest V3 示例配置
  {
    "manifest_version": 3,
    "externally_connectable": {
      "ids": ["你的扩展的正式ID"]
    },
    "background": {
      "service_worker": "background.js"
    }
  }
  

• 第二步：在目标扩展的后台逻辑中监听外部消息，收到对应指令后主动触发自身弹窗打开、执行对应操作

  // 目标扩展 background.js 示例
  chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {
    if (request.action === 'triggerPopup') {
      // Manifest V2 替换为 chrome.browserAction.openPopup()
      chrome.action.openPopup().then(() => {
        sendResponse({ success: true, msg: "弹窗已打开" })
      }).catch(err => sendResponse({ success: false, msg: err.message }))
    }
    // 其他弹窗交互逻辑可按业务需求扩展处理
    return true
  })
  

• 第三步：你的扩展直接通过 runtime 消息接口向目标扩展发送指令即可完成交互

  // 你的扩展业务代码示例
  const TARGET_EXT_ID = "目标扩展的ID"
  chrome.runtime.sendMessage(TARGET_EXT_ID, { action: "triggerPopup" }, (res) => {
    console.log("操作返回结果：", res)
  })
  

无法修改目标扩展代码的场景 #

该场景下没有官方合规实现方案，仅可实现本地自用的测试版本，无法上架官方应用商店：

• 需为你的扩展申请debugger权限，通过 Chrome DevTools Protocol 模拟点击浏览器工具栏上的目标扩展图标，该方案需要手动计算图标坐标，适配性极差，不同浏览器、不同系统、不同工具栏布局下都会失效
• 目标弹窗打开后，同样通过debugger接口获取弹窗的页面上下文，注入自定义脚本完成交互操作，该方案随时可能因为浏览器安全机制更新而不可用

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