Chrome扩展开发：替代已弃用Panel，实现置顶独立弹窗加载popup.html

嘿，太懂你这种痛点了——每次复制粘贴到一半切个页面，popup直接消失，简直抓狂！要实现那种像Panel一样始终置顶的独立窗口，其实用Chrome的chrome.windows.create() API就能完美解决，下面给你一步步捋清楚怎么做：

核心思路 #

直接放弃默认的popup机制，改成点击扩展图标时创建一个独立的置顶弹窗窗口，加载你的popup.html内容。这个窗口完全独立于当前标签页，切换页面、甚至打开新标签都不会关闭，完美替代被弃用的Panel。

具体实现步骤 #

1. 调整Manifest配置 #

首先得更新你的manifest.json，去掉默认的popup配置，添加上必要的权限和后台脚本：

如果你用Manifest V3：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["windows", "activeTab"], // 必须声明windows权限
  "background": {
    "service_worker": "background.js" // 后台用service worker
  },
  "action": {} // 去掉default_popup，让后台监听点击
}

如果你用Manifest V2：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["windows", "activeTab"],
  "background": {
    "scripts": ["background.js"] // V2用scripts而不是service worker
  },
  "browser_action": {} // V2用browser_action替代action
}

2. 编写后台脚本（background.js） #

这个脚本负责监听扩展图标的点击，创建/聚焦置顶窗口，还要处理窗口关闭的情况避免重复创建：

// 记录已打开的窗口ID，防止重复创建
let persistentWindowId = null;

// 监听扩展图标点击事件
chrome.action.onClicked.addListener(async () => {
  // 先检查窗口是否还存在
  if (persistentWindowId) {
    try {
      // 如果存在，直接聚焦到它
      await chrome.windows.update(persistentWindowId, { focused: true });
      return;
    } catch (err) {
      // 窗口已经被用户关闭了，重置ID
      persistentWindowId = null;
    }
  }

  // 创建新的置顶窗口
  const newWindow = await chrome.windows.create({
    url: "popup.html", // 加载你的popup内容
    type: "popup", // popup类型默认置顶，无地址栏，体验和Panel类似
    width: 400, // 按需设置宽度
    height: 600, // 按需设置高度
    focused: true // 创建后自动聚焦
  });

  persistentWindowId = newWindow.id;

  // 监听窗口关闭事件，重置ID
  chrome.windows.onRemoved.addListener((windowId) => {
    if (windowId === persistentWindowId) {
      persistentWindowId = null;
    }
  });
});

3. 适配你的popup.html #

原来的popup.html基本不用改，只是现在它在独立窗口里，你可以根据窗口的宽高调整样式，比如去掉之前为了适配小popup做的滚动限制，让内容显示更舒服。

几个关键注意事项 #

• 权限一定要加：windows权限是创建和管理窗口的必要前提，别漏了！
• 窗口类型选择：用type: "popup"是最稳妥的，虽然Chrome弃用了Panel，但popup类型的窗口默认就是置顶的，而且没有地址栏，体验和Panel几乎一致；如果你非要用type: "panel"，目前Chrome还支持，但官方不推荐，后续可能会移除，所以还是优先用popup。
• 跨通信不受影响：你的popup和页面脚本之间的通信（比如chrome.tabs.sendMessage）和之前完全一样，不需要做任何改动。
• Manifest V3的service worker限制：V3的后台是service worker，不能操作DOM，所以所有窗口管理逻辑都要放在background.js里，popup里的逻辑还是正常写就行。

这样改完之后，点击扩展图标就会弹出一个始终置顶的独立窗口，切换页面、开新标签都不会消失，完美解决你复制粘贴时的痛点！

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