Chrome扩展弹窗关闭后Django后端定时请求中断问题排查

你把定时任务的监听和执行逻辑全放在了弹窗的React组件里，Chrome扩展的弹窗本质是临时页面，关闭后整个页面上下文会被销毁——包括你在componentDidMount里注册的chrome.alarms.onAlarm监听器，还有sendML、checkRoadblock这些自定义函数。哪怕任务不依赖弹窗UI，只要监听器是在弹窗页面注册的，弹窗一关，监听器就失效了，所有定时请求自然会停止。

另外代码里还有两个隐性问题：

• checkRoadblock和checkCompletion里直接修改this.state（比如this.state.isRoadblock = true），React要求必须用setState更新状态，直接修改不仅不会触发组件渲染，还会导致状态逻辑混乱。
• checkRoadblock里的this指向错误，用普通函数定义的checkRoadblock，内部this并非组件实例，访问this.state会报错（弹窗打开时可能没暴露，但实际逻辑已经异常）。

1. 把定时任务移到后台脚本 #

扩展的后台脚本是长期运行的独立上下文，不受弹窗开闭影响，所有定时逻辑都应该放在这里。

新建background.js：

// 定义定时执行的请求函数
function sendML() {
  axios.get("http://127.0.0.1:8000/ml/rbml").then(res => {
    console.log("ml/rbml: ", res.data);
  });
}

function textComps() {
  axios.get("http://127.0.0.1:8000/api/textcomps").then(res => {
    console.log("api/textcomps: ", res.data);
  });
}

function checkRoadblock() {
  axios.get("http://127.0.0.1:8000/api/roadblock").then(res => {
    console.log("api/roadblock: ", res.data);
    if (res.data) {
      // 后台不能用alert，改用Chrome原生通知API
      chrome.notifications.create({
        type: 'basic',
        iconUrl: '你的图标文件路径',
        title: '遇到学习障碍',
        message: '你遇到了学习障碍！\n' + tips[Math.floor(Math.random()*tips.length)]
      });
    }
  }).catch(error => {
    console.log('请求错误: ' + error);
  });
}

function checkCompletion() {
  axios.get("http://127.0.0.1:8000/api/completion").then(res => {
    console.log("api/completion: ", res.data);
    if (res.data) {
      chrome.notifications.create({
        type: 'basic',
        iconUrl: '你的图标文件路径',
        title: '目标完成！',
        message: '恭喜你完成了任务！'
      });
    }
  }).catch(error => {
    console.log('请求错误: ' + error);
  });
}

// 扩展安装/更新时注册闹钟
chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create("roadblockAlarm", {periodInMinutes: 0.1});
  chrome.alarms.create("sendMLAlarm", {periodInMinutes: 5});
});

// 监听闹钟触发事件
chrome.alarms.onAlarm.addListener(alarm => {
  console.log("闹钟触发: ", alarm.name);
  if (alarm.name === "roadblockAlarm") {
    textComps();
    checkRoadblock();
    checkCompletion();
  } else if (alarm.name === "sendMLAlarm") {
    sendML();
  }
});

在manifest.json里配置后台脚本（以Manifest V3为例）：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["alarms", "notifications", "tabs"],
  // 其他扩展配置...
}

2. 修正弹窗组件的职责 #

弹窗只负责用户交互逻辑，比如提交wordpageCount和获取当前标签页URL：

sendThr = () => {
  axios.post('http://127.0.0.1:8000/ml/thr', {
    wordpageCount: this.state.wordpageCount
  }).then((res) => {
    console.log(res.data);
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const activeTab = tabs[0].url;
      axios.post('http://127.0.0.1:8000/ml/link', { activeTab })
        .then(res => {
          console.log("ml/link: ", res.data);
        });
    });
    Swal.fire({
      title: `预计需要 ${res.data.toFixed(2)} 分钟`,
      icon: 'success',
      confirmButtonText: 'OK'
    });
  });
}

3. 关键注意事项 #

• 后台脚本不能使用React API，也无法访问弹窗的DOM或state，需要持久化的数据请用chrome.storage存储。
• 后台脚本禁止用alert，必须用chrome.notifications API展示通知，因为后台没有UI上下文。
• Manifest V3的后台是Service Worker，可能会被Chrome休眠，但chrome.alarms触发时会自动唤醒它，无需担心任务中断。

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