Question

我在尝试上传我正在开发的Google Chrome扩展程序中的文件时出现了Mac上屏幕上出现的文件浏览对话框窗口的问题。有没有人有任何关于如何重新定位对话框窗口或将文件上传附加到主窗口以使其以该窗口为中心的想法？我按照this question进行了上传。任何帮助赞赏！谢谢！

我的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的一小部分：

<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>

准备就绪：

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

Answer 1

不幸的是，您无法在主窗口中显示对话框。用户文件系统是敏感的，因此浏览器有几个安全措施来阻止脚本式上传，这意味着没有肮脏的技巧。

因此，我建议您选择其他方法，以便即使从扩展程序弹出窗口上传文件也能提供良好的用户体验。

一种可能性是使用browserAction弹出窗口作为文件的拖放区域。实现它非常简单，就像我在这个小提琴中演示一样：

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

这个小提琴非常原始，但是如果你把这段代码扔进你的index.html，你会看到我的建议。一个缺点是，为了正确地使用拖放概念进行文件输入，需要处理几个事件以便在选择一个或多个文件时提供视觉反馈。幸运的是，有几个图书馆有这个目的;一个好的是Dropzone.js。

可悲的是，这不仅仅是一个直接的答案。我希望这个解决方案能够很好地适应您的背景！

最后但同样重要的是，您描述的行为对我来说听起来像个错误（可能是OS X特定的）。请随意file an issue加入铬团队，这样他们就可以告诉你这是不是有点儿或者丑陋的东西，即如果这是他们要修复的东西。

Chrome扩展文件上传浏览窗口位置关闭屏幕

1 个答案: