如何在Google Chrome Manifest Version 3扩展中打开新窗口

1. 配置manifest.json #

首先在扩展清单文件中添加必要的权限和配置项，示例如下：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "service-worker.js"
  },
  "permissions": ["windows"]
}

说明：windows权限是调用窗口创建接口的必填权限，如果需要打开扩展外的公共网页，还需要在host_permissions字段中添加对应域名权限，比如"host_permissions": ["https://*.example.com/*"]。

2. 编写后台服务工作线程代码 #

在service-worker.js中添加扩展图标点击事件监听逻辑，示例如下：

// 监听扩展工具栏图标点击事件
chrome.action.onClicked.addListener(async () => {
  // 示例1：打开扩展内的本地自定义页面
  await chrome.windows.create({
    url: "custom-panel.html",
    type: "popup",
    width: 800,
    height: 600,
    focused: true
  })

  // 示例2：打开外部公共网页
  // await chrome.windows.create({
  //   url: "https://example.com",
  //   type: "normal",
  //   width: 1200,
  //   height: 800
  // })
})

常见优化方案 #

• 避免重复打开相同窗口：创建窗口前可先调用chrome.windows.getAll查询已打开的窗口，匹配url后如果存在对应窗口就直接调用chrome.windows.update聚焦窗口，不存在再执行新建逻辑
• 自定义窗口展示样式：设置type: "popup"可以隐藏地址栏、书签栏等浏览器原生控件，更适配扩展自定义面板的使用场景

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