Manifest V3 Chrome扩展background.js内存飙升问题排查求助

问题核心拆解 #

你遇到的情况是：基于Manifest V3的Chrome扩展每2秒抓取50KB HTML，任务管理器里background进程内存从20MB涨到60-200MB才小幅下降，偶尔Service Worker重启生成新ID；但DevTools堆内存仅从500KB涨到1MB，且只有调用response.text()时才出现内存增长，HTML内容似乎滞留在内存中，即使发消息保活，垃圾回收也没正常工作。

这里的关键差异是：任务管理器统计的是整个进程的总内存，包括V8堆外的浏览器资源（比如网络响应缓存、未释放的原生对象），而DevTools堆内存只统计JS层面的对象。所以这不是JS堆的内存泄漏，而是堆外资源未被及时回收，加上活跃状态抑制了垃圾回收。

关键原因解析 #

1. response.text()的资源滞留：调用response.text()时，浏览器会在堆外保存完整的响应数据。即使JS层面的text变量被回收，只要Service Worker一直活跃，浏览器可能不会主动清理这些堆外缓存，导致内存堆积。
2. 活跃状态抑制GC：每2秒一次的fetch请求+额外的保活消息，让Service Worker始终处于活跃状态。Chrome的垃圾回收会优先处理空闲进程，活跃进程的GC触发频率极低，资源得不到及时释放。
3. Service Worker的兜底机制：当内存占用过高时，Chrome会主动终止并重启Service Worker，这就是你看到新Worker ID的原因——浏览器在被动释放内存，但这不是正常的解决方式。

针对性解决方案 #

1. 显式禁止缓存并释放响应资源 #

修改fetch配置禁止缓存，同时主动取消原始响应的body，避免堆外资源滞留：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    if (msg.action === "fetch") {
        const url = `someurl`;
        fetch(url, { 
            method: "GET", 
            credentials: "omit",
            cache: "no-store" // 禁止浏览器缓存响应内容
        })
        .then(response => {
            // 先获取text的Promise，再主动取消原始响应的body
            const textPromise = response.text();
            response.body?.cancel();
            return textPromise;
        })
        .then(text => sendResponse({ success: true, html: text }))
        .catch(err => sendResponse({ success: false, error: err.message }));
        return true; 
    }
    return false;
});

2. 取消不必要的保活操作 #

没必要每20秒发runtime.sendMessage保活——只要有正在处理的fetch请求或消息监听，Manifest V3的Service Worker就不会被终止。额外的保活消息只会让进程持续活跃，阻碍GC。

3. 用流式读取替代全量text() #

如果不需要一次性拿到完整HTML，可以分段流式读取，减少内存占用：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    if (msg.action === "fetch") {
        const url = `someurl`;
        fetch(url, { 
            method: "GET", 
            credentials: "omit",
            cache: "no-store"
        })
        .then(response => {
            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let html = '';

            function readChunk({ done, value }) {
                if (done) {
                    sendResponse({ success: true, html: html });
                    reader.releaseLock(); // 释放读取器锁
                    return;
                }
                html += decoder.decode(value, { stream: true });
                return reader.read().then(readChunk);
            }

            return reader.read().then(readChunk);
        })
        .catch(err => sendResponse({ success: false, error: err.message }));
        return true; 
    }
    return false;
});

流式读取会分段处理响应，不会一次性把50KB HTML加载到内存，读完后立即释放读取器资源。

4. 调试时验证GC效果 #

在DevTools的Memory面板中，点击「Collect garbage」按钮强制触发垃圾回收，如果内存明显下降，就说明是GC延迟问题，优化代码和活跃状态后就能解决。

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