Chrome扩展程序弹出窗口中的文件 [英] File Input in Chrome Extension popup

问题描述

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

我一直使用隐藏的输入标签，我用点击）当用户点击文件上传按钮时。文件浏览器对话框打开，并且似乎都工作正常，直到弹出窗口本身关闭。由于包含 input 标签关闭的'网页'，因此更改事件永远不会触发。

由于扩展已经有一个用持久数据填充弹出框的后台脚本，我想我可以在后台创建 input 当用户点击弹出窗口中的文件上传按钮时，用 .click（）触发 。但是，即使后台脚本中的click事件触发了输入，文件浏览器对话框也不会打开。

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

popup.js

  //弹出窗口中的按钮，打开文件浏览器对话框
 //点击时
 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（）; 
}）; 
  

I知道单击事件被触发，因为已记录 fileInput clicked 。但是，文件浏览器对话框不会打开。

我也尝试过使用 chrome.extension.getBackgroundPage（）来直接调用 fileInput.click（）。再次，点击事件被解雇了，但是对话没有打开。

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

如果不是，有没有办法避免弹出窗口在文件浏览器对话框打开时被关闭？从我发现的情况来看，使用隐藏的 input 标签应该是一个解决方法，它适用于某些情况，但不适用于所有用户。例如，我可以上传文件，而无需在Chrome，Windows 7上关闭弹出窗口。但是，在Chromium，Ubuntu 14.04上，弹出窗口关闭了即时文件浏览器对话框打开。

任何帮助都是值得赞赏的。

解决方案

像这可能只是修复，我正在等待它也可以使用！

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.

I've been using a hidden input tag, which I trigger with click() when the user clicks on the file upload button. 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.

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.

But, even though the click event fires for the input in the background script, the file browser dialog does not open.

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. This is how I tried;

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

I know that the click event is triggered because fileInput clicked is logged. 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(). Again, click event was fired but the dialog did not open.

My question is; is there a way to allow the background script to trigger the file input to open the file browser dialog? 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.

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.

Any help is appreciated.

解决方案

It looks like this might have just been fixed, I'm waiting for it to be available as well!

这篇关于Chrome扩展程序弹出窗口中的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！