Chrome扩展window.onbeforeunload失效，无法存储数组至本地存储

Chrome扩展的弹窗（Popup）窗口关闭时，window.onbeforeunload事件的触发本身就不可靠；而且即便事件触发了，异步的chrome.storage.local.set操作大概率还没完成，浏览器就已经销毁了弹窗页面进程，直接导致存储失败。

1. 实时更新存储（推荐） #

放弃依赖窗口关闭事件，改为在数据发生变化的第一时间就调用存储API，确保数据实时同步到本地存储：

let products;

// 初始化获取存储的数据
chrome.storage.local.get({prods: []}, function(result) {
    products = result.prods;
    console.log(result.prods);
});

// 封装更新函数，数据变化时调用
function saveProducts(newProducts) {
    products = newProducts;
    chrome.storage.local.set({prods: products}, () => {
        console.log('数据已保存');
    });
}

// 示例：更新数据时触发保存
saveProducts([{ name: "bag", price: 22}]);

2. 改用unload事件并尝试确保异步完成 #

如果必须在窗口关闭时保存，可以尝试使用unload事件配合存储API的Promise版本，但这种方式仍存在失败风险（浏览器可能不等异步操作完成就终止页面）：

let products = [{ name: "bag", price: 22}];

// 初始化获取数据
chrome.storage.local.get({prods: []}).then(result => {
    products = result.prods;
    console.log(result.prods);
});

window.addEventListener('unload', async () => {
    await chrome.storage.local.set({prods: products});
    console.log('数据已保存');
});

3. 借助Background Service Worker处理存储 #

利用Background Service Worker更长的生命周期，将数据同步到Worker后，由Worker在自身暂停时完成存储：

• popup.js：数据变化时通知Background

let products = [{ name: "bag", price: 22}];

chrome.storage.local.get({prods: []}).then(result => {
    products = result.prods;
});

// 通知Background更新数据
function syncToBackground() {
    chrome.runtime.sendMessage({type: 'UPDATE_PRODUCTS', data: products});
}

// 窗口关闭时同步最后一次数据
window.addEventListener('unload', syncToBackground);

• background.js：接收数据并在暂停时存储

let cachedProducts = [];

// 接收Popup的消息，缓存数据
chrome.runtime.onMessage.addListener((message) => {
    if (message.type === 'UPDATE_PRODUCTS') {
        cachedProducts = message.data;
    }
});

// Service Worker暂停时保存缓存的数据
chrome.runtime.onSuspend.addListener(() => {
    chrome.storage.local.set({prods: cachedProducts});
});

确保manifest.json中正确配置权限和Background Service Worker：

{
    "manifest_version": 3,
    "name": "你的扩展名称",
    "version": "1.0",
    "permissions": ["storage"],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    }
}

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