Chrome扩展MV3：异步函数内chrome.alarms.onAlarm监听器失效问题咨询

问题背景 #

Chrome扩展MV3要求Service Worker在**事件循环第一回合（顶层代码）**注册事件监听器，但实际开发中，未遵循该规范的代码有时能正常运行。本次问题中，由于Service Worker内使用了过多async/await异步操作，导致chrome.alarms.onAlarm监听器在异步流程后才注册，最终出现Service Worker被alarm唤醒但完全不处理事件的bug。

复现代码 #

存在bug的Service Worker代码 #

(async () => {
  log("Starting SW...");
  await chrome.alarms.clear("my-alarm");

  // 清除已有闹钟
  log("Alarms cleaned up");
  chrome.alarms.getAll((alarms) => {
    log("Cleaned?", alarms);
  });

  // 创建周期闹钟
  await chrome.alarms.create("my-alarm", {
    periodInMinutes: 1,
  });
  log("Alarm created");
  chrome.alarms.getAll((alarms) => {
    log("Created?", alarms);
  });

  // 异步流程后添加监听器
  chrome.alarms.onAlarm.addListener((alarm) => {
    log("Our listener fired");
    if (alarm.name === "my-alarm") {
      log("Omg my alarm has been triggered");
    }
  });
  log("Listener added. Finishing.");
})();

// 调试日志工具：将日志推送到本地服务器
function log(...data) {
  console.log(...data);
  fetch(`http://127.0.0.1:3000/?t=${JSON.stringify(data)}`).catch((e) => {});
}

本地日志服务器代码 #

// 简易日志接收服务器
const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  let content;

  try {
    content = decodeURIComponent(req.url);
  } catch (e) {
    content = req.url;
  }

  console.log(new Date().toLocaleTimeString(), "|", content);
  
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello, World!\n");
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

修复后的关键改动（添加顶层dummy监听器） #

// 顶层添加dummy监听器
chrome.alarms.onAlarm.addListener((alarm) => {
  log("Top level listener fired for", alarm.name);
});

// 原异步代码逻辑...

核心问题解答 #

1. 能否通过顶层dummy监听器确保alarm事件正常传递？ #

可以。只要在Service Worker顶层注册了对应事件的监听器（哪怕是一个空逻辑的dummy监听器），Chrome就会将该事件纳入Service Worker的监听范围，后续在异步流程中添加的监听器也能正常接收事件。

2. 背后的机制是什么？ #

Chrome为了优化Service Worker的生命周期，会在SW启动的事件循环第一回合扫描顶层代码中的监听器注册，标记该SW需要响应哪些事件。如果没有顶层监听器，Chrome可能不会为该事件唤醒SW，或者唤醒后不会将事件分发给后续异步添加的监听器。

一旦有一个顶层监听器被注册，Chrome就会持续监听该事件：当事件触发时，Chrome会唤醒SW，并且将事件分发给所有已注册的监听器（包括异步流程中添加的），因为此时SW的事件系统已经被激活。

注意事项 #

虽然这种方法可以解决问题，但更规范的做法是尽量在顶层代码中注册监听器，避免依赖这种临时 workaround。如果业务逻辑确实需要异步初始化后再注册监听器，这种方法是可行的替代方案。

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