feat: Allow creation of new window to be customizable. (electron#41432)

54J4N · Feb 29, 2024 · a0dad83 · a0dad83
1 parent 04df5ce
commit a0dad83
Show file tree

Hide file tree

Showing 7 changed files with 408 additions and 187 deletions.
diff --git a/docs/api/structures/window-open-handler-response.md b/docs/api/structures/window-open-handler-response.md
@@ -0,0 +1,7 @@
+# WindowOpenHandlerResponse Object
+
+* `action` string - Can be `allow` or `deny`. Controls whether new window should be created.
+* `overrideBrowserWindowOptions` BrowserWindowConstructorOptions (optional) - Allows customization of the created window.
+* `outlivesOpener` boolean (optional) - By default, child windows are closed when their opener is closed. This can be
+  changed by specifying `outlivesOpener: true`, in which case the opened window will not be closed when its opener is closed.
+* `createWindow` (options: BrowserWindowConstructorOptions) => WebContents (optional) - If specified, will be called instead of `new BrowserWindow` to create the new child window and event [`did-create-window`](../web-contents.md#event-did-create-window) will not be emitted. Constructed child window should use passed `options` object. This can be used for example to have the new window open as a BrowserView instead of in a separate window.
diff --git a/docs/api/web-contents.md b/docs/api/web-contents.md
@@ -1288,7 +1288,7 @@ Ignore application menu shortcuts while this web contents is focused.
 
 #### `contents.setWindowOpenHandler(handler)`
 
-* `handler` Function<{action: 'deny'} | {action: 'allow', outlivesOpener?: boolean, overrideBrowserWindowOptions?: BrowserWindowConstructorOptions}>
+* `handler` Function<[WindowOpenHandlerResponse](structures/window-open-handler-response.md)>
   * `details` Object
     * `url` string - The _resolved_ version of the URL passed to `window.open()`. e.g. opening a window with `window.open('foo')` will yield something like `https://the-origin/the/current/path/foo`.
     * `frameName` string - Name of the window provided in `window.open()`
@@ -1303,11 +1303,8 @@ Ignore application menu shortcuts while this web contents is focused.
       be set. If no post data is to be sent, the value will be `null`. Only defined
       when the window is being created by a form that set `target=_blank`.
 
-  Returns `{action: 'deny'} | {action: 'allow', outlivesOpener?: boolean, overrideBrowserWindowOptions?: BrowserWindowConstructorOptions}` - `deny` cancels the creation of the new
-  window. `allow` will allow the new window to be created. Specifying `overrideBrowserWindowOptions` allows customization of the created window.
-  By default, child windows are closed when their opener is closed. This can be
-  changed by specifying `outlivesOpener: true`, in which case the opened window
-  will not be closed when its opener is closed.
+  Returns `WindowOpenHandlerResponse` - When set to `{ action: 'deny' }` cancels the creation of the new
+  window. `{ action: 'allow' }` will allow the new window to be created.
   Returning an unrecognized value such as a null, undefined, or an object
   without a recognized 'action' value will result in a console error and have
   the same effect as returning `{action: 'deny'}`.
@@ -1318,6 +1315,26 @@ submitting a form with `<form target="_blank">`. See
 [`window.open()`](window-open.md) for more details and how to use this in
 conjunction with `did-create-window`.
 
+An example showing how to customize the process of new `BrowserWindow` creation to be `BrowserView` attached to main window instead:
+
+```js
+const { BrowserView, BrowserWindow } = require('electron')
+
+const mainWindow = new BrowserWindow()
+
+mainWindow.webContents.setWindowOpenHandler((details) => {
+  return {
+    action: 'allow',
+    createWindow: (options) => {
+      const browserView = new BrowserView(options)
+      mainWindow.addBrowserView(browserView)
+      browserView.setBounds({ x: 0, y: 0, width: 640, height: 480 })
+      return browserView.webContents
+    }
+  }
+})
+```
+
 #### `contents.setAudioMuted(muted)`
 
 * `muted` boolean

diff --git a/filenames.auto.gni b/filenames.auto.gni
@@ -144,6 +144,7 @@ auto_filenames = {
     "docs/api/structures/web-preferences.md",
     "docs/api/structures/web-request-filter.md",
     "docs/api/structures/web-source.md",
+    "docs/api/structures/window-open-handler-response.md",
   ]
 
   sandbox_bundle_deps = [

diff --git a/lib/browser/api/web-contents.ts b/lib/browser/api/web-contents.ts
@@ -435,14 +435,15 @@ WebContents.prototype.loadURL = function (url, options) {
   return p;
 };
 
-WebContents.prototype.setWindowOpenHandler = function (handler: (details: Electron.HandlerDetails) => ({action: 'deny'} | {action: 'allow', overrideBrowserWindowOptions?: BrowserWindowConstructorOptions, outlivesOpener?: boolean})) {
+WebContents.prototype.setWindowOpenHandler = function (handler: (details: Electron.HandlerDetails) => Electron.WindowOpenHandlerResponse) {
   this._windowOpenHandler = handler;
 };
 
-WebContents.prototype._callWindowOpenHandler = function (event: Electron.Event, details: Electron.HandlerDetails): {browserWindowConstructorOptions: BrowserWindowConstructorOptions | null, outlivesOpener: boolean} {
+WebContents.prototype._callWindowOpenHandler = function (event: Electron.Event, details: Electron.HandlerDetails): {browserWindowConstructorOptions: BrowserWindowConstructorOptions | null, outlivesOpener: boolean, createWindow?: Electron.CreateWindowFunction} {
   const defaultResponse = {
     browserWindowConstructorOptions: null,
-    outlivesOpener: false
+    outlivesOpener: false,
+    createWindow: undefined
   };
   if (!this._windowOpenHandler) {
     return defaultResponse;
@@ -468,7 +469,8 @@ WebContents.prototype._callWindowOpenHandler = function (event: Electron.Event,
   } else if (response.action === 'allow') {
     return {
       browserWindowConstructorOptions: typeof response.overrideBrowserWindowOptions === 'object' ? response.overrideBrowserWindowOptions : null,
-      outlivesOpener: typeof response.outlivesOpener === 'boolean' ? response.outlivesOpener : false
+      outlivesOpener: typeof response.outlivesOpener === 'boolean' ? response.outlivesOpener : false,
+      createWindow: typeof response.createWindow === 'function' ? response.createWindow : undefined
     };
   } else {
     event.preventDefault();
@@ -655,13 +657,16 @@ WebContents.prototype._init = function () {
           postData,
           overrideBrowserWindowOptions: options || {},
           windowOpenArgs: details,
-          outlivesOpener: result.outlivesOpener
+          outlivesOpener: result.outlivesOpener,
+          createWindow: result.createWindow
         });
       }
     });
 
     let windowOpenOverriddenOptions: BrowserWindowConstructorOptions | null = null;
     let windowOpenOutlivesOpenerOption: boolean = false;
+    let createWindow: Electron.CreateWindowFunction | undefined;
+
     this.on('-will-add-new-contents' as any, (event: Electron.Event, url: string, frameName: string, rawFeatures: string, disposition: Electron.HandlerDetails['disposition'], referrer: Electron.Referrer, postData: PostData) => {
       const postBody = postData ? {
         data: postData,
@@ -686,6 +691,7 @@ WebContents.prototype._init = function () {
 
       windowOpenOutlivesOpenerOption = result.outlivesOpener;
       windowOpenOverriddenOptions = result.browserWindowConstructorOptions;
+      createWindow = result.createWindow;
       if (!event.defaultPrevented) {
         const secureOverrideWebPreferences = windowOpenOverriddenOptions ? {
           // Allow setting of backgroundColor as a webPreference even though
@@ -715,6 +721,9 @@ WebContents.prototype._init = function () {
       referrer: Electron.Referrer, rawFeatures: string, postData: PostData) => {
       const overriddenOptions = windowOpenOverriddenOptions || undefined;
       const outlivesOpener = windowOpenOutlivesOpenerOption;
+      const windowOpenFunction = createWindow;
+
+      createWindow = undefined;
       windowOpenOverriddenOptions = null;
       // false is the default
       windowOpenOutlivesOpenerOption = false;
@@ -737,7 +746,8 @@ WebContents.prototype._init = function () {
           frameName,
           features: rawFeatures
         },
-        outlivesOpener
+        outlivesOpener,
+        createWindow: windowOpenFunction
       });
     });
   }

diff --git a/lib/browser/guest-window-manager.ts b/lib/browser/guest-window-manager.ts
@@ -16,16 +16,16 @@ export type WindowOpenArgs = {
   features: string,
 }
 
-const frameNamesToWindow = new Map<string, BrowserWindow>();
-const registerFrameNameToGuestWindow = (name: string, win: BrowserWindow) => frameNamesToWindow.set(name, win);
+const frameNamesToWindow = new Map<string, WebContents>();
+const registerFrameNameToGuestWindow = (name: string, webContents: WebContents) => frameNamesToWindow.set(name, webContents);
 const unregisterFrameName = (name: string) => frameNamesToWindow.delete(name);
-const getGuestWindowByFrameName = (name: string) => frameNamesToWindow.get(name);
+const getGuestWebContentsByFrameName = (name: string) => frameNamesToWindow.get(name);
 
 /**
  * `openGuestWindow` is called to create and setup event handling for the new
  * window.
  */
-export function openGuestWindow ({ embedder, guest, referrer, disposition, postData, overrideBrowserWindowOptions, windowOpenArgs, outlivesOpener }: {
+export function openGuestWindow ({ embedder, guest, referrer, disposition, postData, overrideBrowserWindowOptions, windowOpenArgs, outlivesOpener, createWindow }: {
   embedder: WebContents,
   guest?: WebContents,
   referrer: Referrer,
@@ -34,7 +34,8 @@ export function openGuestWindow ({ embedder, guest, referrer, disposition, postD
   overrideBrowserWindowOptions?: BrowserWindowConstructorOptions,
   windowOpenArgs: WindowOpenArgs,
   outlivesOpener: boolean,
-}): BrowserWindow | undefined {
+  createWindow?: Electron.CreateWindowFunction
+}): void {
   const { url, frameName, features } = windowOpenArgs;
   const { options: parsedOptions } = parseFeatures(features);
   const browserWindowOptions = {
@@ -48,17 +49,42 @@ export function openGuestWindow ({ embedder, guest, referrer, disposition, postD
   // To spec, subsequent window.open calls with the same frame name (`target` in
   // spec parlance) will reuse the previous window.
   // https://html.spec.whatwg.org/multipage/window-object.html#apis-for-creating-and-navigating-browsing-contexts-by-name
-  const existingWindow = getGuestWindowByFrameName(frameName);
-  if (existingWindow) {
-    if (existingWindow.isDestroyed() || existingWindow.webContents.isDestroyed()) {
+  const existingWebContents = getGuestWebContentsByFrameName(frameName);
+  if (existingWebContents) {
+    if (existingWebContents.isDestroyed()) {
       // FIXME(t57ser): The webContents is destroyed for some reason, unregister the frame name
       unregisterFrameName(frameName);
     } else {
-      existingWindow.loadURL(url);
-      return existingWindow;
+      existingWebContents.loadURL(url);
+      return;
     }
   }
 
+  if (createWindow) {
+    const webContents = createWindow({
+      webContents: guest,
+      ...browserWindowOptions
+    });
+
+    if (guest != null) {
+      if (webContents !== guest) {
+        throw new Error('Invalid webContents. Created window should be connected to webContents passed with options object.');
+      }
+
+      webContents.loadURL(url, {
+        httpReferrer: referrer,
+        ...(postData && {
+          postData,
+          extraHeaders: formatPostDataHeaders(postData as Electron.UploadRawData[])
+        })
+      });
+
+      handleWindowLifecycleEvents({ embedder, frameName, guest, outlivesOpener });
+    }
+
+    return;
+  }
+
   const window = new BrowserWindow({
     webContents: guest,
     ...browserWindowOptions
@@ -77,11 +103,9 @@ export function openGuestWindow ({ embedder, guest, referrer, disposition, postD
     });
   }
 
-  handleWindowLifecycleEvents({ embedder, frameName, guest: window, outlivesOpener });
+  handleWindowLifecycleEvents({ embedder, frameName, guest: window.webContents, outlivesOpener });
 
   embedder.emit('did-create-window', window, { url, frameName, options: browserWindowOptions, disposition, referrer, postData });
-
-  return window;
 }
 
 /**
@@ -92,12 +116,12 @@ export function openGuestWindow ({ embedder, guest, referrer, disposition, postD
  */
 const handleWindowLifecycleEvents = function ({ embedder, guest, frameName, outlivesOpener }: {
   embedder: WebContents,
-  guest: BrowserWindow,
+  guest: WebContents,
   frameName: string,
   outlivesOpener: boolean
 }) {
   const closedByEmbedder = function () {
-    guest.removeListener('closed', closedByUser);
+    guest.removeListener('destroyed', closedByUser);
     guest.destroy();
   };
 
@@ -110,11 +134,11 @@ const handleWindowLifecycleEvents = function ({ embedder, guest, frameName, outl
   if (!outlivesOpener) {
     embedder.once('current-render-view-deleted' as any, closedByEmbedder);
   }
-  guest.once('closed', closedByUser);
+  guest.once('destroyed', closedByUser);
 
   if (frameName) {
     registerFrameNameToGuestWindow(frameName, guest);
-    guest.once('closed', function () {
+    guest.once('destroyed', function () {
       unregisterFrameName(frameName);
     });
   }