我正在使用 Electron(以前称为 Atom-Shell)创建现有 Angular 网络应用程序的桌面版本。大多数功能开箱即用，但我在使用 Dropbox Chooser 时遇到了一些问题。

我的网络应用程序允许用户使用选择器从 Dropbox 导入文件。在 Electron 中，这会导致为选择器创建一个新的 BrowserWindow。但是新窗口的window.opener属性为null，这基本上使得Chooser窗口无法与原窗口通信。这使得它变得毫无用处，因为有效地选择一个文件没有任何作用。

我知道 Slack桌面应用程序使用 Electron，并且他们已经能够以某种方式克服这个问题(Dropbox Chooser 确实在 Slack 中工作)。

有谁知道我能否/如何从 Electron 应用程序内部使用 Dropbox Chooser？

tl;dr 我无法从 Electron 应用程序内部使用 Dropbox Chooser，因为它会打开一个新的 BrowserWindow，其中 window.opener 设置为 null。

最佳答案

好的，我设法让它工作了。 window.opener 实际上已设置，其中一个问题是您在 Chooser 代码中没有正确的来源来确保 window.opener.postMessage() 作品和消息到达父窗口。不过还有更多。

<强>1。 Electron 的 BrowserWindow

仅当 nodeIntegration 和 webSecurity 设置为 false 时，Dropbox Chooser 弹出窗 Eloquent 能在 electron 的 BrowserWindow 中工作。现在，这些很棘手，因为如果您从现有 BrowserWindow 中打开一个子窗口，您将无法再更改子窗口中的 webSecurity。您可以通过在第三个参数中传递 nodeIntegration=no 来更改 window.open() 调用中的 nodeIntegration。

例如:

window.open('chooser-window.html', '_blank', 'resizable,scrollbars,nodeIntegration=no')

However I came up with a better solution. Opening the chooser window from main process looks more promising as I can control both these parameters (and many others as well). Furthemore, I can hack around the target/origin based communication via window.opener easily (more in step 2.). Creating a BrowserWindow without node integration makes it unable to communicate with the main process. The require method and other node's goodies are unavailable. However, you can pass a preload script to this BrowserWindow, where the node stuff is available, and you can re-expose the ipcRenderer service in order to establish a communication to main process again.

When creating a BrowserWindow from main process for purposes of Dropbox Chooser, create it like this:

const dropboxProxyWindow = new BrowserWindow({
   webPreferences: {
     nodeIntegration: false,
     webSecurity: false,
     preload: path.join(__dirname, 'dropbox-proxy-preload.js'),
   },
})

并在与 main.js 相同的目录中创建一个 dropbox-proxy-preload.js:

// NOTE: This file preloads ipc to hidden dropbox proxy window
//       where nodeIntegration is set to false.

global.ipcRenderer = require('electron').ipcRenderer

这样，我们将拥有一个可以通过 ipc 与主进程通信的 BrowserWindow，而不是通过 window.opener.postMessage()<>。这个 BrowserWindow 将只是我们 Electron 应用程序的一个帮助窗口，只是一个代理，可以确保实际的 Dropbox Chooser 可以与我们的应用程序进行通信。

<强>2。 Dropbox 选择器按钮和选择器窗口

从 Dropbox 中，您将获得一个漂亮的按钮，您可以将其粘贴到您的 JS/HTML 中，一切都将开箱即用(在浏览器中)。单击按钮后，将打开一个新窗口，您选择文件，它们将在 JS 中到达您的回调。它看起来像这样:

// in HTML
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="YOUR-APP-KEY"></script>

// in JS via button
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);

// or in JS directly
Dropbox.choose(options);

dropins.js 脚本确保与选择器窗口的通信正常进行。 Dropbox 通过调用 window.opener.postMessage() 与您的窗口通信第二个参数 targetOrigin 由 dropins.js 脚本自动预填充。此原始 URL 必须与您在 Dropbox 开发人员应用程序管理中定义的任何内容相匹配。

为了将其移植到 Electron ，我们需要“破解”传递给选择器窗口的来源，因为 Electron HTML 文件中的 window.location 不是您可以设置的 URL Dropbox 管理。 我们将通过在隐藏的 BrowserWindow 中打开一个远程 HTML 文件来完成此操作，该文件将打开 Chooser。我们将隐藏的 BrowserWindow 称为代理窗口。远程 HTML 将位于我们将添加到 Dropbox 管理员的域中，并且它将能够与 Chooser 通信。它将使用 preload 脚本启动，该脚本将确保与 Electron 主进程的通信。从那里我们可以将数据发送到我们的应用程序。加载隐藏的代理窗口后，我们将自动单击该按钮，以便打开选择器。

<强>3。覆盖 dropins.js

不过还有一个问题。如果我们隐藏我们的代理窗口，所有从那里打开的 BrowserWindow 也将被隐藏。所以我们需要覆盖这个选项。我们将在 dropins.js 中，在 window.open() 调用中，在第三个参数中完成。我们将添加 show=1。由于 dropins.js 默认被缩小，我使用 Chrome DevTools 来美化代码，然后进行了必要的更改。 Here it is in a Gist .

最终代码

在/main.js

const dropboxProxyWindow = new BrowserWindow({
   webPreferences: {
     nodeIntegration: false,
     webSecurity: false,
     preload: path.join(__dirname, 'dropbox-proxy-preload.js'),
   },
   show: false,
})

const DROPBOX_CHOOSER_LINK = 'https://cdn.yourapp.com/static/dropbox-chooser.html'
dropboxProxyWindow.loadURL(DROPBOX_CHOOSER_LINK)

// NOTE: Catch data from proxy window and send to main.
ipc.on('dropbox-chooser-data', (event, data) => {
  mainWindow.webContents.send('dropbox-chooser-data', data)
})

ipc.on('dropbox-chooser-cancel', () => {
  mainWindow.webContents.send('dropbox-chooser-cancel')
})

在 /dropbox-proxy-preload.js 中:

global.ipcRenderer = require('electron').ipcRenderer

在 https://cdn.yourapp.com/static/dropins.js 中远程:gist

https://cdn.yourapp.com/static/dropbox-chooser.html 中的远程:

<html>
  <head>
    <title>Dropbox Chooser</title>
    <script type="text/javascript" src="dropins.js" id="dropboxjs" data-app-key="xxx"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      var options = {
        success: function(files) {
          console.debug('Files from dropbox:', files)
          if (!window.ipcRenderer || typeof window.ipcRenderer.send !== 'function') {
            console.warn('Unable to send Dropbox data to App.')
            return
          }
          window.ipcRenderer.send('dropbox-chooser-data', JSON.stringify(files))
        },

        cancel: function() {
          if (!window.ipcRenderer || typeof window.ipcRenderer.send !== 'function') {
            console.warn('Unable to send Dropbox data to App.')
            return
          }
          window.ipcRenderer.send('dropbox-chooser-cancel')
        },

        linkType: "preview",
        multiselect: true,
        folderselect: false,
      };

      var button = Dropbox.createChooseButton(options);
      document.getElementById("container").appendChild(button);
      button.click() // automatically open click on the button so the Chooser opens
    </script>
  </body>
</html>

关于javascript - 从 Electron 应用程序内部使用 Dropbox Chooser，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34799003/