Chrome扩展迁移Manifest V3：Service Worker功能失效求助

我接手了一款Chromebook内部使用的扩展，用于将当前登录用户的身份认证信息传递给Web服务器。该扩展在Manifest V2下运行正常，但迁移至Manifest V3后，后台脚本功能未运行，仅能正常安装。

原Manifest V2配置 #

Manifest文件 #

{
"background": {
  "scripts": [ "background.min.js" ]
},
"description": "User Agent",
"icons": {
  "128": "icon.png",
  "16": "icon.png"
},
"manifest_version": 2,
"name": "User Agent",
"permissions": [ "background", "identity", "identity.email", "http://*/", "https://*/" ],
"version": "1.0.3"
}

后台脚本（background.min.js） #

(function() {
var e = void 0,
    n = new Event("userInfoChanged"),
    t = 0,
    a = function() {
        chrome.identity.getProfileUserInfo(function(a) {
            var o = !1;
            o = (new Date).getTime() > t + 179e4 || e != a.email, e = a.email, o && (n.username = e, document.dispatchEvent(n))
        })
    };
document.addEventListener("userInfoChanged", function(e) {
    t = (new Date).getTime();
    var n = new XMLHttpRequest;
    n.open("GET", "URL_TO_WEB_SERVER" + encodeURIComponent(btoa(e.username)), !0), n.send()
}, !1), setInterval(a, 6e4), a(), setInterval(function() {
    n.username = e, document.dispatchEvent(n)
}, 18e5)
 }).call(this);

已尝试的Manifest V3修改 #

更新后的Manifest文件 #

{
 "background": {
  "service_worker": "background.min.js"
 },
 "description": "User Agent",
 "icons": {
    "128": "icon.png",
    "16": "icon.png"
 },
 "manifest_version": 3,
 "name": "User Agent",
 "permissions": ["alarms", "background", "identity", "identity.email", "http://*/", 
"https://*/" ],
"version": "1.2.0"
}

更新后的后台脚本 #

chrome.alarms.onAlarm.addListener(a => {
console.log('Alarm! Alarm!', a);
});

 chrome.runtime.onInstalled.addListener(() => {
 chrome.alarms.get('alarm', a => {
 if (!a) {
   chrome.alarms.create('alarm', {periodInMinutes: 1});
 }
});
  });



  (function() {
  var e = void 0,
     n = new Event("userInfoChanged"),
     t = 0,
     a = function() {
         chrome.identity.getProfileUserInfo(function(a) {
            var o = !1;
            o = (new Date).getTime() > t + 179e4 || e != a.email, e = a.email, o && (n.username = e, document.dispatchEvent(n))
        })
    };
document.addEventListener("userInfoChanged", function(e) {
    t = (new Date).getTime();
    var n = new XMLHttpRequest;
    n.open("GET", "URL_TO_WEB_SERVER" + encodeURIComponent(btoa(e.username)), !0), n.send()
}, !1), setInterval(a, 6e4), a(), setInterval(function() {
    n.username = e, document.dispatchEvent(n)
}, 18e5)
}).call(this);

问题原因分析 #

Manifest V3的Service Worker和V2的Background Page有本质差异，原代码中的几个核心问题导致功能失效：

• document对象不存在：Service Worker是无DOM环境的，无法使用document创建事件或添加事件监听，原代码中的new Event("userInfoChanged")和document.dispatchEvent、document.addEventListener全部无效。
• setInterval不可靠：Service Worker会在闲置时被终止，setInterval无法保证持续运行，必须使用Chrome扩展提供的chrome.alarms替代。
• 权限配置错误：Manifest V3中网络访问权限需拆分到host_permissions字段，原配置将其混在permissions中可能导致权限失效。
• 代码结构混乱：新增的alarms逻辑和原V2代码未整合，原代码的初始化逻辑未正确绑定到Service Worker的启动事件。

修复方案 #

步骤1：修正Manifest文件权限 #

移除不必要的background权限，拆分网络访问权限到host_permissions：

{
 "background": {
  "service_worker": "background.min.js"
 },
 "description": "User Agent",
 "icons": {
    "128": "icon.png",
    "16": "icon.png"
 },
 "manifest_version": 3,
 "name": "User Agent",
 "permissions": ["alarms", "identity", "identity.email"],
 "host_permissions": ["http://*/", "https://*/"],
 "version": "1.2.0"
}

步骤2：重写后台Service Worker脚本 #

完全适配Service Worker环境，用chrome.alarms替代setInterval，移除DOM相关代码，改用fetch API发送请求：

let currentEmail = null;
let lastSyncTime = 0;
const SYNC_INTERVAL_MINUTES = 1;
const FORCE_SYNC_INTERVAL_MINUTES = 30;
const SYNC_THRESHOLD = 179000; // 对应原代码的179e4毫秒

// 获取用户信息并同步到服务器
async function syncUserInfo() {
  try {
    const userInfo = await new Promise((resolve) => {
      chrome.identity.getProfileUserInfo(resolve);
    });

    const now = Date.now();
    const needsSync = now > lastSyncTime + SYNC_THRESHOLD || currentEmail !== userInfo.email;

    if (needsSync) {
      currentEmail = userInfo.email;
      lastSyncTime = now;
      await fetch(`URL_TO_WEB_SERVER${encodeURIComponent(btoa(currentEmail))}`);
    }
  } catch (error) {
    console.error('同步用户信息失败:', error);
  }
}

// 强制同步逻辑
async function forceSync() {
  if (currentEmail) {
    try {
      await fetch(`URL_TO_WEB_SERVER${encodeURIComponent(btoa(currentEmail))}`);
      lastSyncTime = Date.now();
    } catch (error) {
      console.error('强制同步失败:', error);
    }
  }
}

// 初始化闹钟与首次同步
chrome.runtime.onInstalled.addListener(() => {
  // 创建定时同步闹钟
  chrome.alarms.get('syncAlarm', (alarm) => {
    if (!alarm) chrome.alarms.create('syncAlarm', { periodInMinutes: SYNC_INTERVAL_MINUTES });
  });
  // 创建强制同步闹钟
  chrome.alarms.get('forceSyncAlarm', (alarm) => {
    if (!alarm) chrome.alarms.create('forceSyncAlarm', { periodInMinutes: FORCE_SYNC_INTERVAL_MINUTES });
  });
  // 首次启动立即同步
  syncUserInfo();
});

// 监听闹钟触发事件
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'syncAlarm') syncUserInfo();
  else if (alarm.name === 'forceSyncAlarm') forceSync();
});

// 扩展启动时触发同步（处理Service Worker被唤醒的情况）
chrome.runtime.onStartup.addListener(syncUserInfo);

步骤3：测试验证 #

• 在Chrome扩展管理页面，进入扩展的详细信息 -> 背景页面，查看Service Worker控制台输出，确认日志正常。
• 检查浏览器网络请求记录，确认同步请求已发送到目标服务器。
• 等待对应时间间隔，验证定时同步逻辑是否正常触发。

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