Chrome扩展后台脚本在弹窗关闭后停止运行问题求助

嘿，这个问题我太熟了！你遇到的核心问题是：弹窗（popup）是临时上下文，关闭后里面的JS就停止运行了，而你之前应该是把创建通知的逻辑放在了弹窗脚本里，所以弹窗一关，代码就“消失”了，自然发不了通知。要解决这个，得把核心逻辑移到后台脚本（background.js）里，因为它是长期驻留后台的组件。

下面一步步给你讲怎么改：

1. 先检查Manifest配置（关键！） #

首先确保你的manifest.json正确配置了后台脚本，并且申请了必要权限。分Manifest V2和V3两种情况：

如果你用Manifest V3（现在推荐的版本） #

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  // 配置后台Service Worker
  "background": {
    "service_worker": "background.js"
  },
  // 必须申请notifications权限才能创建通知
  "permissions": ["notifications"],
  "action": {
    "default_popup": "popup.html"
  }
}

如果你用Manifest V2 #

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true // 设为true让后台页面持续运行
  },
  "permissions": ["notifications"],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

2. 改造弹窗脚本（popup.js） #

弹窗只需要做一件事：点击按钮时给后台脚本发消息，触发通知逻辑，不用自己处理创建通知的代码。比如：

document.getElementById("notify").addEventListener("click", () => {
  // 给后台发送消息，告诉它要显示通知
  chrome.runtime.sendMessage({ action: "showNotification" });
});

3. 在后台脚本（background.js）里实现通知逻辑 #

后台脚本是长期运行的，即使弹窗关闭，它也能接收消息并执行代码：

// 监听来自弹窗的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 判断消息类型，执行对应的逻辑
  if (message.action === "showNotification") {
    showMyNotification();
  }
});

// 封装创建通知的函数
function showMyNotification() {
  const options = {
    type: "progress",
    title: "My first popup",
    message: "hello world",
    iconUrl: "twitter.png", // 确保这个图标在扩展根目录下
    progress: 90
  };

  // 创建通知（Manifest V3和V2都用这个API）
  chrome.notifications.create(options, (notificationId) => {
    console.log("通知已创建，ID：", notificationId);
  });
}

为什么这样改就有效？ #

• 弹窗是临时的，关闭后整个上下文就被销毁了，所以任何放在弹窗里的逻辑都会停止。
• 后台脚本（V3的Service Worker或V2的Background Page）是Chrome扩展的“后台大脑”，只要扩展没被Chrome主动终止（正常使用下不会），它会一直处于活跃状态（或者在需要时被唤醒），所以通知逻辑放在这里，不管弹窗开不开都能正常运行。

最后补充个小提醒：如果用Manifest V3的Service Worker，它是事件驱动的，闲置时会休眠，但当收到消息时会自动唤醒，完全不影响功能~

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