Chrome扩展如何在页面DOM加载前完成chrome.storage.sync数据读取？

问题原因 #

chrome.storage系列API均为异步非阻塞设计，回调执行会被推入浏览器异步任务队列，和同步执行的MutationObserver初始化逻辑没有固定时序保证，因此无法确保存储读取在DOM监听启动前完成。

方案1：延迟启动MutationObserver（最简单通用） #

将MutationObserver的初始化和启动逻辑完全放到storage读取的回调内，确保只有数据加载完成后才开始监听DOM变动：

window.toDelete = [];

chrome.storage.sync.get('course', function(entries){
    window.toDelete = deserializeEntries(entries.course);
    console.log("hello");
    // 拿到数据后再初始化并启动监听
    const observer = new MutationObserver(function(mutations) {
        // 原有DOM变动处理逻辑，此时toDelete已加载完成
        mutations.forEach(mutation => {
            // 处理节点匹配、重构逻辑
        })
    })
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
        // 保留你原有的监听配置
    })
})

方案2：加缓冲队列适配早启动监听场景 #

如果页面DOM加载速度极快，延迟启动监听可能漏过初始DOM节点，可先启动监听缓存变动，等数据加载完成后再统一处理：

window.toDelete = [];
// 存储未加载完成前的DOM变动缓冲队列
const mutationBuffer = [];
let isStorageLoaded = false;

// 立即启动监听，变动先存入缓冲队列
const observer = new MutationObserver(function(mutations) {
    if (!isStorageLoaded) {
        mutationBuffer.push(...mutations);
        return;
    }
    // 数据加载完成后正常处理实时变动
    handleMutations(mutations);
})

observer.observe(document.documentElement, {
    childList: true,
    subtree: true
    // 保留原监听配置
})

// 存储读取完成后批量处理缓存变动，再标记加载完成
chrome.storage.sync.get('course', function(entries){
    window.toDelete = deserializeEntries(entries.course);
    console.log("hello");
    // 处理之前缓存的所有DOM变动
    handleMutations(mutationBuffer);
    isStorageLoaded = true;
})

// 抽离公共的变动处理逻辑，避免重复代码
function handleMutations(mutations) {
    mutations.forEach(mutation => {
        // 原有DOM变动处理逻辑
    })
}

优化建议 #

• 无跨设备同步数据需求时，优先使用chrome.storage.local替代chrome.storage.sync，前者仅读写本地存储，速度远高于需要同步云端的sync API，基本不会出现明显的异步延迟
• 在扩展manifest.json的内容脚本配置中添加"run_at": "document_start"，确保你的脚本在页面DOM开始解析前就运行，提前触发存储读取逻辑，进一步降低时序冲突概率

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