开发Chrome扩展：如何防止自定义选项在浏览器重启后重置为默认值？

嘿，我看你在开发第一款Chrome扩展时遇到了自定义选项重启后重置的问题，这其实是新手开发者常碰到的存储逻辑小坑，咱们来一步步搞定它！

问题诊断 #

你的代码已经用到了chrome.storage.sync（这是对的，它本来就是用来持久化存储扩展数据的），但问题大概率出在两个关键细节上：

1. 默认值初始化时没有判断已有数据，可能不小心覆盖用户设置
2. 页面加载时没有从存储中读取数据，而是直接用了默认值

修复方案 #

1. 先检查再初始化默认值（修改Background.js） #

当前你的onInstalled事件会直接覆盖savedSchedules，这会导致用户升级扩展时丢失已有数据，而且如果存储逻辑有疏漏，也可能让默认值“抢跑”。改成先读取存储，只有数据不存在时才设置默认值：

chrome.runtime.onInstalled.addListener(function() {
    // 先读取已有的存储数据，避免覆盖用户设置
    chrome.storage.sync.get('savedSchedules', function(data) {
        if (!data.savedSchedules) {
            var defaultSchedule = {
                "active": false,
            };
            chrome.storage.sync.set({ savedSchedules: [{"001": defaultSchedule}] }, function() {
                console.log("默认日程已初始化");
            });
        }
    });
});

2. 页面加载时主动读取存储数据（补充Options.js） #

你需要在Options页面加载完成后，从chrome.storage.sync中拉取已保存的设置，而不是直接用空数组或默认值。比如添加这段初始化逻辑：

document.addEventListener('DOMContentLoaded', function() {
    // 读取已保存的日程数据，没有的话用默认值兜底
    chrome.storage.sync.get('savedSchedules', function(data) {
        const savedSchedules = data.savedSchedules || [{"001": {"active": false}}];
        // 这里把数据渲染到页面上，比如更新你的选项列表、表单控件等
        // 举个例子：renderSavedSchedules(savedSchedules);
    });
});

3. 优化对象的重复判断逻辑（修改updateArray函数） #

你的updateArray里用array.includes(site)判断对象是否存在，但对象是引用类型，即使内容一样，引用不同也会判断为不存在，导致重复添加。可以利用你传入的scheduleIdKey来做精准判断：

function updateArray(addOrDelete, site, listName, isObject, objectTargetKey=null, valueTargetKey=null, newValue=null){
    chrome.storage.sync.get(listName, function(data) {
        var array = data[listName] ? data[listName] : [];
        if (addOrDelete == "add"){
            let shouldAdd = true;
            if (isObject && objectTargetKey) {
                // 根据指定的ID键判断对象是否已存在
                shouldAdd = !array.some(item => item[objectTargetKey] === site[objectTargetKey]);
            } else {
                // 非对象类型用includes判断
                shouldAdd = !array.includes(site);
            }
            if (shouldAdd) {
                array.push(site);
            }
        }
        // 如果需要delete操作，可以在这里补充对应的逻辑
        const jsonObj = { [listName]: array };
        chrome.storage.sync.set(jsonObj, function() {
            console.log("数据已保存:", jsonObj[listName]);
        });
    });
}

验证方法 #

修改完后，你可以按以下步骤测试：

• 打开扩展选项，添加自定义设置
• 关闭并重启Chrome浏览器
• 重新打开选项页面，检查设置是否保留
• 也可以在Chrome开发者工具的Application -> Storage -> Sync Storage里直接查看存储的数据，确认是否正确保存

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