Chrome扩展程序弹出窗口中的文件输入

Question

我希望用户能够通过我的扩展程序的 browserAction 弹出窗口上传文本文件作为输入，但我遇到了一点问题。

我一直在使用隐藏的 input 标签，当用户点击文件上传按钮时，我使用 click() 触发它。文件浏览器对话框会打开，似乎一切正常，但是弹出窗口本身关闭后，由于包含 input 标记的 '网页' 关闭，change 事件永远不会触发。

由于扩展程序已经有一个用于向弹出窗口填充持久数据的后台脚本，因此我想在后台脚本中创建 input 并在用户在弹出窗口中单击文件上传按钮时触发 那个 标签的 .click() 事件。

但是，即使在后台脚本中 input 的单击事件被触发，文件浏览器对话框也不会打开。

我认为这是因为 Chrome 不允许以编程方式触发文件输入，除非是通过用户操作完成的，但我不确定。以下是我的尝试：

popup.js

//Button in popup which should open file broswer dialog
//when clicked
browseBtn.addEventListener('click', function() {
    chrome.runtime.sendMessage({msg: 'file_input'});
}

background.js

var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'text/*';

fileInput.addEventListener('click', function(e) {
    console.log('fileInput clicked');
}, false);

fileInput.addEventListener('change', function(e) {
    console.log('fileInput changed');
    console.log(this.files);
}, false);

chrome.runtime.onMessage.addListener(function(e) {
    if(e.msg === 'file_input')
        fileInput.click();
});

我知道click事件被触发是因为记录了fileInput clicked，但是文件浏览器对话框没有打开。

我还尝试使用chrome.extension.getBackgroundPage()的变体来直接调用fileInput.click()。同样，click事件被触发，但对话框没有打开。

我的问题是：是否有一种方法允许后台脚本触发文件以打开文件浏览器对话框？这将是最好的解决方案，因为即使弹出窗口关闭了，它也将允许扩展从指定的文件中提取数据。

如果没有，是否有一种方法可以避免文件浏览器对话框打开时关闭弹出窗口？根据我找到的资料，使用隐藏的input标签应该是一种解决方法，并且它确实适用于某些情况，但并不适用于所有用户。

例如，在Chrome，Windows 7上，我能够上传文件而不关闭弹出窗口。但是在Chromium，Ubuntu 14.04上，弹出窗口会在文件浏览器对话框打开时立即关闭。

非常感谢任何帮助。

- Rikonator

---

你解决了吗？你在哪个平台上？ - gkalpak

以前，您使用背景页的方法可以工作，但在最新版本的Chrome中不再适用。但是为什么不能使用扩展程序的浏览器操作弹出窗口呢？它似乎在Windows上可以工作。 - gkalpak

@ExpertSystem 因为虽然它在Windows上可以工作，但在其他地方进行测试，比如Ubuntu上，由于弹出窗口关闭了，所以无法工作。此外，弹出窗口在文件浏览器对话框打开时确实可以关闭。在这种情况下，浏览器操作弹出窗口方法可能会让用户想知道为什么他们的文件没有加载。 - Rikonator

你知道Ubuntu的解决方法吗？我遇到了同样的问题。当我选择一个文件时，弹出窗口就关闭了，所以我无法提交它。 - Lishu

@Lishu 我发现唯一在每个平台上都能稳定工作的解决方法是使用新窗口或选项卡来处理文件输入，而不是使用浏览器操作弹出窗口。虽然不太干净，但目前它可以工作。 - Rikonator

Answer 1

看起来这可能被修复了，我也在等待它可用！

- Abdullah Jibaly

---

这个 bug 似乎只涉及 OS X，而原问题是关于 Ubuntu 的。这可能仍然是一个存在的问题。 - Xan