从 chrome 扩展弹出窗口上传文件

Question

我想让用户从 chrome 扩展弹出窗口中选择并上传文件。但是，一旦文件选择器对话框打开，弹出窗口就会失去焦点并立即关闭。从这个答案来看，解决方法似乎是我可以将对话框打开逻辑移动到后台页面，这不会受到失去焦点的影响。

我已经尝试过答案，但文件选择器根本不出现。奇怪的是，fileChooser.click()事件确实发生了（我能够通过创建点击侦听器来验证它fileChooser）。下面是一个简化版本，只是为了解决这个问题。

弹出窗口.html

<button id="uploadCSV">Upload CSV</button>

弹出窗口.js

$('#uploadCSV').click(function() {
  chrome.extension.sendMessage({ action: 'browseAndUpload' });
});

背景.js

var fileChooser = document.createElement('input');
fileChooser.type = 'file';
chrome.extension.onMessage.addListener(function (msg) {
  if (msg.action === 'browseAndUpload') {
    fileChooser.click();
  }
});

Answer 1

弹出.js

var file = document.getElementById('#file')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
    chrome.runtime.sendMessage({
        "uploadFile": true,
        blob: reader.result,
        file: { name: file.name }
    }, x => { })
};
reader.onerror = function (error) {
    console.log('Error: ', error);
};

背景.js

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}
function uploadFile(msg) {
    var file = msg.file;
    let nfile = dataURLtoFile(msg.blob, file.name)
    var formData = new FormData();
    formData.append('cvFile', nfile);
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "endpoint",
        "method": "POST",
        "headers": {
            "accept": "application/json",
            "cache-control": "no-cache",
        },
        "processData": false,
        "contentType": false,
        "mimeType": "multipart/form-data",
        "data": formData
    }
    $.ajax(settings).done(function (response) {
        console.log(response);
    });
}
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    switch (!0) {
        case 'uploadFile' in msg: uploadFile(msg); break;
    }
})