Chrome扩展全屏模式下保存对话框被popup.html遮挡问题求助

环境信息 #

• 操作系统：macOS 13.0.1（MacBook Pro 14 搭载Apple M1 Max）
• Chrome版本：107.0.5304.110（正式版）(arm64)

问题现象 #

开发Chrome扩展时，点击导出按钮触发文件下载，全屏模式下系统保存对话框会被popup.html遮挡，无法点击操作；非全屏模式下显示正常。

涉事代码 #

导出函数：

function exportFile() {
    chrome.storage.sync.get(['ruleProfiles'], async function (result) {
        console.log('Value currently is ' + JSON.stringify(result));
        if (JSON.stringify(result) === '{}') {
            sourceJson = {};
        } else {
            sourceJson = result['ruleProfiles'];
        }
        console.log('ready to download');
        var url = 'data:application/json;base64,' + btoa(JSON.stringify(sourceJson));
        chrome.downloads.download({
            url: url,
            saveAs: false,
            filename: 'vac-modify-header-profile.json',
            conflictAction: "overwrite"
        });
        console.log('download success 1');
    });
}

按钮绑定：

document.getElementById("exportBtn").addEventListener("click", exportFile);

解决方法 #

方法1：关闭Popup后延迟触发下载 #

全屏模式下Popup窗口层级高于系统对话框，先关闭Popup再触发下载即可解决：

function exportFile() {
    chrome.storage.sync.get(['ruleProfiles'], function (result) {
        // 简化空值判断
        let sourceJson = result.ruleProfiles || {};
        // 立即关闭Popup
        window.close();
        // 延迟100ms触发下载，确保Popup已完全关闭
        setTimeout(() => {
            // 替换base64编码为UTF-8兼容方案，避免Unicode字符报错
            const url = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(sourceJson));
            chrome.downloads.download({
                url: url,
                saveAs: false,
                filename: 'vac-modify-header-profile.json',
                conflictAction: "overwrite"
            });
        }, 100);
    });
}

注：原代码中的async关键字无实际作用，已移除；同时替换btoa为encodeURIComponent，避免中文等非ASCII字符导致的编码错误。

方法2：通过后台脚本触发下载（推荐） #

将下载逻辑移至后台脚本，彻底规避Popup层级问题，更符合Chrome扩展开发规范：

1. popup.js 修改：

document.getElementById("exportBtn").addEventListener("click", () => {
    // 给后台脚本发送导出请求
    chrome.runtime.sendMessage({action: "exportProfile"}, () => {
        // 发送请求后关闭Popup
        window.close();
    });
});

2. background.js 添加逻辑：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "exportProfile") {
        chrome.storage.sync.get(['ruleProfiles'], (result) => {
            let sourceJson = result.ruleProfiles || {};
            const url = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(sourceJson));
            chrome.downloads.download({
                url: url,
                saveAs: false,
                filename: 'vac-modify-header-profile.json',
                conflictAction: "overwrite"
            });
        });
        sendResponse();
    }
});

记得在manifest.json中配置后台脚本：

{
  "background": {
    "service_worker": "background.js"
    // 若使用旧版Manifest，改为"scripts": ["background.js"]
  }
}

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