Chrome扩展问题：确认窗口仅在popup.html显示，需在当前活跃Tab弹出

你的核心问题是定时器逻辑被绑定到了点击启动时的那个标签页——当用户切换到其他标签页后，定时器仍在原标签页后台运行，弹窗自然只会出现在原标签页；同时停止功能用location.reload()刷新标签页的方式也不够合理。

正确的思路是把定时器管理放到后台Service Worker中，由后台定时检测当前活跃标签页，再向该标签页注入弹窗脚本，这样无论用户切换到哪个标签页，弹窗都会出现在当前正在使用的页面上。

1. 创建/完善background.js #

后台负责管理定时器，定时获取当前活跃标签页并注入弹窗脚本：

let timerId = null;
const POPUP_INTERVAL = 10 * 1000; // 测试用10秒，正式环境改为3600*1000（1小时）

// 向当前活跃标签页注入弹窗脚本
async function showBreakPrompt() {
  try {
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 排除Chrome内置页面（如设置、新标签页等，避免注入失败）
    if (activeTab?.id && !activeTab.url.startsWith('chrome://')) { 
      await chrome.scripting.executeScript({
        target: { tabId: activeTab.id },
        function: () => {
          const answer = window.confirm("你已经在Chrome上工作太久了，要不要休息一下？");
          if (answer) {
            console.log('用户选择休息');
            // 可扩展：跳转休息页面或执行其他逻辑
          }
        }
      });
    }
  } catch (err) {
    console.error('注入弹窗脚本失败:', err);
  }
}

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch (message.action) {
    case 'START':
      if (!timerId) {
        timerId = setInterval(showBreakPrompt, POPUP_INTERVAL);
        sendResponse({ status: 'started' });
      }
      break;
    case 'STOP':
      if (timerId) {
        clearInterval(timerId);
        timerId = null;
        sendResponse({ status: 'stopped' });
      }
      break;
    case 'GET_STATUS':
      sendResponse({ isRunning: timerId !== null });
      break;
  }
});

2. 修改popup.js #

让popup通过消息和后台通信，不再直接向标签页注入定时器逻辑：

const startBtn = document.getElementById("start_btn");

// 初始化按钮状态
async function initButtonState() {
  // 先从后台获取运行状态
  const statusResp = await chrome.runtime.sendMessage({ action: 'GET_STATUS' });
  // 再从sessionStorage补全状态（防止后台重启后状态丢失）
  const storageResp = await chrome.storage.session.get('buttonState');
  
  startBtn.innerText = statusResp.isRunning 
    ? "Click to Stop Gym" 
    : storageResp.buttonState || "Click to Start Gym";
}

// 按钮点击事件
startBtn.addEventListener("click", async () => {
  const isStarting = startBtn.innerText === "Click to Start Gym";
  const action = isStarting ? 'START' : 'STOP';
  
  const response = await chrome.runtime.sendMessage({ action });
  if (response.status === 'started') {
    startBtn.innerText = "Click to Stop Gym";
  } else if (response.status === 'stopped') {
    startBtn.innerText = "Click to Start Gym";
  }
  
  // 保存按钮状态到sessionStorage
  await chrome.storage.session.set({ buttonState: startBtn.innerText });
});

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', initButtonState);

3. 清理冗余代码 #

• 删除popup.js中原有的startGymFunctionality和stopGymFunctionality函数，逻辑已移至后台。
• 移除stopGymFunctionality中的location.reload()，现在只需后台清除定时器即可停止功能。

4. 验证权限配置 #

你的manifest.json已包含scripting、tabs等必要权限，无需额外修改，确保后台脚本路径正确：

"background": { "service_worker": "background.js" }

• 定时器移至后台：后台不受标签页切换影响，能始终跟踪当前活跃标签页。
• 动态注入弹窗脚本：每次到时间后，后台获取当前活跃标签页再注入弹窗代码，确保弹窗出现在用户正在使用的页面。
• 消息通信机制：popup和后台通过chrome.runtime.sendMessage交互，状态管理更可靠，避免标签页绑定问题。

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