如何构建具备计时器功能的简易Chrome扩展程序

技术可行性确认 #

仅用 JavaScript、JSON、HTML 三类技术完全可以完成开发，Chrome 扩展的原生开发体系本身就基于这三类文件实现，不需要引入额外框架，对新手非常友好。

通用实现建议 #

1. 基础配置（manifest.json） #

优先使用当前官方主推的 Manifest V3 版本（Manifest V2 已被Chrome逐步淘汰），核心配置参考如下：

{
  "manifest_version": 3,
  "name": "自定义计时器",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["storage"]
}

• 必须配置storage权限，用于持久化存储用户的自定义设置
• 如果需要计时器在popup关闭后仍然继续运行，需要额外添加background字段配置service worker

2. Popup页面结构（popup.html） #

页面可以简单拆分为两个功能区块：

• 计时展示区：放置时间显示文本，以及开始、暂停、重置三个操作按钮
• 自定义设置区：用原生表单组件（input、select、checkbox等）实现你需要的配置项，比如计时时长、是否开启提醒音、显示样式等
• 样式可以直接写在HTML的<style>标签内，不需要额外的前端构建工具

3. 计时逻辑实现（popup.js） #

• 基础计时功能用setInterval即可实现，每1000毫秒更新一次时间显示，暂停/结束时调用clearInterval清除定时器避免内存泄露
• 时间计算优先用时间戳差值计算，不要直接累加秒数，避免setInterval延迟导致的计时不准问题，简单示例如下：

let timer = null;
// 从storage读取用户设置的默认计时时长，默认25分钟
let totalTime = await chrome.storage.local.get('defaultDuration').then(res => res.defaultDuration || 25 * 60 * 1000);

document.querySelector('#startBtn').addEventListener('click', () => {
  const startTime = Date.now();
  timer = setInterval(() => {
    const passedTime = Date.now() - startTime;
    const remainTime = totalTime - passedTime;
    if(remainTime <= 0) {
      clearInterval(timer);
      alert('计时结束');
      return;
    }
    // 格式化时间展示
    const min = Math.floor(remainTime / 60000);
    const sec = Math.floor((remainTime % 60000) / 1000);
    document.querySelector('#timeText').innerText = `${min}:${sec.toString().padStart(2, '0')}`;
  }, 1000)
})

• 如果需要关闭popup后计时不中断，需要把计时逻辑移到后台service worker中，popup只负责发送操作指令、同步展示计时状态即可

4. 自定义设置存储 #

• 用Chrome原生的chrome.storage.local API存储用户设置，数据保存在本地，浏览器重启也不会丢失
• popup每次打开时先从storage读取已保存的设置，同步到页面表单和计时逻辑中
• 用户修改设置后即时写入storage，不需要额外的保存操作也能生效

5. 新手调试技巧 #

• 打开Chrome扩展管理页，开启「开发者模式」，点击「加载已解压的扩展程序」选择你的项目文件夹即可直接测试
• 右键点击扩展图标，选择「审查弹出内容」即可打开popup的调试控制台，查看日志、断点调试都很方便

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