Chrome扩展异常：仅DevTools激活时新弹窗才会打开

这个问题的核心是加载窗口关闭后，脚本上下文被浏览器立即销毁：

• 当DevTools激活时，浏览器为了保留调试环境，会延迟销毁窗口的脚本上下文，所以openRecipeWindow能顺利执行；
• 关闭DevTools时，窗口一被chrome.windows.remove关闭，整个页面的脚本就直接终止，后续打开新窗口的代码根本没机会跑。

调整操作顺序+优化监听逻辑，确保打开新窗口的操作在加载窗口销毁前完成，同时替换轮询为更高效的存储监听：

修改后的loading.js代码 #

document.addEventListener('DOMContentLoaded', () => {
  console.log('Loading script loaded successfully.');

  // 改用storage变化监听，替代轮询
  chrome.storage.onChanged.addListener((changes, areaName) => {
    if (areaName === 'local' && changes.recipeReady?.newValue) {
      chrome.storage.local.get(['modifiedRecipe', 'imagePath'], (result) => {
        if (result.modifiedRecipe && result.imagePath) {
          console.log('Modified recipe found in storage:', result.modifiedRecipe);
          // 先打开新窗口，再关闭加载窗口
          openRecipeWindow(() => {
            // 新窗口打开成功后，移除标记并关闭当前加载窗口
            chrome.storage.local.remove('recipeReady', () => {
              chrome.windows.getCurrent((currentWindow) => {
                if (currentWindow?.id) {
                  chrome.windows.remove(currentWindow.id, () => {
                    console.log('Loading window closed');
                  });
                }
              });
            });
          });
        }
      });
    }
  });

  // 初始化时检查一次，避免错过已准备好的状态
  checkForModifiedRecipe();

  function checkForModifiedRecipe() {
    chrome.storage.local.get(['recipeReady', 'modifiedRecipe', 'imagePath'], (result) => {
      if (result.recipeReady && result.modifiedRecipe && result.imagePath) {
        openRecipeWindow(() => {
          chrome.storage.local.remove('recipeReady', () => {
            chrome.windows.getCurrent((currentWindow) => {
              if (currentWindow?.id) {
                chrome.windows.remove(currentWindow.id);
              }
            });
          });
        });
      }
    });
  }

  function openRecipeWindow(onSuccess) {
    chrome.windows.create({
      url: chrome.runtime.getURL("recipe.html"),
      type: "popup",
      width: 500,
      height: 600
    }, (newWindow) => {
      if (chrome.runtime.lastError) {
        console.error('Error creating new window:', chrome.runtime.lastError);
      } else {
        console.log('New window opened:', newWindow);
        onSuccess?.();
      }
    });
  }
});

关键修改点说明 #

1. 调整操作顺序：先调用openRecipeWindow，在新窗口打开成功的回调里再关闭加载窗口。这样加载窗口的脚本上下文会等到新窗口创建完成后才销毁，确保核心操作执行完毕。
2. 替换轮询为storage.onChanged监听：相比每秒轮询，监听存储变化更高效，能在recipeReady状态更新的第一时间响应，避免不必要的资源消耗。
3. 增加回调机制：给openRecipeWindow添加成功回调，确保只有新窗口确实打开后，才执行关闭加载窗口和清理存储的操作，避免流程混乱。
4. 增强空值检查：对currentWindow.id做判断，避免窗口获取失败时出现错误。

• 测试时不要打开DevTools，直接触发流程，确认新窗口能正常弹出；
• 查看扩展的后台页面日志（chrome://extensions/ → 你的扩展 → 查看视图 → 背景页），如果有错误会在这里输出，不用依赖DevTools。

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