Chrome扩展开发问题：心跳元素超时移除功能异常排查

核心问题与修复 #

你的代码存在两个关键问题，直接导致了心跳被误判超时的现象：

1. Chrome.storage序列化导致数值类型异常：Chrome.storage会将数据序列化为JSON格式，虽然数字能被存储，但读取时可能被解析为字符串，引发时间差计算错误；
2. 循环中的break语句限制处理范围：每次检查仅移除第一个超时元素，无法处理所有超时项，还可能让你误以为新添加的心跳被错误移除。

修复后的存储代码

// 统一将heart ID设为字符串，避免HTML元素ID与存储键的类型混淆
heart.id = Date.now().toString();
// 存储心跳的时间戳（确保为数值类型）
chrome.storage.local.set({ [heart.id]: Date.now() });

修复后的检查函数

setInterval(function() {
  const current = Date.now();
  chrome.storage.local.get(null, function(result) {
    // 遍历所有存储的心跳数据
    for (const heartId in result) {
      // 手动将存储的时间戳转为数值类型，避免隐式转换错误
      const storedTimestamp = Number(result[heartId]);
      const interval = current - storedTimestamp;
      // 修正超时时间为1小时（3600000毫秒），原代码为10分钟
      if (interval > 3600000) {
        removeHeart(heartId);
        console.log(`Heart ${heartId} removed due to timeout`);
        // 移除break，确保所有超时元素都被处理
      }
    }
  });
}, 10000);

完善的removeHeart函数

function removeHeart(heartId) {
  // 先移除页面上的心跳元素
  const heartElement = document.getElementById(heartId);
  if (heartElement) {
    heartElement.remove();
  }
  // 再移除存储中的对应数据
  chrome.storage.local.remove(heartId);
}

问题原因详解 #

你遇到的“刚添加的心跳就被判定超时”，本质是存储的时间戳被解析为字符串，导致current - result[heartId]的计算出现异常（比如字符串与数字的隐式转换偏差，或是残留了旧测试数据）。手动将存储值转为数值类型后，即可确保时间差计算准确。

另外，原代码中的break语句会让每次检查只处理第一个元素，如果存储中有旧的超时心跳，每次都会优先移除它，容易让你误以为新添加的心跳被误判。移除break后，所有超时的心跳都会被正确处理。

额外优化建议 #

为了更清晰地管理心跳数据，建议存储结构化对象而非单一时间戳，方便后续扩展功能：

const heartId = Date.now().toString();
heart.id = heartId;
// 存储包含时间戳的结构化数据
chrome.storage.local.set({
  [heartId]: {
    timestamp: Date.now(),
    // 可添加其他属性，比如心跳类型、样式等
  }
});

// 检查时读取结构化数据
const storedHeart = result[heartId];
const interval = current - storedHeart.timestamp;

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