Chrome扩展开发：点击Set按钮获取输入值及实现定时通知

嘿，我刚入门Chrome扩展开发的时候也跟你一样，没多少网页开发经验的话，确实会觉得处处是坎～别担心，咱们一步步来解决你这两个问题：点击Set按钮获取输入值，还有每隔x分钟发通知。

1. 点击Set按钮获取输入框值 #

首先得把popup的基础结构搭好，先写popup.html，放上输入框和Set按钮：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 200px; padding: 15px; }
    input { width: 100%; margin-bottom: 10px; padding: 5px; }
    button { width: 100%; padding: 6px; }
  </style>
</head>
<body>
  <input type="number" id="intervalInput" placeholder="输入分钟数" min="1">
  <button id="setBtn">Set</button>
  <script src="popup.js"></script>
</body>
</html>

接下来在popup.js里给按钮绑定点击事件，就能拿到输入框的值了：

document.getElementById('setBtn').addEventListener('click', () => {
  // 获取输入框元素
  const inputElement = document.getElementById('intervalInput');
  // 把输入值转成数字类型
  const intervalMinutes = parseInt(inputElement.value);
  
  // 简单做个输入校验，避免无效值
  if (isNaN(intervalMinutes) || intervalMinutes < 1) {
    alert('请输入有效的正整数分钟数！');
    return;
  }
  
  // 到这里就成功拿到用户设置的分钟数啦
  console.log('设置的通知间隔：', intervalMinutes);
  alert(`已设置每${intervalMinutes}分钟发送通知！`);
});

最后别忘了在manifest.json里配置popup路径，不然Chrome找不到你的弹窗：

{
  "manifest_version": 3,
  "name": "定时通知工具",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": []
}

2. 实现每隔x分钟发送通知 #

这里要注意：如果直接在popup里用setInterval，一旦弹窗关闭，定时器就会停止。所以得用Chrome的Alarms API，它是在后台运行的，就算popup关了也能正常工作。

步骤1：更新manifest配置权限和后台脚本 #

修改manifest.json，加上必要的权限和后台服务工作者：

{
  "manifest_version": 3,
  "name": "定时通知工具",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["alarms", "notifications", "storage"],
  "background": {
    "service_worker": "background.js"
  }
}

加storage权限是为了把用户设置的分钟数存起来，防止浏览器重启后丢失设置。

步骤2：把输入值传给后台并设置闹钟 #

修改popup.js，在拿到输入值后，把它存到Chrome存储，再通知后台设置定时闹钟：

document.getElementById('setBtn').addEventListener('click', () => {
  const inputElement = document.getElementById('intervalInput');
  const intervalMinutes = parseInt(inputElement.value);
  
  if (isNaN(intervalMinutes) || intervalMinutes < 1) {
    alert('请输入有效的正整数分钟数！');
    return;
  }
  
  // 把设置的分钟数存入Chrome本地存储
  chrome.storage.local.set({ interval: intervalMinutes }, () => {
    // 告诉后台创建重复闹钟
    chrome.alarms.create('notificationAlarm', {
      delayInMinutes: intervalMinutes, // 第一次通知的延迟时间
      periodInMinutes: intervalMinutes // 后续重复的间隔时间
    });
    
    alert(`已设置每${intervalMinutes}分钟发送通知！`);
  });
});

步骤3：后台监听闹钟触发并发送通知 #

新建background.js，写监听逻辑，当闹钟触发时弹出通知：

// 监听闹钟触发事件
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'notificationAlarm') {
    // 创建并显示通知
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icon.png', // 记得自己准备一个128x128的图标放在根目录
      title: '定时提醒',
      message: '该起来活动/喝水啦！'
    });
  }
});

// 浏览器启动时，自动读取存储的设置，重新设置闹钟
chrome.runtime.onStartup.addListener(() => {
  chrome.storage.local.get('interval', (result) => {
    const interval = result.interval;
    if (interval) {
      chrome.alarms.create('notificationAlarm', {
        delayInMinutes: interval,
        periodInMinutes: interval
      });
    }
  });
});

小提示 #

• 图标问题：一定要准备一个icon.png（建议128x128像素），不然通知会显示Chrome默认图标，影响体验。
• 测试扩展：打开Chrome的扩展页面（chrome://extensions/），开启开发者模式，点击“加载已解压的扩展程序”，选择你的扩展文件夹就能测试了。
• 关于你参考的Drink Water示例：它的核心逻辑和这个差不多，只是可能简化了输入处理的部分，你可以对照着看，更容易理解每个模块的作用。

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