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

标签 javascript google-chrome input google-chrome-extension chromium

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

我一直在使用隐藏的 input 标签,当用户点击文件上传按钮时,我用 click() 触发它。文件浏览器对话框打开,一切似乎都运行良好,直到弹出窗口本身关闭。由于包含 input 标签的“网页”关闭,change 事件永远不会触发。

由于扩展已经有一个后台脚本,用于用持久数据填充弹出窗口,我想我可以在后台脚本中创建 input 并触发 that .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 打开文件浏览器对话框?这将是最好的解决方案,因为即使弹出窗口以某种方式关闭,它也允许扩展从指定文件中提取数据。

如果不是,有没有办法避免在文件浏览器对话框打开时关闭弹出窗口?根据我的发现,使用隐藏的 input 标签应该是一种变通方法,它确实适用于某些情况,但不适用于所有用户。

例如,在 Chrome、Windows 7 上,我可以在不关闭弹出窗口的情况下上传文件。但是,在 Chromium、Ubuntu 14.04 上,弹出窗口会在文件浏览器对话框打开时立即关闭。

感谢任何帮助。

最佳答案

看起来这可能是 fixed ,我也在等待它可用!

关于javascript - Chrome 扩展程序弹出窗口中的文件输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23842981/

相关文章:

perl - 从 Perl 中读取变量

c++ - Linux - 放弃键盘输入

java - JSP 应重定向到新窗口或选项卡中的动态 URL

javascript - JavaScript 中的 insideHTML 操作

html - 删除 Chrome 中的黄色输入背景以实现透明输入

google-chrome - Chrome 扩展 - 从事件选项卡收集元素

css - 在跨浏览器的输入文本中对齐文本

JavaScript if "x = (a || b || c)"语句不工作

javascript - 如果没有值,如何显示没有芯片的区域

html - Chrome 可以工作,但在 FF 上,我的页脚是隐藏的-底部填充不起作用