如何將全局變量從 MV2 重構為在 MV3 service worker 中使用 chrome.storage？

Question

要在遷移到 MV3 Service Worker 時刪除 MV2 后台腳本中使用的全局變量，我發現的所有指南都給出了一個示例，即用幾行設置替換單個全局變量，然后使用 chrome.storage ，但我仍然不清楚如何在更復雜的場景中使用它。

例如：

const activatedTabs = [];
let lastActiveTabInfo;
chrome.tabs.onActivated.addListener((activeInfo) => {
  if (activatedTabs.length === 0) {
    activatedTabs.push(activeInfo.tabId);
    lastActiveTabInfo = activeInfo;
  }
}

如何重構上面的代碼片段以使用 chrome.storage 並刪除全局變量？

Answer 1

狀態中的變量數量不會改變方法：

1. 讀取腳本開頭的狀態
2. 保存更改狀態

對於小數據（總共 1MB）使用 chrome.storage.session，它在內存中，即它不寫入磁盤，否則使用 chrome.storage.local。 兩者都只能存儲與 JSON 兼容的類型，即字符串、數字、布爾值、空值、此類類型的數組/對象。 還有用於 Blob 或 Uint8Array 的 IndexedDB。

let activatedTabs;
let lastActiveTabInfo;
let busy = chrome.storage.session.get().then(data => {
  activatedTabs = data.activatedTabs || [];
  lastActiveTabInfo = data.lastActiveTabInfo;
  busy = null;
});
const saveState = () => chrome.storage.session.set({
  activatedTabs,
  lastActiveTabInfo,
});

chrome.tabs.onActivated.addListener(async info => {
  if (!activatedTabs.length) {
    if (busy) await busy;
    activatedTabs.push(info.tabId);
    lastActiveTabInfo = info;
    await saveState();
  }
});

您還可以改為維護具有屬性的單個對象：

const state = {
  activatedTabs: [],
  lastActiveTabInfo: null,
};
const saveState = () => chrome.storage.session.set({ state });
let busy = chrome.storage.session.get('state').then(data => {
  Object.assign(state, data.state);
  busy = null;
});

chrome.tabs.onActivated.addListener(async info => {
  if (!state.activatedTabs.length) {
    if (busy) await busy;
    state.activatedTabs.push(info.tabId);
    state.lastActiveTabInfo = info;
    await saveState();
  }
});

請注意，如果您訂閱了 tabs.onActivated 之類的頻繁事件，您的 service worker 可能每天重啟數百次，這比保持空閑的持久后台頁面浪費更多的資源。 Chromium 團隊忽略了這個問題，但你不應該這樣做，幸運的是，有一種方法可以通過延長 SW 生命周期來減少重啟次數。 您仍然需要讀取/保存狀態，如圖所示。