the save as dialog was covered up by popup.html in google-chrome-extension

Question

os：macOs 13.0.1（macbook pro 14 with Apple M1 Max） chrome version: 107.0.5304.110（release） (arm64)

I'm doing some development with the chrome extension and I need to export a file. this is my code for download:

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));
        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);

When I press the exportBtn the save as dialog appeared. It was covered by the popup.html and I can't click it. After some test I found that it happenes if the chrome app is in full screen(the first pic). It will appear normally when chrome app is not in full screen(the second pic). What can I do to fix this? thanks for help.

the first pic

the second pic

I searched google and read the chrome doc. But found nothing.

I wish the save as dialog can appear normally

"I searched google and read the chrome doc. But found nothing." --- [File selection dialog popup underlays behind chrome extension popup window](https://stackoverflow.com/questions/73652216/file-selection-dialog-popup-underlays-behind-chrome-extension-popup-window) — Thomas Mueller, Nov 21 '22 at 07:35
@ThomasMueller ths for your reply. My english is poor so I cant descripe it well. Maybe thst's the reason why I didn't find the right answer. ths again — vacuity, Nov 21 '22 at 07:52
@ThomasMueller I read the link you paste and there is still no answer. Can you fix it — vacuity, Nov 21 '22 at 08:04

score 0 · Answer 1 · answered Nov 21 '22 at 17:02

wOxxOm's comment states:

This is a bug in Chrome. You will have to open the popup as a separate window or embed it into the web page as an iframe via web_accessible_resources.

"open the popup as a separate window" means:
Do not include the popup in manifest.json as described in chrome.action > Manifest
Instead, include an action without a popup in manifest.json.
If you do this, clicking the the action will fire a chrome.action.onClicked event that you can handle in background.json.

manifest.json

{
    "manifest_version": 3,
    "name": "Popup in a new Window",
    "version": "1.0",
    "background": {
          "service_worker": "background.js"
    },
    "action": {
        "default_title": "Popup in a new Window"
    }
}

background.js

function onClicked(tab) {
    chrome.windows.create({
        height: 800,
        type: "popup",
        url: "popup.html",
        width: 800
    });
}

chrome.action.onClicked.addListener(onClicked);

popup.html

<html>
    <head>
        <title>Popup</title>
    </head>
    <body>
        <h1>Popup</h1>
    </body>
</html>

I don't know to "embed it into the web page as an iframe via web_accessible_resources", so I haven't described this solution.

the save as dialog was covered up by popup.html in google-chrome-extension

1 Answers1