简体   繁体   English

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

[英]File Input in Chrome Extension popup

I want the user to be able to upload text files as input through the browserAction popup for my extension, but I've run into a bit of a problem. 我希望用户能够通过我的扩展程序的browserAction弹出窗口上载文本文件作为输入,但是遇到了一些问题。

I've been using a hidden input tag, which I trigger with click() when the user clicks on the file upload button. 我一直在使用一个隐藏的input标签,当用户单击文件上载按钮时,我会用click()触发它。 The file browser dialog opens and all seems to work well, until the popup itself closes. 文件浏览器对话框将打开,并且似乎一切正常,直到弹出窗口本身关闭。 And because of the 'webpage' containing the input tag closing, the change event never fires. 而且由于包含input标签关闭的“网页”, change事件永远不会触发。

Since the extension already has a background script for populating the popup with persistent data, I figured that I could create the input in the background script and trigger that with .click() when user clicks on the file upload button in the popup. 由于延长已经拥有用于填充与持久性数据弹出后台脚本,我想,我可以创建input的背景剧本触发和.click()时,在弹出的文件上传按钮,用户点击。

But, even though the click event fires for the input in the background script, the file browser dialog does not open. 但是,即使在后台脚本中为input触发了click事件,文件浏览器对话框也不会打开。

I figure that reason for this is that Chrome does not allow the file input to be triggered programatically unless it's through a user action, but I'm not sure. 我认为这是因为Chrome浏览器不允许通过程序触发文件输入,除非通过用户操作进行,但是我不确定。 This is how I tried; 这就是我尝试过的方式;

popup.js 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 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();
});

I know that the click event is triggered because fileInput clicked is logged. 我知道click事件已触发,因为记录了fileInput clicked But, the file browser dialog does not open. 但是,文件浏览器对话框不会打开。

I also tried a variation of this code using chrome.extension.getBackgroundPage() to directly call fileInput.click() . 我还尝试使用chrome.extension.getBackgroundPage()直接调用fileInput.click()来修改此代码。 Again, click event was fired but the dialog did not open. 再次,触发了click事件,但是对话框没有打开。

My question is; 我的问题是; is there a way to allow the background script to trigger the file input to open the file browser dialog? 有没有办法允许后台脚本触发文件input以打开文件浏览器对话框? That would be the best solution, because it would allow the extension to extract the data from the specified file even if the popup closed somehow. 那将是最好的解决方案,因为即使扩展以某种方式关闭,它也允许扩展名从指定的文件中提取数据。

If not, is there a way to avoid the popup from being closed when the file browser dialog opens? 如果没有,有没有办法避免在打开文件浏览器对话框时关闭弹出窗口? From what I found, using the hidden input tag was supposed to be a work around, and it does work for some cases, but not for all users. 从我发现的结果来看,使用隐藏的input标签应该是一种解决方法,并且在某些情况下确实有效,但并非适用于所有用户。

For example, I was able to upload files without popup being closed on Chrome, Windows 7. But, on Chromium, Ubuntu 14.04, the popup closes the instant the file browser dialog opens. 例如,我能够上载文件而不会在Windows 7的Chrome上关闭弹出窗口。但是,在Chromium,Ubuntu 14.04上,弹出窗口会在打开文件浏览器对话框时立即关闭。

Any help is appreciated. 任何帮助表示赞赏。

看来这可能已经修复 ,我也在等待它可用!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM