如何将番茄钟Chrome扩展计时器转为分:秒格式？

你的问题出在两个核心环节：后台发送计时器更新时未格式化秒数，以及弹窗读取存储时长时直接使用原始数值，导致显示纯秒数而非mm:ss格式。以下是具体修复方案：

1. 修正后台计时器消息的格式化 #

在background.js的startTimer函数中，发送updateTimer消息时，需要调用已有的formatDuration函数对秒数进行格式化，而不是直接传递原始duration：

// background.js - startTimer函数内的消息发送代码修改
chrome.runtime.sendMessage({action: 'updateTimer', duration: formatDuration(duration)});

2. 修正弹窗读取存储时长的格式化 #

在popup.js中，读取remainingDuration时，需要将秒数转换为分秒格式。你可以选择以下两种方案：

方案A：直接在读取逻辑中格式化 #

// popup.js - 读取存储的代码修改
chrome.storage.sync.get('remainingDuration', (data) => {
  if (data.remainingDuration !== undefined) {
    const duration = data.remainingDuration;
    const minutes = Math.floor(duration / 60);
    const seconds = duration % 60;
    document.getElementById('timer').innerText = `${minutes}:${seconds.toString().padStart(2, '0')}`;
  }
});

方案B：复用格式化函数（更整洁） #

先在popup.js开头添加格式化函数，再调用它：

// popup.js - 新增格式化函数
function formatDuration(duration) {
  const minutes = Math.floor(duration / 60);
  const seconds = duration % 60;
  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

// 然后修改读取存储的代码
chrome.storage.sync.get('remainingDuration', (data) => {
  if (data.remainingDuration !== undefined) {
    document.getElementById('timer').innerText = formatDuration(data.remainingDuration);
  }
});

额外优化建议 #

• 可以将formatDuration函数抽离为单独的工具文件（如utils.js），让background.js和popup.js都引入，避免代码重复
• 弹窗初始化时，getDuration和remainingDuration的读取可能存在显示覆盖问题，建议调整逻辑：优先使用后台返回的格式化时长，若无则使用存储的数值并格式化

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