Chrome扩展开发：点击通知打开HTML页面的实现问题

问题根源 #

1. 错误将页面打开逻辑放在了通知创建完成的回调里，而非点击事件的回调中
2. Service Worker环境无window对象，无法使用window.open，必须依赖Chrome扩展的tabs API实现页面打开

修正步骤 #

1. 替换setInterval为chrome.alarms API

Service Worker可能因闲置被浏览器终止，chrome.alarms会自动唤醒后台脚本，是Manifest V3中推荐的定时任务方案，能保证任务稳定执行。

2. 监听通知点击事件

通过chrome.notifications.onClicked监听用户点击通知的行为，在回调中使用chrome.tabs.create打开指定页面。

修改后的background.js代码

// 初始化定时任务（每1分钟触发一次）
chrome.alarms.create('breakReminder', { periodInMinutes: 1 });

// 监听定时任务触发
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'breakReminder') {
    showNotification();
  }
});

// 显示通知
function showNotification() {
  const opt = {
    type: "basic",
    title: "Gympass",
    message: "You have been working for too long on Chrome. Would you like to take a break?",
    iconUrl: "logo.png",
    priority: 1
  };
  // 创建通知时指定ID，方便后续识别
  chrome.notifications.create('breakNotification', opt);
}

// 监听通知点击事件
chrome.notifications.onClicked.addListener((notificationId) => {
  if (notificationId === 'breakNotification') {
    // 使用tabs API打开扩展内的HTML页面
    chrome.tabs.create({
      url: chrome.runtime.getURL('PAGE.html'),
      active: true // 激活新打开的标签页
    });
    // 点击后关闭通知（可选操作）
    chrome.notifications.clear(notificationId);
  }
});

额外说明 #

• 你的manifest.json已包含tabs权限，无需额外配置
• chrome.runtime.getURL('PAGE.html')会自动将相对路径转换为扩展的绝对URL（格式为chrome-extension://[扩展ID]/PAGE.html），确保页面能正确加载
• 若需在当前标签页打开页面，可将chrome.tabs.create替换为chrome.tabs.update，并指定目标tab的ID

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