Question

我通过Chrome扩展程序上传文件作为表单数据，我的代码如下所示。这里的问题是文件浏览窗口打开一秒钟然后消失 该问题仅出现在Mac OS中。

的manifest.json：

"background": {
  "scripts": ["jszip.js", "background.js"]
},

background.js：

chrome.runtime.onMessage.addListener(function (msg) {
  if (msg.action === 'browse')
  {
    var myForm=document.createElement("FORM");
    var myFile=document.createElement("INPUT");
    myFile.type="file";
    myFile.id="selectFile";
    //myFile.onclick="openDialog()";
    myForm.appendChild(myFile);
    var myButton=document.createElement("INPUT");
    myButton.name="submit";
    myButton.type="submit";
    myButton.value="Submit";
    myForm.appendChild(myButton);
    document.body.appendChild(myForm);
  }
});

popup.js：

window.onload = function () {
  chrome.runtime.sendMessage({
    action: 'browse'
  });
}

Answer 1

一个小小的“背景故事”：

您希望让用户从弹出窗口中选择并上传文件。但是在OSX中，只要文件选择器对话框打开，弹出窗口就会失去焦点并关闭，从而导致其JS上下文被破坏。因此，对话框立即打开和关闭。

这是MAC上的 known bug 很长一段时间。

解决方案：

您可以将对话框打开逻辑移动到后台页面，该页面不受失去焦点的影响。在弹出窗口中，您可以向后台页面发送消息，请求启动浏览和上传过程（请参阅下面的示例代码）。

<强>的manifest.json

{
    ...
    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "Test Extension",
//        "default_icon": {
//            "19": "img/icon19.png",
//            "38": "img/icon38.png"
//        },
        "default_popup": "popup.html"
    },

    "permissions": [
        "https://www.example.com/uploads"
        // The above permission is needed for cross-domain XHR
    ]
}

<强> popup.html

    ...
    <script src="popup.js"></script>
</head>
<body>
    <input type="button" id="button" value="Browse and Upload" />
    ...

<强> popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('button').addEventListener('click', function () {
        chrome.runtime.sendMessage({ action: 'browseAndUpload' });
        window.close();
    });
});

<强> background.js

var uploadUrl = 'https://www.example.com/uploads';

/* Creates an `input[type="file]` */
var fileChooser = document.createElement('input');
fileChooser.type = 'file';
fileChooser.addEventListener('change', function () {
    var file = fileChooser.files[0];
    var formData = new FormData();
    formData.append(file.name, file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', uploadUrl, true);
    xhr.addEventListener('readystatechange', function (evt) {
        console.log('ReadyState: ' + xhr.readyState,
                    'Status: ' + xhr.status);
    });

    xhr.send(formData);
    form.reset();   // <-- Resets the input so we do get a `change` event,
                    //     even if the user chooses the same file
});

/* Wrap it in a form for resetting */
var form = document.createElement('form');
form.appendChild(fileChooser);

/* Listen for messages from popup */
chrome.runtime.onMessage.addListener(function (msg) {
    if (msg.action === 'browseAndUpload') {
        fileChooser.click();
    }
});

<子> 抬头：
作为安全预防措施，如果是用户互动的结果，Chrome将仅执行fileChooser.click() 。在上面的示例中，用户单击弹出窗口中的按钮，该按钮将消息发送到后台页面，后者调用fileChooser.click();。如果您尝试以编程方式调用它将无法正常工作。（例如，在文档加载时调用它不会有任何影响。）

Answer 2

ExpertSystem的解决方案对我不起作用，因为它不会让我调用单击后台脚本中的元素，但我想出了一个使用他的大部分代码的解决方法。如果您没有问题稍微污染当前选项卡，请将他的background.js代码放入内容脚本中，并使用正确的消息传递包装器。大多数功劳都归功于ExpertSystem，我只是把事情搞得一团糟。

背景：

我需要解决的问题是我想通过弹出窗口上传JSON文件并将其解析到我的扩展中。我想出来的解决方法就是要求所有三件作品都有复杂的舞蹈;弹出窗口，背景和内容脚本。

<强> popup.js

// handler for import button
// sends a message to the content script to create the file input element and click it
$('#import-button').click(function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {message: "chooseFile"}, function(response) {
            console.log(response.response);
        });
    });
});

<强> content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message == "chooseFile") {
        /* Creates an `input[type="file]` */
        var fileChooser = document.createElement('input');
        fileChooser.type = 'file';

        fileChooser.addEventListener('change', function () {
            console.log("file change");
            var file = fileChooser.files[0];

            var reader = new FileReader();
            reader.onload = function(){
                var data = reader.result;
                fields = $.parseJSON(data);
                // now send the message to the background
                chrome.runtime.sendMessage({message: "import", fields: fields}, function(response) {
                    console.log(response.response);
                });
            };
            reader.readAsText(file);
            form.reset();   // <-- Resets the input so we do get a `change` event,
                            //     even if the user chooses the same file
        });

        /* Wrap it in a form for resetting */
        var form = document.createElement('form');
        form.appendChild(fileChooser);

        fileChooser.click();
        sendResponse({response: "fileChooser clicked"});
    }

});

<强> background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message == "import") {
        fields = request.fields; // use the data
        sendResponse({response: "imported"});
    }
});

其他可能或不可能的原因是因为文件输入元素是在当前选项卡的范围内创建的，该选项卡在整个过程中都会持续存在。

通过Chrome扩展程序将文件上传为表单数据

2 个答案:

一个小小的“背景故事”：

解决方案：