Chrome扩展文件上传浏览窗口位置关闭屏幕 [英] Chrome extension file upload browse window position off screen
问题描述
我试图在我正在开发的谷歌浏览器扩展程序中上传文件时，出现文件浏览对话框窗口出现在Mac屏幕上的问题。有没有人对如何重新定位对话窗口或将文件上传追加到主窗口有任何想法，以便它以该窗口为中心？我遵循这个问题来完成我的上传。任何帮助感谢！谢谢！
我的manifest.json：
{
manifest_version：2，
name：Bookmark and Binder，
description：example，
version：1.0，
browser_action：{
default_icon：icon.png，
default_popup：/index.html
}，
权限：[
activeTab，
cookies，
http://example.com/
]
}
index.html的一小部分：
< div class =form-group chooseFileid =showUploadstyle =display：none>
< label>文件上传：< / label>
< button type =buttonid =uploadButtonclass =btn btn-primary>浏览并上传< / button>
< / div>
完成dom准备：
$（'＃uploadButton'）。on（'click'，function（）{
chrome.runtime.sendMessage（{action：'browseAndUpload'}）;
}） ;
脚本的其余部分：
<$ p
$ b $ *创建一个`input [type =file]`* /
var fileChooser = document.createElement（'input' ）;
fileChooser.type ='file';
fileChooser.multiple =multiple;
fileChooser.addEventListener（'change'，function（）{
var files = fileChooser.files;
var formData = new FormData（）;
var inst = $ .jstree.reference（newData.reference），
obj = inst.get_node（newData.reference ）;
var uploadURL = apiHost +'/ binder / upload？location ='+ obj.id;
$ b formData.append（'location'，obj.id）;
for（var i = 0; i< files.length; i ++）{
var file = files [i];
formData.append（'uploads'，file，file.name）;
$ b $ x var xhr = new XMLHttpRequest（）;
xhr.open（'POST'，uploadURL，true）;
$（'＃createModal' ）.one（'hidden.bs.modal'，函数（）{
$（'body'）。width（'auto'）;
$）
xhr.onload = function（）{
if（xhr.status === 200）{
//上传文件。
//uploadButton.innerHTML ='上传';
var inst = $ .jstree.reference（newData.reference），
obj = inst.get_node（newData.reference）;
$（'＃createModal'）。modal（'hide'）;
inst.refresh（）;
} else {
alertEvent（Failure，请稍后再试。）
}
};
xhr.addEventListener（'readystatechange'，函数（evt）{
console.log（'ReadyState：'+ xhr.readyState，
'状态：'+ xhr.status ）;
}）;
xhr.send（formData）;
form.reset（）; //< - 重置输入，所以我们得到'change'事件，
//即使用户选择相同的文件
}）;
/ *用表格重新包装* /
var form = document.createElement（'form'）;
form.appendChild（fileChooser）;
$ b $ *听取弹出消息* /
chrome.runtime.onMessage.addListener（function（msg）{
if（msg.action ==='browseAndUpload'） {
$（'body'）.width（'1000px'）; //尝试移动对话窗口
fileChooser.click（）;
}
}）;
不幸的是，对话框显示在主窗口中。用户文件系统是敏感的，所以浏览器有几个安全措施，以防止脚本上传，这意味着没有肮脏的技巧。
所以我建议你选择一个不同的方法来提供良好的用户体验，甚至可以从扩展弹出窗口上传文件。
一种可能性是利用 browserAction 弹出窗口作为文件的拖放区域。实现它非常简单，就像我在这个小提琴演示中所展示的那样：
http://jsfiddle.net/Lv1nj58p/1/
HTML
< div id =file-container>
< b>在此处拖放您的文件< / b>
< input id =filetype =filemultiple =multiple/>
< / div>
CSS
＃file-container {
border：2px dashed #aaa;
背景：#eee;
职位：亲属;
width：200px;
text-align：center;
padding：20px;
border-radius：8px;
font-family：sans-serif;
}
#file {
position：absolute;
opacity：0;
背景：洋红色;
top：0;
剩下：0;
right：0;
bottom：0;
$ / code> 这个小提琴非常原始，但是如果你将这些代码放入 index.html 你会看到我的建议。一个缺点是，要正确使用文件输入的拖放概念，需要处理几个事件，以便在选择一个或多个文件时提供视觉反馈。幸运的是，有几个图书馆有这个目的;好的一个是 Dropzone.js 。
可悲的是，这不是一个直接的答案。我希望这个解决方案适合您的环境！
最后但并非最不重要的是，您描述的行为听起来像是一个错误（可能是OS X特定的）。随意向Chrome团队发出问题，以便他们告诉您是否那是越野车或丑陋的东西，也就是说，如果这是他们要解决的问题。
I am having an issue with the file browse dialog window appearing off the screen on a Mac when attempting to upload a file within a Google Chrome extension I am developing. Does anyone have any ideas as to how to reposition the dialog window or append the file upload to the main window so it centers with that window? I followed this question to do my uploads. Any help appreciated! Thank you!
My manifest.json:
{
"manifest_version": 2,
"name": "Bookmark and Binder",
"description": "example",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "/index.html"
},
"permissions": [
"activeTab",
"cookies",
"http://example.com/"
]
}
A small part of index.html:
<div class="form-group chooseFile" id="showUpload" style="display:none">
<label>File Upload: </label>
<button type="button" id="uploadButton" class="btn btn-primary">Browse and Upload</button>
</div>
On dom ready:
$('#uploadButton').on('click', function(){
chrome.runtime.sendMessage({ action: 'browseAndUpload' });
});
The rest of the script:
//background script
/* Creates an `input[type="file]` */
var fileChooser = document.createElement('input');
fileChooser.type = 'file';
fileChooser.multiple = "multiple";
fileChooser.addEventListener('change', function () {
var files = fileChooser.files;
var formData = new FormData();
var inst = $.jstree.reference(newData.reference),
obj = inst.get_node(newData.reference);
var uploadURL = apiHost + '/binder/upload?location=' + obj.id;
formData.append('location', obj.id);
for (var i = 0; i < files.length; i++) {
var file = files[i];
formData.append('uploads', file, file.name);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', uploadURL, true);
$('#createModal').one('hidden.bs.modal', function(){
$('body').width('auto');
})
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
//uploadButton.innerHTML = 'Upload';
var inst = $.jstree.reference(newData.reference),
obj = inst.get_node(newData.reference);
$('#createModal').modal('hide');
inst.refresh();
} else {
alertEvent("Failure","Please try again later.")
}
};
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') {
$('body').width('1000px'); //attempt to move the dialog window
fileChooser.click();
}
});
Unfortunately there isn't much you can do to make the dialog show in the main window. The user filesystem is sensitive so the browser has several security measures to prevent an scripted upload, that means no dirty tricks here.
So I'd recommend you to pick a different approach to be able to provide a good user experience for uploading a file even from the extension popup.
One possibility is to make use of the browserAction popup as a drag and drop zone for your files. It's pretty simple to achieve it, like I demonstrate in this fiddle:
http://jsfiddle.net/Lv1nj58p/1/
HTML
<div id="file-container">
<b>DRAG YOUR FILES HERE</b>
<input id="file" type="file" multiple="multiple"/>
</div>
CSS
#file-container {
border:2px dashed #aaa;
background:#eee;
position:relative;
width:200px;
text-align:center;
padding:20px;
border-radius:8px;
font-family:sans-serif;
}
#file {
position:absolute;
opacity:0;
background:magenta;
top:0;
left:0;
right:0;
bottom:0;
}
This fiddle is very raw but if you throw that code in your index.html you'll see what I'm suggesting. One downside is, that to properly use the drag drop concept for file input, there is several events that needs to be handled in order to provide visual feedback when one or more files are selected. Fortunately, there are several libraries with that purpose; A good one is is Dropzone.js.
Sadly that's more an alternative than a straight answer. I hope that this solution fits well in your context!
Last but not least, the behavior that you described sounds like a bug to me (probably OS X specific). Feel free to file an issue to the chrome team so they can tell you if is that something buggy or ugly, i.e if it's something that they're going to fix or not.
这篇关于Chrome扩展文件上传浏览窗口位置关闭屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
