Chrome扩展中FileSaver.js saveAs无保存对话框问题

核心问题 #

你遇到的saveAs无法弹出保存对话框的原因是Manifest V3的Service Worker没有DOM环境：

• 你的content.js被配置为background的service_worker，而Service Worker是运行在后台的无DOM脚本环境，FileSaver.js的saveAs函数依赖浏览器的DOM API（比如document、下载弹窗触发逻辑），在Service Worker中无法正常工作。
• 当前代码中export_vendor函数是在Service Worker中调用的，自然无法触发保存对话框。

解决方案 #

有两种可行的解决思路，根据你的需求选择：

思路1：将导出逻辑移至有DOM的标签页环境 #

把导出操作放到当前活跃标签页的内容脚本中执行，标签页拥有完整的DOM环境，能正常触发saveAs对话框。

步骤1：修正Manifest配置

• 把background的service_worker文件名改为background.js（避免和内容脚本重名混淆）
• 完善matches规则，加上协议前缀*://，确保匹配生效

{
    "manifest_version": 3,
    "name": "Menu scraper",
    "description": "Scrapes menu information and downloads a zip file containing an Excel file on menu information and menu image files",
    "version": "0.1",
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "*://www.foodpanda.my/*"
            ],
            "js": [
                "xlsx.full.min.js",
                "jszip.min.js",
                "FileSaver.min.js",
                "scraper.js",
                "export.js"
            ]
        }
    ],
    "host_permissions": [
        "*://www.foodpanda.my/*",
        "*://image-hosting-site.com/*"
    ],
    "permissions": [
        "tabs",
        "activeTab",
        "scripting",
        "contextMenus",
        "downloads",
        "storage"
    ]
}

步骤2：修改background.js（原content.js）

将导出逻辑通过chrome.scripting.executeScript注入到当前标签页中执行：

chrome.contextMenus.create({
    "id": "scrape_menu",
    "title": "Save menu to Excel file",
    "contexts": ["page"]
})

chrome.contextMenus.onClicked.addListener((clickData) => {
    if (clickData.menuItemId == "scrape_menu") {
        chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
            function(tabs){
                const tab = tabs[0];
                // 执行抓取脚本
                chrome.scripting.executeScript({
                    target: { tabId: tab.id },
                    func: scrape_menu
                }, function(selection) {
                    const vendor = selection[0].result;
                    if (vendor) {
                        // 在标签页中执行导出逻辑
                        chrome.scripting.executeScript({
                            target: { tabId: tab.id },
                            func: export_vendor,
                            args: [vendor]
                        });
                    }
                });
            }
        );
    }
})

思路2：使用Chrome原生Downloads API替代FileSaver.js #

如果希望在Service Worker中完成下载操作，可以使用Chrome提供的downloads API，该API无需DOM环境，且能触发保存对话框。

修改export.js中的下载逻辑

替换原有的saveAs代码为以下内容：

// 下载ZIP文件
zip.generateAsync({type:"blob"})
.then((content) => {
    console.log("Saving to ZIP file");
    // 创建blob URL
    const blobUrl = URL.createObjectURL(content);
    // 使用Chrome downloads API触发下载
    chrome.downloads.download({
        url: blobUrl,
        filename: `${name}.zip`,
        saveAs: true // 强制弹出保存对话框
    }, (downloadId) => {
        if (chrome.runtime.lastError) {
            console.error(chrome.runtime.lastError);
        } else {
            console.log("ZIP file download started.");
            // 延迟释放blob URL，确保下载完成
            setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
        }
    });
    console.log("ZIP file created. Web scraping complete.")
});

注意事项 #

• 确保downloads权限已经在Manifest中声明（你的配置已经包含）
• 思路1中，内容脚本必须已经注入到目标页面（通过matches规则确保）
• 若使用思路2，需要注意跨域资源的CORS问题，抓取图片时可能需要配置host_permissions覆盖图片域名

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