如何在Chrome扩展中打开独立窗口并实现与默认操作的通信

以下默认基于Chrome目前主推的Manifest V3版本开发，如果使用Manifest V2可以对应替换废弃API即可。

1. 基础配置（manifest.json） #

首先在扩展清单文件中声明所需权限、后台服务和扩展按钮配置：

{
  "manifest_version": 3,
  "name": "独立窗口测试扩展",
  "version": "1.0",
  "action": {
    "default_title": "打开独立窗口"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs", "windows"]
}

2. 点击触发窗口打开逻辑 #

在后台脚本background.js中监听扩展按钮的点击事件，调用chrome.windows.create接口打开独立窗口，将type设为popup即可生成不带标签栏、地址栏的独立窗口：

// background.js
chrome.action.onClicked.addListener(async () => {
  await chrome.windows.create({
    url: "window.html", // 独立窗口加载的扩展内页面路径
    type: "popup",
    width: 500,
    height: 350,
    focused: true
  })
})

你只需要自行开发window.html作为独立窗口的展示页面即可。

扩展侧和独立窗口的通信基于Chrome官方的消息API实现，不需要额外依赖：

• 如果你需要后台脚本和独立窗口通信，直接使用chrome.runtime.onMessage监听、chrome.runtime.sendMessage发消息即可
• 如果你需要扩展的其他页面（如选项页、原有弹窗）和独立窗口通信，可以通过后台脚本做中转，或者拿到独立窗口的tabId后直接发消息

示例代码 #

独立窗口侧脚本（引入到window.html中） #

// window.js：独立窗口的页面脚本
// 主动给扩展后台发消息
chrome.runtime.sendMessage({
  type: "WINDOW_MSG",
  content: "来自独立窗口的消息"
}, (response) => {
  console.log("收到扩展回复：", response)
})

// 监听扩展发来的消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === "EXTENSION_MSG") {
    console.log("收到扩展消息：", msg.content)
    sendResponse("已收到扩展消息")
  }
  return true
})

扩展后台脚本（background.js新增逻辑） #

// background.js 新增消息监听逻辑
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === "WINDOW_MSG") {
    console.log("收到独立窗口消息：", msg.content)
    // 回复独立窗口
    sendResponse("后台已收到消息")
    // 主动向独立窗口推送消息
    chrome.tabs.sendMessage(sender.tab.id, {
      type: "EXTENSION_MSG",
      content: "后台主动推送的内容"
    })
  }
  return true
})

注意事项 #

• 如果独立窗口加载的是第三方外部域名页面，需要在manifest.json的host_permissions中声明对应域名的权限，才能正常通信
• 异步回复消息时必须在监听函数末尾返回true，避免端口提前关闭

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