Chrome扩展文件上传浏览窗口位置关闭屏幕
尝试在我正在开发的Google Chrome扩展程序中上传文件时，我遇到了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" }, "permissions": [ "activeTab", "cookies", "http://example.com/" ] } index.html的一小部分：
在dom准备好了：
$('#uploadButton').on('click', function(){ chrome.runtime.sendMessage({ action: 'browseAndUpload' }); });
脚本的其余部分：
//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(); } });
不幸的是，您无法在主窗口中显示对话框。 用户文件系统是敏感的，因此浏览器有几个安全措施来防止脚本式上传，这意味着没有肮脏的技巧。
所以我建议你选择一种不同的方法，即使从扩展程序弹出窗口上传文件也能提供良好的用户体验。
一种可能性是使用browserAction弹出窗口作为文件的拖放区域。 实现它非常简单，就像我在这个小提琴中展示的那样：
http://jsfiddle.net/Lv1nj58p/1/
HTML
DRAG YOUR FILES HERE
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; }
这个小提琴是非常原始的，但如果你在index.html抛出该代码，你会看到我的建议。 一个缺点是，为了正确地使用拖放概念进行文件输入，需要处理几个事件以便在选择一个或多个文件时提供视觉反馈。 幸运的是，有几个图书馆有这个目的; 一个好的是Dropzone.js 。
可悲的是，这不仅仅是一个直接的答案。 我希望这个解决方案能够很好地适应您的环境！
最后但同样重要的是，您描述的行为对我来说听起来像一个错误（可能是特定于OS X）。 随意向Chrome团队提交一个问题 ，以便他们可以告诉您这是否是一些有缺陷或丑陋的东西，即它是否是他们要修复的东西。