如何在代码执行完成前保持浏览器扩展的popup弹窗隐藏？

方案1：逻辑前移到后台（推荐，从根源消除闪烁） #

把原popup中的判断逻辑全部移到扩展的后台Service Worker中，点击扩展图标时先在后台完成校验，只有确实需要降级显示传统popup时才唤起窗口，完全不会出现多余的小方块。

操作步骤： #

1. 修改manifest.json，移除action.default_popup配置，改为通过后台监听点击事件
2. 在background.js中添加如下逻辑：

browser.action.onClicked.addListener(async (tab) => {
  try {
    // 第一步：尝试和已注入的content script通信
    await browser.tabs.sendMessage(tab.id, {action: "toggle"});
  } catch (e) {
    try {
      // 第二步：通信失败则尝试注入脚本
      await injectScript(tab);
      await browser.tabs.sendMessage(tab.id, {action: "toggle"});
    } catch (e2) {
      // 第三步：注入失败才唤起popup
      await browser.action.setPopup({popup: "popup.html", tabId: tab.id});
      await browser.action.openPopup();
      // 重置当前tab的popup配置，避免影响后续点击
      await browser.action.setPopup({popup: "", tabId: tab.id});
    }
  }
});

3. 调整popup.html和原有逻辑，直接渲染Svelte组件即可，不需要再做通信、注入判断和自动关闭逻辑。

方案2：保留popup入口，修改初始隐藏策略 #

如果不想调整现有逻辑架构，可以通过特殊的CSS隐藏策略避开浏览器的popup窗口强制渲染规则，之前直接设置display:none/visibility:hidden不生效，是因为部分浏览器会在popup初始化时强制生成最小尺寸的窗口帧，忽略普通隐藏样式。

操作步骤： #

1. 在popup.html中加入全局初始样式：

:root {
  opacity: 0;
  position: fixed;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* 降级渲染时才启用的可见样式 */
.popup-visible {
  opacity: 1;
  left: auto;
  width: 400px;
  height: 580px;
}

2. 修改原有popup逻辑，只有走降级渲染分支时才给根元素加可见类：

browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
  const tab = tabs[0];
  browser.tabs.sendMessage(tab.id, {action: "toggle"}).then(() => {
    window.close();
  }).catch(() => {
    injectScript(tab).then(() => {
      browser.tabs.sendMessage(tab.id, {action: "toggle"}).then(() => {
        window.close();
      });
    }).catch(() => {
      // 仅在需要渲染popup时添加可见类
      document.documentElement.classList.add('popup-visible');
      new App({
        target: document.body,
      });
    });
  });
});

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