Chrome扩展报错：Uncaught TypeError: Cannot read properties of undefined (reading 'onAlarm')

错误核心原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'onAlarm')，本质是chrome.alarmsAPI未被正确加载，通常是权限缺失或代码运行环境错误导致的。结合你提供的代码，还存在代码放错文件的问题，以下是具体修复步骤：

1. 补全manifest.json的权限配置 #

Chrome扩展的alarmsAPI需要显式声明权限才能使用，打开你的manifest.json，添加"alarms"权限：

{
  "manifest_version": 3, // 如果你用的是V2，改成2即可
  "name": "你的提醒扩展",
  "version": "1.0",
  "permissions": ["alarms"],
  "background": {
    "service_worker": "background.js" // V3写法；V2用"scripts": ["background.js"]
  },
  "action": {
    "default_popup": "popup.html"
  }
}

如果后续要使用通知功能，还需添加"notifications"权限。

2. 纠正代码的存放位置 #

你提供的代码中使用了$("#time")、$("#submit")等jQuery操作DOM的逻辑，这部分代码属于popup页面的交互逻辑，不能放在background.js里：

• 新建popup.js文件，把这段代码移进去：

  'use strict';
  
  function setAlarm() {
      let minutes = parseFloat($("#time").val())
      chrome.alarms.create('reminderAlarm', {
          periodInMinutes: minutes
      })
      window.close()
  }
  
  $("#submit").click(setAlarm)
  

• 在你的popup.html中引入jQuery和popup.js：

  <!DOCTYPE html>
  <html>
  <head>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <input type="number" id="time" placeholder="输入分钟数">
    <button id="submit">设置提醒</button>
    <!-- 引入popup脚本 -->
    <script src="popup.js"></script>
  </body>
  </html>
  

3. 完善background.js的闹钟监听逻辑 #

background.js的作用是监听闹钟触发事件，添加以下代码实现提醒功能：

'use strict';

// 监听闹钟触发
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'reminderAlarm') {
    // 弹出桌面通知
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon.png', // 替换成你的图标路径
      title: '定时提醒',
      message: '设置的时间到了！'
    });
  }
});

4. 重新加载扩展 #

修改完所有文件后，打开Chrome扩展管理页面（输入chrome://extensions/），找到你的扩展，点击"重新加载"按钮，确保所有配置和代码生效。

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