Chrome Manifest V3扩展打包后计时器失效，解压版本正常的问题

问题描述 #

我开发了一款基于Chrome Manifest V3的时间追踪扩展，核心需求是弹窗关闭后后台仍能持续计时。目前遇到的异常情况：

• 加载本地已解压版本时功能完全正常
• 发布到应用商店安装后，计时器彻底无法工作
• 同时安装本地解压版和商店版时，两者都能正常运行；但移除本地版本后，商店版又无法追踪时间

原background.js代码：

// background.js

chrome.alarms.create({
  periodInMinutes: 1 / 60,
});

let timerInterval;
let timerValue = 0;

chrome.alarms.onAlarm.addListener((alarm) => {
  chrome.storage.local.get(["timer", "isRunning"], (res) => {
      const time = res.timer ?? 0;
      const isRunning = res.isRunning ?? true;
      if (!isRunning) {
          return;
      }
      chrome.storage.local.set({
          timer: time + 1,
      });
      chrome.action.setBadgeText({
          text: `${time + 1}`
      });
  });
});

chrome.runtime.onSuspend.addListener(() => {
  clearInterval(timerInterval); // Stop the timer interval when the extension is suspended
  timerValue = 0; // Reset the timer value
  chrome.action.setBadgeText({ text: "" }); // Clear the badge
});

chrome.action.onClicked.addListener((tab) => {
  if (timerInterval) {
      clearInterval(timerInterval);
      timerValue = 0;
      chrome.action.setBadgeText({ text: "" }); // Clear the badge when timer is stopped
      timerInterval = null;
  } else {
      timerInterval = setInterval(() => {
          timerValue++;
          chrome.action.setBadgeText({ text: timerValue.toString() });
      }, 1000);
  }
});

问题根源 #

Chrome商店发布的扩展会严格执行Manifest V3的Service Worker生命周期规则：当扩展处于闲置状态（无弹窗、标签页交互）时，后台Service Worker会被Chrome自动终止，导致setInterval这类内存定时器彻底失效。而本地解压版处于开发者模式，Chrome会放宽Service Worker的终止策略，因此不会出现问题。同时安装两个版本时，本地版的活跃状态会间接"唤醒"商店版的Service Worker，维持其运行。

此外，代码中混用chrome.alarms和setInterval，且依赖内存变量（timerInterval、timerValue）存储状态，一旦Service Worker重启，这些变量会丢失，进一步导致计时逻辑混乱。

解决方案 #

1. 统一使用chrome.alarms实现计时逻辑 #

完全移除setInterval，仅依赖Chrome官方提供的chrome.alarmsAPI，它能在Service Worker被终止后依然按时触发，确保计时逻辑持久运行。

修改后的background.js：

// background.js
// 初始化每秒触发一次的闹钟
chrome.alarms.create('timerTick', {
  periodInMinutes: 1 / 60
});

// 处理闹钟触发事件
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name !== 'timerTick') return;
  
  chrome.storage.local.get(['timer', 'isRunning'], (res) => {
    const currentTime = res.timer ?? 0;
    const isRunning = res.isRunning ?? false;
    
    if (isRunning) {
      const newTime = currentTime + 1;
      chrome.storage.local.set({ timer: newTime });
      chrome.action.setBadgeText({ text: newTime.toString() });
    }
  });
});

// 点击图标切换计时状态
chrome.action.onClicked.addListener(() => {
  chrome.storage.local.get(['isRunning', 'timer'], (res) => {
    const newIsRunning = !res.isRunning ?? true;
    // 停止计时时重置状态
    if (!newIsRunning) {
      chrome.storage.local.set({ timer: 0, isRunning: false });
      chrome.action.setBadgeText({ text: '' });
    } else {
      chrome.storage.local.set({ isRunning: true });
    }
  });
});

2. 修正Manifest配置 #

确保manifest.json中正确声明所需权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "action": {},
  "permissions": ["storage", "alarms"]
}

3. 关键注意事项 #

• 永远不要在Manifest V3的Service Worker中使用setTimeout/setInterval，这类内存定时器在Service Worker终止后会失效
• 所有持久化状态必须存在chrome.storage.local中，禁止依赖内存变量存储状态
• 商店版扩展需严格遵循Chrome后台生命周期规则，避免任何依赖持续运行的逻辑

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