Chrome页面源码下载扩展性能问题及代码疑问求助

问题背景 #

这是我首次开发的Chrome扩展，核心功能是每10秒左右下载指定页面的文本格式源码，随后刷新页面重复操作，用于监测页面变更。但同时打开4-6个监测标签页时，浏览器运行时间越长越卡顿，另外对代码中两处标记idk的逻辑存在疑问，需要帮忙排查卡顿原因、解释代码并评估其他潜在问题。

代码展示 #

manifest.json #

{
    "manifest_version": 2,
    "name": "YggRSS",
    "version": "1.0",
    "description": "Obtention du flux RSS depuis Yggtorrent",
    "permissions": ["tabs", "activeTab", "http://*/*", "https://*/*","downloads","management"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "YggRSS"
    }
}

background.js #

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {    
    if (changeInfo.status == 'complete') {
        // Check if this is my target
        var expression = /mywebsite.*status/;
        if (expression.test(tab.url)) {
            
            // Get source code
            fetch(tab.url)
                .then(response => response.text())
                .then(data => {
                    // Check if sourcecode contains statusdetails
                    if (data.includes("atom-78")) {
                        // File name will be like sc_78_.txt for a page with the id 78
                        const match = tab.url.match(/id=(\d+)/);
                        if (match && match[1]) {
                            const id = match[1];
                            const filename = 'sc_' + id + '_' + '.txt';

                            // Idk but it works
                            const blob = new Blob([data], { type: 'text/plain' });
                            const urlData = URL.createObjectURL(blob);

                            // Download the file
                            chrome.downloads.download({
                                url: urlData,
                                filename: filename,
                                conflictAction: 'uniquify',
                                saveAs: false
                            }, (downloadId) => {

                                // // After 8s, remload (don't works with more that 10s)
                                setTimeout(() => {
                                    chrome.tabs.update(tabId, { url: tab.url });
                                }, 8000);
                            });

                            // Idk but looks required
                            URL.revokeObjectURL(urlData);
                        } else {
                            alert('No id found.');
                        }
                    } else {
                        // Page load fail, reload
                        setTimeout(() => {
                                    chrome.tabs.update(tabId, { url: tab.url });
                                }, 10000);
                    }
                })
                .catch(error => {
                    alert('Unknown error', error);
                });
        }
    }
});

卡顿原因排查 #

1. 双重网络请求叠加：页面加载完成后（changeInfo.status='complete'），又通过fetch重新请求一次页面内容，每个监测周期对同一页面发起两次请求（标签页自身加载+fetch），4-6个标签页同时运行时，网络请求和资源占用直接翻倍。
2. 频繁页面刷新的渲染开销：每8-10秒强制刷新标签页，浏览器需要反复解析HTML、渲染DOM、加载资源，多个标签页同时刷新会导致CPU、内存占用急剧上升，尤其目标页面包含复杂DOM或外部资源时，卡顿会更明显。
3. 资源泄漏风险：当前代码在调用chrome.downloads.download后立刻执行URL.revokeObjectURL，可能导致下载未完成时Blob资源被提前释放，不仅可能引发下载失败，还会导致浏览器内存中残留无效引用；另外频繁创建下载文件，浏览器下载历史和临时文件的积累也会加重资源负担。
4. 事件重复触发：tabs.onUpdated事件可能在页面加载过程中多次触发（如状态从loading到complete的中间阶段），可能导致同一页面被多次触发fetch和刷新逻辑，进一步加重资源消耗。

标记idk代码逻辑解释 #

第一部分：Blob与ObjectURL创建 #

const blob = new Blob([data], { type: 'text/plain' });
const urlData = URL.createObjectURL(blob);

• Blob是将字符串格式的页面源码，转换成浏览器可识别的二进制大对象（Binary Large Object）；
• URL.createObjectURL会为这个Blob生成一个临时的本地资源URL，因为chrome.downloads.download的url参数仅支持可访问的资源地址（不能直接传字符串），通过这个临时URL，下载器才能读取Blob中的源码内容并保存为本地文件。

第二部分：ObjectURL释放 #

URL.revokeObjectURL(urlData);

• 调用createObjectURL时，浏览器会在内存中保留对Blob对象的引用，若不主动释放，这些引用会一直占用内存直到浏览器关闭；
• 这个方法的作用就是手动释放临时URL占用的内存，避免内存泄漏，但注意必须在下载完成后再执行，当前代码的执行时机错误，会导致下载失败。

其他代码问题与优化建议 #

1. Manifest版本迁移：当前使用的manifest_version: 2已被Chrome逐步淘汰，建议迁移到Manifest V3，V3采用服务工作线程（Service Worker）替代后台页面，资源占用更低、安全性更高。
2. 权限冗余清理：permissions中的activeTab、management是多余的，移除后可减少扩展的权限范围和资源占用，仅保留tabs、downloads、http://*/*、https://*/*即可。
3. 避免重复请求：无需通过fetch重新拉取页面，直接用chrome.tabs.executeScript注入脚本获取当前页面的源码，节省一次网络请求：

chrome.tabs.executeScript(tabId, { code: 'document.documentElement.outerHTML' }, (results) => {
  if (chrome.runtime.lastError) return console.error(chrome.runtime.lastError);
  const data = results[0];
  // 后续的源码处理逻辑
});

4. 优化刷新逻辑：用chrome.tabs.reload替代chrome.tabs.update刷新页面，更高效且避免重复创建历史记录；同时不要依赖下载回调触发刷新，改用固定周期的定时器，避免循环触发事件。
5. 错误处理优化：后台脚本中无法弹出alert，改用console.error打印错误信息，方便调试排查问题。
6. 添加循环保护：当前逻辑在页面不包含指定内容时会无限刷新，建议添加重试次数限制，避免无意义的资源消耗。
7. 文件名简化：filename: 'sc_' + id + '_' + '.txt'可简化为filename: sc_${id}.txt``，去掉多余的下划线。

内容的提问来源于stack exchange，提问作者R. Douan