你这个需求太实用了！完全可以通过Chrome扩展的标签事件、消息通信加上存储API来实现，我给你一步步拆解具体怎么做，代码示例都给你写好：

别怀疑，这个事件就是你要找的！它会在活跃标签切换时触发，回调参数里包含previousTabId（之前的活跃标签ID）和tabId（新激活的标签ID）。这刚好能满足你的需求——切换标签时，先处理刚刚失去焦点的那个标签（比如保存YouTube的计时器数据），再处理新激活的标签（比如恢复计时）。

1. 先搞定Manifest配置 #

首先在manifest.json里声明必要的权限和脚本注入规则：

{
  "manifest_version": 3,
  "name": "YouTube Timer Sync",
  "version": "1.0",
  "permissions": ["tabs", "storage"],
  "content_scripts": [
    {
      "matches": ["*://www.youtube.com/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

简单说明下：

• tabs权限用来监听标签事件、获取标签信息
• storage权限用来持久化存储计时器数据
• content_scripts指定只在YouTube页面注入我们的计时器脚本

2. 写Content Script处理计时器逻辑 #

在content.js里实现计时器的启动、停止，以及和后台脚本的消息通信：

// 初始化计时器相关变量
let timerInterval;
let remainingTime = 0;

// 启动计时器（支持传入剩余时间恢复）
function startTimer(time = 300) { // 默认5分钟示例
  remainingTime = time;
  clearInterval(timerInterval);
  timerInterval = setInterval(() => {
    remainingTime--;
    console.log(`剩余时间：${remainingTime}秒`);
    // 这里可以把剩余时间渲染到YouTube页面上，比如添加到视频下方
    if (remainingTime <= 0) {
      clearInterval(timerInterval);
      alert("计时结束啦！");
    }
  }, 1000);
}

// 停止计时器并返回剩余时间
function stopTimer() {
  clearInterval(timerInterval);
  return remainingTime;
}

// 监听来自后台脚本的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch (message.action) {
    case "saveTimer":
      // 收到保存指令，停止计时并把剩余时间返回给后台
      const currentTime = stopTimer();
      sendResponse({ remainingTime: currentTime });
      break;
    case "resumeTimer":
      // 收到恢复指令，用存储的时间重启计时器
      startTimer(message.time);
      break;
  }
});

// 页面加载时先检查存储，有历史数据就直接恢复计时
chrome.storage.local.get("youtubeTimer").then((result) => {
  if (result.youtubeTimer && result.youtubeTimer > 0) {
    startTimer(result.youtubeTimer);
  } else {
    startTimer(); // 没有历史数据就启动默认计时
  }
});

3. 后台脚本监听标签切换，处理数据存储 #

在background.js里监听onActivated事件，完成数据的保存和恢复逻辑：

// 监听活跃标签切换事件
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  const { previousTabId, tabId } = activeInfo;

  // 第一步：处理刚刚失去焦点的标签（存数据）
  if (previousTabId) {
    try {
      // 获取之前标签的信息，判断是不是YouTube页面
      const prevTab = await chrome.tabs.get(previousTabId);
      if (prevTab.url.includes("youtube.com")) {
        // 给该标签的content script发消息，请求保存计时器数据
        const response = await chrome.tabs.sendMessage(previousTabId, { action: "saveTimer" });
        // 把剩余时间存到Chrome本地存储
        await chrome.storage.local.set({ youtubeTimer: response.remainingTime });
        console.log(`已保存YouTube计时器：${response.remainingTime}秒`);
      }
    } catch (error) {
      // 处理标签已被关闭的情况，不用报错
      console.log("之前的标签已关闭，跳过保存");
    }
  }

  // 第二步：处理新激活的标签（恢复数据）
  const currentTab = await chrome.tabs.get(tabId);
  if (currentTab.url.includes("youtube.com")) {
    // 从存储里取之前保存的剩余时间
    const result = await chrome.storage.local.get("youtubeTimer");
    if (result.youtubeTimer && result.youtubeTimer > 0) {
      // 给当前标签的content script发消息，恢复计时
      await chrome.tabs.sendMessage(tabId, { action: "resumeTimer", time: result.youtubeTimer });
      console.log(`已恢复YouTube计时器：${result.youtubeTimer}秒`);
    }
  }
});

• 新建标签页的情况：当从YouTube标签切换到新建标签时，previousTabId就是YouTube标签的ID，一样会触发保存逻辑，和切换到其他普通标签没区别。
• 跨窗口切换标签：chrome.tabs.onActivated不管是同一窗口内的标签切换，还是不同窗口之间的标签切换，都会触发，完全覆盖你的需求。
• 浏览器失去焦点：如果需要浏览器最小化时也保存计时器，可以额外加上chrome.windows.onFocusChanged事件，当窗口失去焦点时，获取当前活跃标签执行保存逻辑，这样更全面。

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