Chrome扩展Manifest V3调用getBackgroundPage无法访问后台变量如何解决

问题原因 #

1. 你使用的是Manifest V3版本的扩展，背景层采用Service Worker而非Manifest V2的背景页，chrome.runtime.getBackgroundPage()本质是获取背景页的window全局对象，在V3环境下本身就不适用；其次你调用该API时没有传入要求的回调参数，才会抛出签名不匹配的错误。
2. 你当前的background.js逻辑存在问题：倒计时变量timeinSec定义在updateTimer函数内部，每次调用都会重置为40分钟的总秒数，根本无法实现正常倒计时。

修复方案 #

1. 修改 background.js #

// 倒计时变量移到全局作用域
const StartingMinutes = 40;
let timeinSec = StartingMinutes * 60;

// 每秒更新倒计时
setInterval(updateTimer, 1000);
function updateTimer() {
  if (timeinSec <= 0) {
    // 计时结束弹出饮水提醒
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icon.png', // 自行补充扩展图标路径即可
      title: '该喝水啦',
      message: '兄弟，到点喝杯水休息下'
    });
    // 重置倒计时
    timeinSec = StartingMinutes * 60;
    return;
  }
  timeinSec--;
}

// 监听popup的消息请求，返回当前计时数据
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'getTimer') {
    const minutes = Math.floor(timeinSec / 60);
    let seconds = timeinSec % 60;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    sendResponse({ minutes, seconds });
  }
});

2. 修改 popup.js #

const minutesEl = document.querySelector('.minutes-span');
const secondsEl = document.querySelector('.seconds-span');

// 每秒请求背景层的计时数据，更新页面显示
setInterval(async () => {
  const timeData = await chrome.runtime.sendMessage({ type: 'getTimer' });
  minutesEl.textContent = timeData.minutes;
  secondsEl.textContent = timeData.seconds;
}, 1000);

3. 修改 manifest.json #

新增通知权限，确保计时结束可以正常弹出提醒：

{
    "name": "Hydro Homies",
    "description": "Do not forget to drink my Homies",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
      "service_worker": "background.js"
    },
    "permissions": ["background", "notifications"], 
    "action": {
      "default_popup": "popup.html"
    }
}

补充说明 #

如果要避免Service Worker休眠导致计时器停止，更稳定的长周期计时方案可以替换setInterval为chrome.alarmsAPI实现。

内容的提问来源于stack exchange，提问作者Gregor Köhler