Chrome扩展MV3迁移：含window/document的背景脚本转Service Worker方案

针对MV3移除Background脚本、Service Worker无法存储类实例的问题，给你三个可落地的重构方向：

1. 拆分数据与业务逻辑，分离状态与方法 #

把原App实例里的会话数据、设置抽出来存在chrome.storage.local，把init()这类操作方法拆成独立的工具模块，在Service Worker和Popup里分别引入调用。

比如：

• 新建app-utils.js（作为共享模块）：

// 业务方法独立封装
export const initApp = async () => {
  const storedData = await chrome.storage.local.get('appData');
  // 原init逻辑，基于存储的数据处理
  const newData = { ...storedData, initialized: true };
  await chrome.storage.local.set({ appData: newData });
  return newData;
};

export const updateSetting = async (key, value) => {
  const { appData } = await chrome.storage.local.get('appData');
  appData.settings[key] = value;
  await chrome.storage.local.set({ appData });
};

• Service Worker里直接调用工具方法初始化：

import { initApp } from './app-utils.js';

// 启动时初始化
self.addEventListener('install', async () => {
  await initApp();
});

• Popup里同样引入工具方法操作：

import { updateSetting, initApp } from './app-utils.js';

document.getElementById('btn').addEventListener('click', async () => {
  await updateSetting('theme', 'dark');
});

2. 基于消息通信，让Service Worker处理核心逻辑 #

把Service Worker作为后台逻辑的唯一入口，Popup通过发送消息请求Service Worker执行App的方法，不需要直接获取实例。

示例：

• Service Worker里监听消息：

// 这里可以在Service Worker内部维护内存状态（注意SW可能被回收，重要数据还是要存storage）
let appState = {};

self.addEventListener('message', async (event) => {
  const { action, payload } = event.data;
  switch(action) {
    case 'init':
      const stored = await chrome.storage.local.get('appData');
      appState = { ...stored, initialized: true };
      await chrome.storage.local.set({ appData: appState });
      event.source.postMessage({ status: 'ok', data: appState });
      break;
    case 'getUserInfo':
      event.source.postMessage({ data: appState.userInfo });
      break;
    // 其他操作...
  }
});

• Popup里发消息调用：

document.getElementById('initBtn').addEventListener('click', async () => {
  const response = await chrome.runtime.sendMessage({ action: 'init' });
  console.log('初始化完成', response.data);
});

3. 重构App类为无状态服务 #

把原App类改成纯静态方法或者依赖外部存储的结构，不需要实例化，所有状态都存在chrome.storage里。

示例：

class App {
  static async init() {
    const data = await chrome.storage.local.get('appData');
    const initData = data.appData || { settings: {}, userInfo: null };
    initData.initialized = true;
    await chrome.storage.local.set({ appData: initData });
  }

  static async getSettings() {
    const { appData } = await chrome.storage.local.get('appData');
    return appData.settings;
  }

  static async setSetting(key, value) {
    const { appData } = await chrome.storage.local.get('appData');
    appData.settings[key] = value;
    await chrome.storage.local.set({ appData });
  }
}

// Service Worker里调用
App.init();

// Popup里调用
await App.setSetting('theme', 'light');

注意点 #

• Service Worker可能会被浏览器回收，内存状态会丢失，所以重要数据必须存在chrome.storage.local/sync里，不要依赖SW的内存变量。
• 如果需要长时间维持的临时会话数据，可以考虑用chrome.storage.session，它和MV2的window.sessionStorage类似，会话结束就清空。

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