从 Electron 应用程序内部使用 Dropbox Chooser

Question

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

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

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

有谁知道if/how我可以从 Electron 应用程序内部使用 Dropbox Chooser 吗？

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

Answer 1

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

1.电子的BrowserWindows

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

例如：

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

但是我想出了一个更好的解决方案。从 main 进程打开选择器 window 看起来更有希望，因为我可以控制这两个参数（以及许多其他参数）。此外，我可以轻松地通过 window.opener 绕过基于 target/origin 的通信（更多内容在第 2 步中）。创建一个没有节点集成的BrowserWindow使其无法与主进程通信。 require 方法和其他节点的好东西不可用。但是，您可以将预加载脚本传递给此 BrowserWindow，其中节点内容可用，并且您可以重新公开 ipcRenderer 服务以再次建立与主进程的通信。

为 Dropbox Chooser 从主进程创建 BrowserWindow 时，按如下方式创建：

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，而不是通过 [=17= 与父进程 window 通信的子进程 window ].这个 BrowserWindow 将只是我们电子应用程序的助手 window，只是一个代理，可以确保实际的 Dropbox Chooser 可以与我们的应用程序通信。

2。 Dropbox 选择器按钮和选择器 window

从 Dropbox 中，您将获得一个漂亮的按钮，您可以将其粘贴到 JS/HTML 中，一切都将立即可用（在浏览器中）。单击按钮后，一个新的 windows 打开，您 select 文件，它们将在 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 脚本确保与选择器 window 的通信正常进行。 Dropbox 通过使用由 dropins.js 脚本自动预填充的第二个参数 targetOrigin 调用 window.opener.postMessage() 来与您的 window 通信。此来源 URL 必须与您在 Dropbox 开发人员应用程序管理中定义的任何内容相匹配。

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

3。覆盖 dropins.js

还有一个问题。如果我们将代理 window 隐藏，所有从那里打开的 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>

从 Electron 应用程序内部使用 Dropbox Chooser

Use Dropbox Chooser from inside Electron app

javascript

dropbox

electron