chore: manually update website content (#673)
This commit is contained in:
Erick Zhao
GitHub
Родитель
d37d74492e
Коммит
9ee726b015
|
|
@ -44,6 +44,7 @@ an issue:
|
|||
* [Offline/Online Detection](latest/tutorial/online-offline-events.md)
|
||||
* [Represented File for macOS BrowserWindows](latest/tutorial/represented-file.md)
|
||||
* [Native File Drag & Drop](latest/tutorial/native-file-drag-drop.md)
|
||||
* [Navigation History](latest/tutorial/navigation-history.md)
|
||||
* [Offscreen Rendering](latest/tutorial/offscreen-rendering.md)
|
||||
* [Dark Mode](latest/tutorial/dark-mode.md)
|
||||
* [Web embeds in Electron](latest/tutorial/web-embeds.md)
|
||||
|
|
|
|||
|
|
@ -423,7 +423,7 @@ Returns:
|
|||
* `launch-failed` - Process never successfully launched
|
||||
* `integrity-failure` - Windows code integrity checks failed
|
||||
* `exitCode` number - The exit code for the process
|
||||
(e.g. status from waitpid if on posix, from GetExitCodeProcess on Windows).
|
||||
(e.g. status from waitpid if on POSIX, from GetExitCodeProcess on Windows).
|
||||
* `serviceName` string (optional) - The non-localized name of the process.
|
||||
* `name` string (optional) - The name of the process.
|
||||
Examples for utility: `Audio Service`, `Content Decryption Module Service`, `Network Service`, `Video Capture`, etc.
|
||||
|
|
@ -1497,6 +1497,38 @@ This method can only be called after app is ready.
|
|||
|
||||
Returns `Promise<string>` - Resolves with the proxy information for `url` that will be used when attempting to make requests using [Net](latest/api/net.md) in the [utility process](latest/glossary.md#utility-process).
|
||||
|
||||
### `app.setClientCertRequestPasswordHandler(handler)` _Linux_
|
||||
|
||||
* `handler` Function\<Promise\<string\>\>
|
||||
* `clientCertRequestParams` Object
|
||||
* `hostname` string - the hostname of the site requiring a client certificate
|
||||
* `tokenName` string - the token (or slot) name of the cryptographic device
|
||||
* `isRetry` boolean - whether there have been previous failed attempts at prompting the password
|
||||
|
||||
Returns `Promise<string>` - Resolves with the password
|
||||
|
||||
The handler is called when a password is needed to unlock a client certificate for
|
||||
`hostname`.
|
||||
|
||||
```js
|
||||
const { app } = require('electron')
|
||||
|
||||
async function passwordPromptUI (text) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// display UI to prompt user for password
|
||||
// ...
|
||||
// ...
|
||||
resolve('the password')
|
||||
})
|
||||
}
|
||||
|
||||
app.setClientCertRequestPasswordHandler(async ({ hostname, tokenName, isRetry }) => {
|
||||
const text = `Please sign in to ${tokenName} to authenticate to ${hostname} with your certificate`
|
||||
const password = await passwordPromptUI(text)
|
||||
return password
|
||||
})
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### `app.accessibilitySupportEnabled` _macOS_ _Windows_
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ It creates a new `BaseWindow` with native properties as set by the `options`.
|
|||
* `show` boolean (optional) - Whether window should be shown when created. Default is
|
||||
`true`.
|
||||
* `frame` boolean (optional) - Specify `false` to create a
|
||||
[frameless window](latest/tutorial/window-customization.md#create-frameless-windows). Default is `true`.
|
||||
[frameless window](latest/tutorial/custom-window-styles.md#frameless-windows). Default is `true`.
|
||||
* `parent` BaseWindow (optional) - Specify parent window. Default is `null`.
|
||||
* `modal` boolean (optional) - Whether this is a modal window. This only works when the
|
||||
window is a child window. Default is `false`.
|
||||
|
|
@ -154,7 +154,7 @@ It creates a new `BaseWindow` with native properties as set by the `options`.
|
|||
is only implemented on Windows and macOS.
|
||||
* `darkTheme` boolean (optional) - Forces using dark theme for the window, only works on
|
||||
some GTK+3 desktop environments. Default is `false`.
|
||||
* `transparent` boolean (optional) - Makes the window [transparent](latest/tutorial/window-customization.md#create-transparent-windows).
|
||||
* `transparent` boolean (optional) - Makes the window [transparent](latest/tutorial/custom-window-styles.md#transparent-windows).
|
||||
Default is `false`. On Windows, does not work unless the window is frameless.
|
||||
* `type` string (optional) - The type of window, default is normal window. See more about
|
||||
this below.
|
||||
|
|
@ -227,8 +227,7 @@ Possible values are:
|
|||
-webkit-app-region: drag. This type is commonly used for splash screens.
|
||||
* The `notification` type creates a window that behaves like a system notification.
|
||||
* On macOS, possible types are `desktop`, `textured`, `panel`.
|
||||
* The `textured` type adds metal gradient appearance
|
||||
(`NSWindowStyleMaskTexturedBackground`).
|
||||
* The `textured` type adds metal gradient appearance. This option is **deprecated**.
|
||||
* The `desktop` type places the window at the desktop background window level
|
||||
(`kCGDesktopWindowLevel - 1`). Note that desktop window will not receive
|
||||
focus, keyboard or mouse events, but you can use `globalShortcut` to receive
|
||||
|
|
@ -287,10 +286,18 @@ or session log off.
|
|||
|
||||
#### Event: 'blur'
|
||||
|
||||
Returns:
|
||||
|
||||
* `event` Event
|
||||
|
||||
Emitted when the window loses focus.
|
||||
|
||||
#### Event: 'focus'
|
||||
|
||||
Returns:
|
||||
|
||||
* `event` Event
|
||||
|
||||
Emitted when the window gains focus.
|
||||
|
||||
#### Event: 'show'
|
||||
|
|
@ -640,7 +647,7 @@ Sets the content view of the window.
|
|||
|
||||
#### `win.getContentView()`
|
||||
|
||||
Returns [View](latest/api/view.md) - The content view of the window.
|
||||
Returns [`View`](latest/api/view.md) - The content view of the window.
|
||||
|
||||
#### `win.destroy()`
|
||||
|
||||
|
|
|
|||
|
|
@ -146,10 +146,14 @@ deprecated:
|
|||
[browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
|
||||
frames will be drawn and swapped for the whole window and other
|
||||
[webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
|
||||
* `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
* `offscreen` Object | boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
window. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `useSharedTexture` boolean (optional) _Experimental_ - Whether to use GPU shared texture for accelerated
|
||||
paint event. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `contextIsolation` boolean (optional) - Whether to run Electron APIs and
|
||||
the specified `preload` script in a separate JavaScript context. Defaults
|
||||
to `true`. The context that the `preload` script runs in will only have
|
||||
|
|
|
|||
|
|
@ -240,10 +240,14 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
|
|||
[browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
|
||||
frames will be drawn and swapped for the whole window and other
|
||||
[webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
|
||||
* `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
* `offscreen` Object | boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
window. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `useSharedTexture` boolean (optional) _Experimental_ - Whether to use GPU shared texture for accelerated
|
||||
paint event. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `contextIsolation` boolean (optional) - Whether to run Electron APIs and
|
||||
the specified `preload` script in a separate JavaScript context. Defaults
|
||||
to `true`. The context that the `preload` script runs in will only have
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ following properties:
|
|||
[`request.followRedirect`](#requestfollowredirect) is invoked synchronously
|
||||
during the [`redirect`](#event-redirect) event. Defaults to `follow`.
|
||||
* `origin` string (optional) - The origin URL of the request.
|
||||
* `referrerPolicy` string (optional) - can be `""`, `no-referrer`,
|
||||
* `referrerPolicy` string (optional) - can be "", `no-referrer`,
|
||||
`no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin`,
|
||||
`unsafe-url`, `same-origin`, `strict-origin`, or
|
||||
`strict-origin-when-cross-origin`. Defaults to
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ Without `*` prefix the URL has to match exactly.
|
|||
|
||||
### --disable-ntlm-v2
|
||||
|
||||
Disables NTLM v2 for posix platforms, no effect elsewhere.
|
||||
Disables NTLM v2 for POSIX platforms, no effect elsewhere.
|
||||
|
||||
### --disable-http-cache
|
||||
|
||||
|
|
|
|||
|
|
@ -87,4 +87,4 @@ Returns `Menu | null` - The application's [dock menu][dock-menu].
|
|||
|
||||
Sets the `image` associated with this dock icon.
|
||||
|
||||
[dock-menu]: https://developer.apple.com/macos/human-interface-guidelines/menus/dock-menus/
|
||||
[dock-menu]: https://developer.apple.com/design/human-interface-guidelines/dock-menus
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ Emitted when a request has been canceled during an ongoing HTTP transaction.
|
|||
|
||||
Returns:
|
||||
|
||||
`error` Error - Typically holds an error string identifying failure root cause.
|
||||
* `error` Error - Typically holds an error string identifying failure root cause.
|
||||
|
||||
Emitted when an error was encountered while streaming response data events. For
|
||||
instance, if the server closes the underlying while the response is still
|
||||
|
|
|
|||
|
|
@ -42,10 +42,7 @@ Returns `Integer` - The index of the current page, from which we would go back/f
|
|||
|
||||
* `index` Integer
|
||||
|
||||
Returns `Object`:
|
||||
|
||||
* `url` string - The URL of the navigation entry at the given index.
|
||||
* `title` string - The page title of the navigation entry at the given index.
|
||||
Returns [`NavigationEntry`](latest/api/structures/navigation-entry.md) - Navigation entry at the given index.
|
||||
|
||||
If index is out of bounds (greater than history length or less than 0), null will be returned.
|
||||
|
||||
|
|
@ -72,3 +69,15 @@ Navigates to the specified offset from the current entry.
|
|||
#### `navigationHistory.length()`
|
||||
|
||||
Returns `Integer` - History length.
|
||||
|
||||
#### `navigationHistory.removeEntryAtIndex(index)`
|
||||
|
||||
* `index` Integer
|
||||
|
||||
Removes the navigation entry at the given index. Can't remove entry at the "current active index".
|
||||
|
||||
Returns `boolean` - Whether the navigation entry was removed from the webContents history.
|
||||
|
||||
#### `navigationHistory.getAllEntries()`
|
||||
|
||||
Returns [`NavigationEntry[]`](latest/api/structures/navigation-entry.md) - WebContents complete history.
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ won't be able to connect to remote sites. However, a return value of
|
|||
whether a particular connection attempt to a particular remote site
|
||||
will be successful.
|
||||
|
||||
#### `net.resolveHost(host, [options])`
|
||||
### `net.resolveHost(host, [options])`
|
||||
|
||||
* `host` string - Hostname to resolve.
|
||||
* `options` Object (optional)
|
||||
|
|
|
|||
|
|
@ -275,7 +275,8 @@ Returns:
|
|||
* `event` Event
|
||||
* `details` Object
|
||||
* `deviceList` [HIDDevice[]](latest/api/structures/hid-device.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) | null - The frame initiating this event.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `callback` Function
|
||||
* `deviceId` string | null (optional)
|
||||
|
||||
|
|
@ -339,7 +340,8 @@ Returns:
|
|||
* `event` Event
|
||||
* `details` Object
|
||||
* `device` [HIDDevice](latest/api/structures/hid-device.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) | null - The frame initiating this event.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
|
||||
Emitted after `navigator.hid.requestDevice` has been called and
|
||||
`select-hid-device` has fired if a new device becomes available before
|
||||
|
|
@ -354,7 +356,8 @@ Returns:
|
|||
* `event` Event
|
||||
* `details` Object
|
||||
* `device` [HIDDevice](latest/api/structures/hid-device.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) | null - The frame initiating this event.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
|
||||
Emitted after `navigator.hid.requestDevice` has been called and
|
||||
`select-hid-device` has fired if a device has been removed before the callback
|
||||
|
|
@ -480,7 +483,8 @@ Returns:
|
|||
* `event` Event
|
||||
* `details` Object
|
||||
* `port` [SerialPort](latest/api/structures/serial-port.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) | null - The frame initiating this event.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `origin` string - The origin that the device has been revoked from.
|
||||
|
||||
Emitted after `SerialPort.forget()` has been called. This event can be used
|
||||
|
|
@ -502,7 +506,7 @@ app.whenReady().then(() => {
|
|||
})
|
||||
```
|
||||
|
||||
```js
|
||||
```js @ts-nocheck
|
||||
// Renderer Process
|
||||
|
||||
const portConnect = async () => {
|
||||
|
|
@ -524,7 +528,8 @@ Returns:
|
|||
* `event` Event
|
||||
* `details` Object
|
||||
* `deviceList` [USBDevice[]](latest/api/structures/usb-device.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) | null - The frame initiating this event.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `callback` Function
|
||||
* `deviceId` string (optional)
|
||||
|
||||
|
|
@ -964,7 +969,8 @@ session.fromPartition('some-partition').setPermissionCheckHandler((webContents,
|
|||
|
||||
* `handler` Function | null
|
||||
* `request` Object
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) - Frame that is requesting access to media.
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) | null - Frame that is requesting access to media.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `securityOrigin` String - Origin of the page making the request.
|
||||
* `videoRequested` Boolean - true if the web content requested a video stream.
|
||||
* `audioRequested` Boolean - true if the web content requested an audio stream.
|
||||
|
|
@ -1165,7 +1171,8 @@ app.whenReady().then(() => {
|
|||
pin displayed on the device.
|
||||
* `providePin`
|
||||
This prompt is requesting that a pin be provided for the device.
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md)
|
||||
* `frame` [WebFrameMain](latest/api/web-frame-main.md) | null - The frame initiating this handler.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `pin` string (optional) - The pin value to verify if `pairingKind` is `confirmPin`.
|
||||
* `callback` Function
|
||||
* `response` Object
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ Open the given file in the desktop's default manner.
|
|||
|
||||
### `shell.openExternal(url[, options])`
|
||||
|
||||
* `url` string - Max 2081 characters on windows.
|
||||
* `url` string - Max 2081 characters on Windows.
|
||||
* `options` Object (optional)
|
||||
* `activate` boolean (optional) _macOS_ - `true` to bring the opened application to the foreground. The default is `true`.
|
||||
* `workingDirectory` string (optional) _Windows_ - The working directory.
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ hide_title: false
|
|||
* `show` boolean (optional) - Whether window should be shown when created. Default is
|
||||
`true`.
|
||||
* `frame` boolean (optional) - Specify `false` to create a
|
||||
[frameless window](latest/tutorial/window-customization.md#create-frameless-windows). Default is `true`.
|
||||
[frameless window](latest/tutorial/custom-window-styles.md#frameless-windows). Default is `true`.
|
||||
* `parent` BaseWindow (optional) - Specify parent window. Default is `null`.
|
||||
* `modal` boolean (optional) - Whether this is a modal window. This only works when the
|
||||
window is a child window. Default is `false`.
|
||||
|
|
@ -77,7 +77,7 @@ hide_title: false
|
|||
is only implemented on Windows and macOS.
|
||||
* `darkTheme` boolean (optional) - Forces using dark theme for the window, only works on
|
||||
some GTK+3 desktop environments. Default is `false`.
|
||||
* `transparent` boolean (optional) - Makes the window [transparent](latest/tutorial/window-customization.md#create-transparent-windows).
|
||||
* `transparent` boolean (optional) - Makes the window [transparent](latest/tutorial/custom-window-styles.md#transparent-windows).
|
||||
Default is `false`. On Windows, does not work unless the window is frameless.
|
||||
* `type` string (optional) - The type of window, default is normal window. See more about
|
||||
this below.
|
||||
|
|
@ -150,8 +150,7 @@ Possible values are:
|
|||
-webkit-app-region: drag. This type is commonly used for splash screens.
|
||||
* The `notification` type creates a window that behaves like a system notification.
|
||||
* On macOS, possible types are `desktop`, `textured`, `panel`.
|
||||
* The `textured` type adds metal gradient appearance
|
||||
(`NSWindowStyleMaskTexturedBackground`).
|
||||
* The `textured` type adds metal gradient appearance. This option is **deprecated**.
|
||||
* The `desktop` type places the window at the desktop background window level
|
||||
(`kCGDesktopWindowLevel - 1`). Note that desktop window will not receive
|
||||
focus, keyboard or mouse events, but you can use `globalShortcut` to receive
|
||||
|
|
|
|||
|
|
@ -87,10 +87,14 @@ hide_title: false
|
|||
[browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
|
||||
frames will be drawn and swapped for the whole window and other
|
||||
[webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
|
||||
* `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
* `offscreen` Object | boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
window. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `useSharedTexture` boolean (optional) _Experimental_ - Whether to use GPU shared texture for accelerated
|
||||
paint event. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `contextIsolation` boolean (optional) - Whether to run Electron APIs and
|
||||
the specified `preload` script in a separate JavaScript context. Defaults
|
||||
to `true`. The context that the `preload` script runs in will only have
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ hide_title: false
|
|||
* `frameId` Integer - The ID of the renderer frame that sent this message
|
||||
* `returnValue` any - Set this to the value to be returned in a synchronous message
|
||||
* `sender` [WebContents](latest/api/web-contents.md) - Returns the `webContents` that sent the message
|
||||
* `senderFrame` [WebFrameMain](latest/api/web-frame-main.md) _Readonly_ - The frame that sent this message
|
||||
* `senderFrame` [WebFrameMain](latest/api/web-frame-main.md) | null _Readonly_ - The frame that sent this message. May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `ports` [MessagePortMain](latest/api/message-port-main.md)[] - A list of MessagePorts that were transferred with this message
|
||||
* `reply` Function - A function that will send an IPC message to the renderer frame that sent the original message that you are currently handling. You should use this method to "reply" to the sent message in order to guarantee the reply will go to the correct process and frame.
|
||||
* `channel` string
|
||||
|
|
|
|||
|
|
@ -10,4 +10,4 @@ hide_title: false
|
|||
* `processId` Integer - The internal ID of the renderer process that sent this message
|
||||
* `frameId` Integer - The ID of the renderer frame that sent this message
|
||||
* `sender` [WebContents](latest/api/web-contents.md) - Returns the `webContents` that sent the message
|
||||
* `senderFrame` [WebFrameMain](latest/api/web-frame-main.md) _Readonly_ - The frame that sent this message
|
||||
* `senderFrame` [WebFrameMain](latest/api/web-frame-main.md) | null _Readonly_ - The frame that sent this message. May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "NavigationEntry Object"
|
||||
description: ""
|
||||
slug: navigation-entry
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# NavigationEntry Object
|
||||
|
||||
* `url` string
|
||||
* `title` string
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: "OffscreenSharedTexture Object"
|
||||
description: ""
|
||||
slug: offscreen-shared-texture
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# OffscreenSharedTexture Object
|
||||
|
||||
* `textureInfo` Object - The shared texture info.
|
||||
* `widgetType` string - The widget type of the texture. Can be `popup` or `frame`.
|
||||
* `pixelFormat` string - The pixel format of the texture. Can be `rgba` or `bgra`.
|
||||
* `codedSize` [Size](latest/api/structures/size.md) - The full dimensions of the video frame.
|
||||
* `visibleRect` [Rectangle](latest/api/structures/rectangle.md) - A subsection of [0, 0, codedSize.width(), codedSize.height()]. In OSR case, it is expected to have the full section area.
|
||||
* `contentRect` [Rectangle](latest/api/structures/rectangle.md) - The region of the video frame that capturer would like to populate. In OSR case, it is the same with `dirtyRect` that needs to be painted.
|
||||
* `timestamp` number - The time in microseconds since the capture start.
|
||||
* `metadata` Object - Extra metadata. See comments in src\media\base\video_frame_metadata.h for accurate details.
|
||||
* `captureUpdateRect` [Rectangle](latest/api/structures/rectangle.md) (optional) - Updated area of frame, can be considered as the `dirty` area.
|
||||
* `regionCaptureRect` [Rectangle](latest/api/structures/rectangle.md) (optional) - May reflect the frame's contents origin if region capture is used internally.
|
||||
* `sourceSize` [Rectangle](latest/api/structures/rectangle.md) (optional) - Full size of the source frame.
|
||||
* `frameCount` number (optional) - The increasing count of captured frame. May contain gaps if frames are dropped between two consecutively received frames.
|
||||
* `sharedTextureHandle` Buffer _Windows_ _macOS_ - The handle to the shared texture.
|
||||
* `planes` Object[] _Linux_ - Each plane's info of the shared texture.
|
||||
* `stride` number - The strides and offsets in bytes to be used when accessing the buffers via a memory mapping. One per plane per entry.
|
||||
* `offset` number - The strides and offsets in bytes to be used when accessing the buffers via a memory mapping. One per plane per entry.
|
||||
* `size` number - Size in bytes of the plane. This is necessary to map the buffers.
|
||||
* `fd` number - File descriptor for the underlying memory object (usually dmabuf).
|
||||
* `modifier` string _Linux_ - The modifier is retrieved from GBM library and passed to EGL driver.
|
||||
* `release` Function - Release the resources. The `texture` cannot be directly passed to another process, users need to maintain texture lifecycles in
|
||||
main process, but it is safe to pass the `textureInfo` to another process. Only a limited number of textures can exist at the same time, so it's important
|
||||
that you call `texture.release()` as soon as you're done with the texture.
|
||||
|
|
@ -86,10 +86,14 @@ hide_title: false
|
|||
[browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
|
||||
frames will be drawn and swapped for the whole window and other
|
||||
[webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
|
||||
* `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
* `offscreen` Object | boolean (optional) - Whether to enable offscreen rendering for the browser
|
||||
window. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `useSharedTexture` boolean (optional) _Experimental_ - Whether to use GPU shared texture for accelerated
|
||||
paint event. Defaults to `false`. See the
|
||||
[offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
|
||||
more details.
|
||||
* `contextIsolation` boolean (optional) - Whether to run Electron APIs and
|
||||
the specified `preload` script in a separate JavaScript context. Defaults
|
||||
to `true`. The context that the `preload` script runs in will only have
|
||||
|
|
|
|||
|
|
@ -93,9 +93,21 @@ true if the kill is successful, and false otherwise.
|
|||
#### `child.pid`
|
||||
|
||||
A `Integer | undefined` representing the process identifier (PID) of the child process.
|
||||
If the child process fails to spawn due to errors, then the value is `undefined`. When
|
||||
Until the child process has spawned successfully, the value is `undefined`. When
|
||||
the child process exits, then the value is `undefined` after the `exit` event is emitted.
|
||||
|
||||
```js
|
||||
const child = utilityProcess.fork(path.join(__dirname, 'test.js'))
|
||||
|
||||
child.on('spawn', () => {
|
||||
console.log(child.pid) // Integer
|
||||
})
|
||||
|
||||
child.on('exit', () => {
|
||||
console.log(child.pid) // undefined
|
||||
})
|
||||
```
|
||||
|
||||
#### `child.stdout`
|
||||
|
||||
A `NodeJS.ReadableStream | null` that represents the child process's stdout.
|
||||
|
|
@ -123,12 +135,26 @@ When the child process exits, then the value is `null` after the `exit` event is
|
|||
|
||||
Emitted once the child process has spawned successfully.
|
||||
|
||||
#### Event: 'error' _Experimental_
|
||||
|
||||
Returns:
|
||||
|
||||
* `type` string - Type of error. One of the following values:
|
||||
* `FatalError`
|
||||
* `location` string - Source location from where the error originated.
|
||||
* `report` string - [`Node.js diagnostic report`][].
|
||||
|
||||
Emitted when the child process needs to terminate due to non continuable error from V8.
|
||||
|
||||
No matter if you listen to the `error` event, the `exit` event will be emitted after the
|
||||
child process terminates.
|
||||
|
||||
#### Event: 'exit'
|
||||
|
||||
Returns:
|
||||
|
||||
* `code` number - Contains the exit code for
|
||||
the process obtained from waitpid on posix, or GetExitCodeProcess on windows.
|
||||
the process obtained from waitpid on POSIX, or GetExitCodeProcess on Windows.
|
||||
|
||||
Emitted after the child process ends.
|
||||
|
||||
|
|
@ -145,3 +171,4 @@ Emitted when the child process sends a message using [`process.parentPort.postMe
|
|||
[stdio]: https://nodejs.org/dist/latest/docs/api/child_process.html#optionsstdio
|
||||
[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
|
||||
[`MessagePortMain`]: latest/api/message-port-main.md
|
||||
[`Node.js diagnostic report`]: https://nodejs.org/docs/latest/api/report.html#diagnostic-report
|
||||
|
|
|
|||
|
|
@ -103,6 +103,12 @@ Examples of valid `color` values:
|
|||
|
||||
**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBAA` or `RGB`.
|
||||
|
||||
#### `view.setBorderRadius(radius)`
|
||||
|
||||
* `radius` Integer - Border radius size in pixels.
|
||||
|
||||
**Note:** The area cutout of the view's border still captures clicks.
|
||||
|
||||
#### `view.setVisible(visible)`
|
||||
|
||||
* `visible` boolean - If false, the view will be hidden from display.
|
||||
|
|
|
|||
|
|
@ -249,8 +249,9 @@ Returns:
|
|||
* `isSameDocument` boolean - This event does not fire for same document navigations using window.history api and reference fragment navigations.
|
||||
This property is always set to `false` for this event.
|
||||
* `isMainFrame` boolean - True if the navigation is taking place in a main frame.
|
||||
* `frame` WebFrameMain - The frame to be navigated.
|
||||
* `initiator` WebFrameMain (optional) - The frame which initiated the
|
||||
* `frame` WebFrameMain | null - The frame to be navigated.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `initiator` WebFrameMain | null (optional) - The frame which initiated the
|
||||
navigation, which can be a parent frame (e.g. via `window.open` with a
|
||||
frame's name), or null if the navigation was not initiated by a frame. This
|
||||
can also be null if the initiating frame was deleted before the event was
|
||||
|
|
@ -282,8 +283,9 @@ Returns:
|
|||
* `isSameDocument` boolean - This event does not fire for same document navigations using window.history api and reference fragment navigations.
|
||||
This property is always set to `false` for this event.
|
||||
* `isMainFrame` boolean - True if the navigation is taking place in a main frame.
|
||||
* `frame` WebFrameMain - The frame to be navigated.
|
||||
* `initiator` WebFrameMain (optional) - The frame which initiated the
|
||||
* `frame` WebFrameMain | null - The frame to be navigated.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `initiator` WebFrameMain | null (optional) - The frame which initiated the
|
||||
navigation, which can be a parent frame (e.g. via `window.open` with a
|
||||
frame's name), or null if the navigation was not initiated by a frame. This
|
||||
can also be null if the initiating frame was deleted before the event was
|
||||
|
|
@ -313,8 +315,9 @@ Returns:
|
|||
document. Examples of same document navigations are reference fragment
|
||||
navigations, pushState/replaceState, and same page history navigation.
|
||||
* `isMainFrame` boolean - True if the navigation is taking place in a main frame.
|
||||
* `frame` WebFrameMain - The frame to be navigated.
|
||||
* `initiator` WebFrameMain (optional) - The frame which initiated the
|
||||
* `frame` WebFrameMain | null - The frame to be navigated.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `initiator` WebFrameMain | null (optional) - The frame which initiated the
|
||||
navigation, which can be a parent frame (e.g. via `window.open` with a
|
||||
frame's name), or null if the navigation was not initiated by a frame. This
|
||||
can also be null if the initiating frame was deleted before the event was
|
||||
|
|
@ -337,8 +340,9 @@ Returns:
|
|||
document. Examples of same document navigations are reference fragment
|
||||
navigations, pushState/replaceState, and same page history navigation.
|
||||
* `isMainFrame` boolean - True if the navigation is taking place in a main frame.
|
||||
* `frame` WebFrameMain - The frame to be navigated.
|
||||
* `initiator` WebFrameMain (optional) - The frame which initiated the
|
||||
* `frame` WebFrameMain | null - The frame to be navigated.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `initiator` WebFrameMain | null (optional) - The frame which initiated the
|
||||
navigation, which can be a parent frame (e.g. via `window.open` with a
|
||||
frame's name), or null if the navigation was not initiated by a frame. This
|
||||
can also be null if the initiating frame was deleted before the event was
|
||||
|
|
@ -368,8 +372,9 @@ Returns:
|
|||
document. Examples of same document navigations are reference fragment
|
||||
navigations, pushState/replaceState, and same page history navigation.
|
||||
* `isMainFrame` boolean - True if the navigation is taking place in a main frame.
|
||||
* `frame` WebFrameMain - The frame to be navigated.
|
||||
* `initiator` WebFrameMain (optional) - The frame which initiated the
|
||||
* `frame` WebFrameMain | null - The frame to be navigated.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `initiator` WebFrameMain | null (optional) - The frame which initiated the
|
||||
navigation, which can be a parent frame (e.g. via `window.open` with a
|
||||
frame's name), or null if the navigation was not initiated by a frame. This
|
||||
can also be null if the initiating frame was deleted before the event was
|
||||
|
|
@ -750,7 +755,8 @@ Returns:
|
|||
* `params` Object
|
||||
* `x` Integer - x coordinate.
|
||||
* `y` Integer - y coordinate.
|
||||
* `frame` WebFrameMain - Frame from which the context menu was invoked.
|
||||
* `frame` WebFrameMain | null - Frame from which the context menu was invoked.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `linkURL` string - URL of the link that encloses the node the context menu
|
||||
was invoked on.
|
||||
* `linkText` string - Text associated with the link. May be an empty
|
||||
|
|
@ -876,12 +882,12 @@ app.whenReady().then(() => {
|
|||
|
||||
Returns:
|
||||
|
||||
* `event` Event
|
||||
* `details` Event\<\>
|
||||
* `texture` [OffscreenSharedTexture](latest/api/structures/offscreen-shared-texture.md) (optional) _Experimental_ - The GPU shared texture of the frame, when `webPreferences.offscreen.useSharedTexture` is `true`.
|
||||
* `dirtyRect` [Rectangle](latest/api/structures/rectangle.md)
|
||||
* `image` [NativeImage](latest/api/native-image.md) - The image data of the whole frame.
|
||||
|
||||
Emitted when a new frame is generated. Only the dirty area is passed in the
|
||||
buffer.
|
||||
Emitted when a new frame is generated. Only the dirty area is passed in the buffer.
|
||||
|
||||
```js
|
||||
const { BrowserWindow } = require('electron')
|
||||
|
|
@ -893,6 +899,33 @@ win.webContents.on('paint', (event, dirty, image) => {
|
|||
win.loadURL('https://github.com')
|
||||
```
|
||||
|
||||
When using shared texture (set `webPreferences.offscreen.useSharedTexture` to `true`) feature, you can pass the texture handle to external rendering pipeline without the overhead of
|
||||
copying data between CPU and GPU memory, with Chromium's hardware acceleration support. This feature is helpful for high-performance rendering scenarios.
|
||||
|
||||
Only a limited number of textures can exist at the same time, so it's important that you call `texture.release()` as soon as you're done with the texture.
|
||||
By managing the texture lifecycle by yourself, you can safely pass the `texture.textureInfo` to other processes through IPC.
|
||||
|
||||
```js
|
||||
const { BrowserWindow } = require('electron')
|
||||
|
||||
const win = new BrowserWindow({ webPreferences: { offscreen: { useSharedTexture: true } } })
|
||||
win.webContents.on('paint', async (e, dirty, image) => {
|
||||
if (e.texture) {
|
||||
// By managing lifecycle yourself, you can handle the event in async handler or pass the `e.texture.textureInfo`
|
||||
// to other processes (not `e.texture`, the `e.texture.release` function is not passable through IPC).
|
||||
await new Promise(resolve => setTimeout(resolve, 50))
|
||||
|
||||
// You can send the native texture handle to native code for importing into your rendering pipeline.
|
||||
// For example: https://github.com/electron/electron/tree/main/spec/fixtures/native-addon/osr-gpu
|
||||
// importTextureHandle(dirty, e.texture.textureInfo)
|
||||
|
||||
// You must call `e.texture.release()` as soon as possible, before the underlying frame pool is drained.
|
||||
e.texture.release()
|
||||
}
|
||||
})
|
||||
win.loadURL('https://github.com')
|
||||
```
|
||||
|
||||
#### Event: 'devtools-reload-page'
|
||||
|
||||
Emitted when the devtools window instructs the webContents to reload
|
||||
|
|
@ -990,7 +1023,8 @@ Returns:
|
|||
|
||||
* `event` Event
|
||||
* `details` Object
|
||||
* `frame` WebFrameMain
|
||||
* `frame` WebFrameMain | null - The created frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
|
||||
Emitted when the [mainFrame](latest/api/web-contents.md#contentsmainframe-readonly), an `<iframe>`, or a nested `<iframe>` is loaded within the page.
|
||||
|
||||
|
|
@ -1141,7 +1175,7 @@ deprecated:
|
|||
|
||||
Returns `boolean` - Whether the browser can go back to previous web page.
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.canGoBack`](latest/api/navigation-history.md#navigationhistorycangoback) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.canGoBack`](latest/tutorial/navigation-history.md#navigationhistorycangoback) API.
|
||||
|
||||
#### `contents.canGoForward()` _Deprecated_
|
||||
|
||||
|
|
@ -1153,7 +1187,7 @@ deprecated:
|
|||
|
||||
Returns `boolean` - Whether the browser can go forward to next web page.
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.canGoForward`](latest/api/navigation-history.md#navigationhistorycangoforward) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.canGoForward`](latest/tutorial/navigation-history.md#navigationhistorycangoforward) API.
|
||||
|
||||
#### `contents.canGoToOffset(offset)` _Deprecated_
|
||||
|
||||
|
|
@ -1167,7 +1201,7 @@ deprecated:
|
|||
|
||||
Returns `boolean` - Whether the web page can go to `offset`.
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.canGoToOffset`](latest/api/navigation-history.md#navigationhistorycangotooffsetoffset) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.canGoToOffset`](latest/tutorial/navigation-history.md#navigationhistorycangotooffsetoffset) API.
|
||||
|
||||
#### `contents.clearHistory()` _Deprecated_
|
||||
|
||||
|
|
@ -1179,7 +1213,7 @@ deprecated:
|
|||
|
||||
Clears the navigation history.
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.clear`](latest/api/navigation-history.md#navigationhistoryclear) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.clear`](latest/tutorial/navigation-history.md#navigationhistoryclear) API.
|
||||
|
||||
#### `contents.goBack()` _Deprecated_
|
||||
|
||||
|
|
@ -1191,7 +1225,7 @@ deprecated:
|
|||
|
||||
Makes the browser go back a web page.
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goBack`](latest/api/navigation-history.md#navigationhistorygoback) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goBack`](latest/tutorial/navigation-history.md#navigationhistorygoback) API.
|
||||
|
||||
#### `contents.goForward()` _Deprecated_
|
||||
|
||||
|
|
@ -1203,7 +1237,7 @@ deprecated:
|
|||
|
||||
Makes the browser go forward a web page.
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goForward`](latest/api/navigation-history.md#navigationhistorygoforward) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goForward`](latest/tutorial/navigation-history.md#navigationhistorygoforward) API.
|
||||
|
||||
#### `contents.goToIndex(index)` _Deprecated_
|
||||
|
||||
|
|
@ -1217,7 +1251,7 @@ deprecated:
|
|||
|
||||
Navigates browser to the specified absolute web page index.
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goToIndex`](latest/api/navigation-history.md#navigationhistorygotoindexindex) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goToIndex`](latest/tutorial/navigation-history.md#navigationhistorygotoindexindex) API.
|
||||
|
||||
#### `contents.goToOffset(offset)` _Deprecated_
|
||||
|
||||
|
|
@ -1231,7 +1265,7 @@ deprecated:
|
|||
|
||||
Navigates to the specified offset from the "current entry".
|
||||
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goToOffset`](latest/api/navigation-history.md#navigationhistorygotooffsetoffset) API.
|
||||
**Deprecated:** Should use the new [`contents.navigationHistory.goToOffset`](latest/tutorial/navigation-history.md#navigationhistorygotooffsetoffset) API.
|
||||
|
||||
#### `contents.isCrashed()`
|
||||
|
||||
|
|
@ -1621,7 +1655,7 @@ If you would like the page to stay hidden, you should ensure that `stayHidden` i
|
|||
#### `contents.isBeingCaptured()`
|
||||
|
||||
Returns `boolean` - Whether this page is being captured. It returns true when the capturer count
|
||||
is large then 0.
|
||||
is greater than 0.
|
||||
|
||||
#### `contents.getPrintersAsync()`
|
||||
|
||||
|
|
@ -2301,7 +2335,7 @@ A [`Session`](latest/api/session.md) used by this webContents.
|
|||
|
||||
#### `contents.navigationHistory` _Readonly_
|
||||
|
||||
A [`NavigationHistory`](latest/api/navigation-history.md) used by this webContents.
|
||||
A [`NavigationHistory`](latest/tutorial/navigation-history.md) used by this webContents.
|
||||
|
||||
#### `contents.hostWebContents` _Readonly_
|
||||
|
||||
|
|
|
|||
|
|
@ -104,6 +104,10 @@ this limitation.
|
|||
|
||||
Returns `boolean` - Whether the reload was initiated successfully. Only results in `false` when the frame has no history.
|
||||
|
||||
#### `frame.isDestroyed()`
|
||||
|
||||
Returns `boolean` - Whether the frame is destroyed.
|
||||
|
||||
#### `frame.send(channel, ...args)`
|
||||
|
||||
* `channel` string
|
||||
|
|
@ -238,6 +242,13 @@ A `string` representing the [visibility state](https://developer.mozilla.org/en-
|
|||
|
||||
See also how the [Page Visibility API](latest/api/browser-window.md#page-visibility) is affected by other Electron APIs.
|
||||
|
||||
#### `frame.detached` _Readonly_
|
||||
|
||||
A `Boolean` representing whether the frame is detached from the frame tree. If a frame is accessed
|
||||
while the corresponding page is running any [unload][] listeners, it may become detached as the
|
||||
newly navigated page replaced it in the frame tree.
|
||||
|
||||
[SCA]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
|
||||
[`postMessage`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
|
||||
[`MessagePortMain`]: latest/api/message-port-main.md
|
||||
[unload]: https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ dispatch errors of isolated worlds to foreign worlds.
|
|||
|
||||
### `webFrame.setIsolatedWorldInfo(worldId, info)`
|
||||
|
||||
* `worldId` Integer - The ID of the world to run the javascript in, `0` is the default world, `999` is the world used by Electrons `contextIsolation` feature. Chrome extensions reserve the range of IDs in `[1 << 20, 1 << 29)`. You can provide any integer here.
|
||||
* `worldId` Integer - The ID of the world to run the javascript in, `0` is the default world, `999` is the world used by Electron's `contextIsolation` feature. Chrome extensions reserve the range of IDs in `[1 << 20, 1 << 29)`. You can provide any integer here.
|
||||
* `info` Object
|
||||
* `securityOrigin` string (optional) - Security origin for the isolated world.
|
||||
* `csp` string (optional) - Content Security Policy for the isolated world.
|
||||
|
|
|
|||
|
|
@ -58,7 +58,8 @@ The following methods are available on instances of `WebRequest`:
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
@ -101,7 +102,8 @@ Some examples of valid `urls`:
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
@ -129,7 +131,8 @@ The `callback` has to be called with a `response` object.
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
@ -149,7 +152,8 @@ response are visible by the time this listener is fired.
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
@ -180,7 +184,8 @@ The `callback` has to be called with a `response` object.
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
@ -204,7 +209,8 @@ and response headers are available.
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
@ -229,7 +235,8 @@ redirect is about to occur.
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
@ -252,7 +259,8 @@ completed.
|
|||
* `method` string
|
||||
* `webContentsId` Integer (optional)
|
||||
* `webContents` WebContents (optional)
|
||||
* `frame` WebFrameMain (optional)
|
||||
* `frame` WebFrameMain | null (optional) - Requesting frame.
|
||||
May be `null` if accessed after the frame has either navigated or been destroyed.
|
||||
* `resourceType` string - Can be `mainFrame`, `subFrame`, `stylesheet`, `script`, `image`, `font`, `object`, `xhr`, `ping`, `cspReport`, `media`, `webSocket` or `other`.
|
||||
* `referrer` string
|
||||
* `timestamp` Double
|
||||
|
|
|
|||
|
|
@ -21,12 +21,78 @@ This document uses the following convention to categorize breaking changes:
|
|||
|
||||
## Planned Breaking API Changes (33.0)
|
||||
|
||||
### Behavior Changed: frame properties may retrieve detached WebFrameMain instances or none at all
|
||||
|
||||
APIs which provide access to a `WebFrameMain` instance may return an instance
|
||||
with `frame.detached` set to `true`, or possibly return `null`.
|
||||
|
||||
When a frame performs a cross-origin navigation, it enters into a detached state
|
||||
in which it's no longer attached to the page. In this state, it may be running
|
||||
[unload](https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event)
|
||||
handlers prior to being deleted. In the event of an IPC sent during this state,
|
||||
`frame.detached` will be set to `true` with the frame being destroyed shortly
|
||||
thereafter.
|
||||
|
||||
When receiving an event, it's important to access WebFrameMain properties
|
||||
immediately upon being received. Otherwise, it's not guaranteed to point to the
|
||||
same webpage as when received. To avoid misaligned expectations, Electron will
|
||||
return `null` in the case of late access where the webpage has changed.
|
||||
|
||||
```ts
|
||||
ipcMain.on('unload-event', (event) => {
|
||||
event.senderFrame; // ✅ accessed immediately
|
||||
});
|
||||
|
||||
ipcMain.on('unload-event', async (event) => {
|
||||
await crossOriginNavigationPromise;
|
||||
event.senderFrame; // ❌ returns `null` due to late access
|
||||
});
|
||||
```
|
||||
|
||||
### Behavior Changed: custom protocol URL handling on Windows
|
||||
|
||||
Due to changes made in Chromium to support [Non-Special Scheme URLs](http://bit.ly/url-non-special), custom protocol URLs that use Windows file paths will no longer work correctly with the deprecated `protocol.registerFileProtocol` and the `baseURLForDataURL` property on `BrowserWindow.loadURL`, `WebContents.loadURL`, and `<webview>.loadURL`. `protocol.handle` will also not work with these types of URLs but this is not a change since it has always worked that way.
|
||||
|
||||
```js
|
||||
// No longer works
|
||||
protocol.registerFileProtocol('other', () => {
|
||||
callback({ filePath: '/path/to/my/file' })
|
||||
})
|
||||
|
||||
const mainWindow = new BrowserWindow()
|
||||
mainWindow.loadURL('data:text/html,<script src="loaded-from-dataurl.js"></script>', { baseURLForDataURL: 'other://C:\\myapp' })
|
||||
mainWindow.loadURL('other://C:\\myapp\\index.html')
|
||||
|
||||
// Replace with
|
||||
const path = require('node:path')
|
||||
const nodeUrl = require('node:url')
|
||||
protocol.handle(other, (req) => {
|
||||
const srcPath = 'C:\\myapp\\'
|
||||
const reqURL = new URL(req.url)
|
||||
return net.fetch(nodeUrl.pathToFileURL(path.join(srcPath, reqURL.pathname)).toString())
|
||||
})
|
||||
|
||||
mainWindow.loadURL('data:text/html,<script src="loaded-from-dataurl.js"></script>', { baseURLForDataURL: 'other://' })
|
||||
mainWindow.loadURL('other://index.html')
|
||||
```
|
||||
|
||||
### Behavior Changed: `webContents` property on `login` on `app`
|
||||
|
||||
The `webContents` property in the `login` event from `app` will be `null`
|
||||
when the event is triggered for requests from the [utility process](latest/api/utility-process.md)
|
||||
created with `respondToAuthRequestsFromMainProcess` option.
|
||||
|
||||
### Deprecated: `textured` option in `BrowserWindowConstructorOption.type`
|
||||
|
||||
The `textured` option of `type` in `BrowserWindowConstructorOptions` has been deprecated with no replacement. This option relied on the [`NSWindowStyleMaskTexturedBackground`](https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemasktexturedbackground) style mask on macOS, which has been deprecated with no alternative.
|
||||
|
||||
### Removed: macOS 10.15 support
|
||||
|
||||
macOS 10.15 (Catalina) is no longer supported by [Chromium](https://chromium-review.googlesource.com/c/chromium/src/+/5734361).
|
||||
|
||||
Older versions of Electron will continue to run on Catalina, but macOS 11 (Big Sur)
|
||||
or later will be required to run Electron v33.0.0 and higher.
|
||||
|
||||
### Deprecated: `systemPreferences.accessibilityDisplayShouldReduceTransparency`
|
||||
|
||||
The `systemPreferences.accessibilityDisplayShouldReduceTransparency` property is now deprecated in favor of the new `nativeTheme.prefersReducedTransparency`, which provides identical information and works cross-platform.
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
title: "Goma"
|
||||
description: "Goma is a distributed compiler service for open-source projects such as Chromium and Android."
|
||||
slug: goma
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# Goma
|
||||
|
||||
> Goma is a distributed compiler service for open-source projects such as
|
||||
> Chromium and Android.
|
||||
|
||||
Electron's deployment of Goma is deprecated and we are gradually shifting all usage to the [reclient](latest/development/reclient.md) system. At some point in 2024 the Goma backend will be shutdown.
|
||||
|
|
@ -72,6 +72,8 @@ $ git rebase --autosquash -i [COMMIT_SHA]^
|
|||
$ ../electron/script/git-export-patches -o ../electron/patches/v8
|
||||
```
|
||||
|
||||
Note that the `^` symbol [can cause trouble on Windows](https://stackoverflow.com/questions/14203952/git-reset-asks-more/14204318#14204318). The workaround is to either quote it `"[COMMIT_SHA]^"` or avoid it `[COMMIT_SHA]~1`.
|
||||
|
||||
#### Removing a patch
|
||||
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
title: "Experimental APIs"
|
||||
description: "Some of Electrons APIs are tagged with _Experimental_ in the documentation. This tag indicates that the API may not be considered stable and the API may be removed or modified more frequently than other APIs with less warning."
|
||||
description: "Some of Electron's APIs are tagged with _Experimental_ in the documentation. This tag indicates that the API may not be considered stable and the API may be removed or modified more frequently than other APIs with less warning."
|
||||
slug: experimental
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# Experimental APIs
|
||||
|
||||
Some of Electrons APIs are tagged with `_Experimental_` in the documentation.
|
||||
Some of Electron's APIs are tagged with `_Experimental_` in the documentation.
|
||||
This tag indicates that the API may not be considered stable and the API may
|
||||
be removed or modified more frequently than other APIs with less warning.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Enhanced Browser with Navigation History</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="controls">
|
||||
<button id="backBtn" title="Go back">Back</button>
|
||||
<button id="forwardBtn" title="Go forward">Forward</button>
|
||||
<button id="backHistoryBtn" title="Show back history">Back History</button>
|
||||
<button id="forwardHistoryBtn" title="Show forward history">Forward History</button>
|
||||
<input id="urlInput" type="text" placeholder="Enter URL">
|
||||
<button id="goBtn" title="Navigate to URL">Go</button>
|
||||
</div>
|
||||
|
||||
<div id="historyPanel" class="history-panel"></div>
|
||||
|
||||
<div id="description">
|
||||
<h2>Navigation History Demo</h2>
|
||||
<p>This demo showcases Electron's NavigationHistory API functionality.</p>
|
||||
<p><strong>Back/Forward:</strong> Navigate through your browsing history.</p>
|
||||
<p><strong>Back History/Forward History:</strong> View and select from your browsing history.</p>
|
||||
<p><strong>URL Bar:</strong> Enter a URL and click 'Go' or press Enter to navigate.</p>
|
||||
</div>
|
||||
<script src="renderer.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
const { app, BrowserWindow, BrowserView, ipcMain } = require('electron')
|
||||
const path = require('path')
|
||||
|
||||
function createWindow () {
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: 1000,
|
||||
height: 800,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
nodeIntegration: false,
|
||||
contextIsolation: true
|
||||
}
|
||||
})
|
||||
|
||||
mainWindow.loadFile('index.html')
|
||||
|
||||
const view = new BrowserView()
|
||||
mainWindow.setBrowserView(view)
|
||||
view.setBounds({ x: 0, y: 100, width: 1000, height: 800 })
|
||||
view.setAutoResize({ width: true, height: true })
|
||||
|
||||
const navigationHistory = view.webContents.navigationHistory
|
||||
ipcMain.handle('nav:back', () =>
|
||||
navigationHistory.goBack()
|
||||
)
|
||||
|
||||
ipcMain.handle('nav:forward', () => {
|
||||
navigationHistory.goForward()
|
||||
})
|
||||
|
||||
ipcMain.handle('nav:canGoBack', () => navigationHistory.canGoBack())
|
||||
ipcMain.handle('nav:canGoForward', () => navigationHistory.canGoForward())
|
||||
ipcMain.handle('nav:loadURL', (_, url) =>
|
||||
view.webContents.loadURL(url)
|
||||
)
|
||||
ipcMain.handle('nav:getCurrentURL', () => view.webContents.getURL())
|
||||
ipcMain.handle('nav:getHistory', () => {
|
||||
return navigationHistory.getAllEntries()
|
||||
})
|
||||
|
||||
view.webContents.on('did-navigate', () => {
|
||||
mainWindow.webContents.send('nav:updated')
|
||||
})
|
||||
|
||||
view.webContents.on('did-navigate-in-page', () => {
|
||||
mainWindow.webContents.send('nav:updated')
|
||||
})
|
||||
}
|
||||
|
||||
app.whenReady().then(createWindow)
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') app.quit()
|
||||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
const { contextBridge, ipcRenderer } = require('electron')
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', {
|
||||
goBack: () => ipcRenderer.invoke('nav:back'),
|
||||
goForward: () => ipcRenderer.invoke('nav:forward'),
|
||||
canGoBack: () => ipcRenderer.invoke('nav:canGoBack'),
|
||||
canGoForward: () => ipcRenderer.invoke('nav:canGoForward'),
|
||||
loadURL: (url) => ipcRenderer.invoke('nav:loadURL', url),
|
||||
getCurrentURL: () => ipcRenderer.invoke('nav:getCurrentURL'),
|
||||
getHistory: () => ipcRenderer.invoke('nav:getHistory'),
|
||||
onNavigationUpdate: (callback) => ipcRenderer.on('nav:updated', callback)
|
||||
})
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
const backBtn = document.getElementById('backBtn')
|
||||
const forwardBtn = document.getElementById('forwardBtn')
|
||||
const backHistoryBtn = document.getElementById('backHistoryBtn')
|
||||
const forwardHistoryBtn = document.getElementById('forwardHistoryBtn')
|
||||
const urlInput = document.getElementById('urlInput')
|
||||
const goBtn = document.getElementById('goBtn')
|
||||
const historyPanel = document.getElementById('historyPanel')
|
||||
|
||||
async function updateButtons () {
|
||||
const canGoBack = await window.electronAPI.canGoBack()
|
||||
const canGoForward = await window.electronAPI.canGoForward()
|
||||
backBtn.disabled = !canGoBack
|
||||
backHistoryBtn.disabled = !canGoBack
|
||||
|
||||
forwardBtn.disabled = !canGoForward
|
||||
forwardHistoryBtn.disabled = !canGoForward
|
||||
}
|
||||
|
||||
async function updateURL () {
|
||||
urlInput.value = await window.electronAPI.getCurrentURL()
|
||||
}
|
||||
|
||||
function transformURL (url) {
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
const updatedUrl = 'https://' + url
|
||||
return updatedUrl
|
||||
}
|
||||
return url
|
||||
}
|
||||
|
||||
async function navigate (url) {
|
||||
const urlInput = transformURL(url)
|
||||
|
||||
await window.electronAPI.loadURL(urlInput)
|
||||
}
|
||||
|
||||
async function showHistory (forward = false) {
|
||||
const history = await window.electronAPI.getHistory()
|
||||
const currentIndex = history.findIndex(entry => entry.url === transformURL(urlInput.value))
|
||||
|
||||
if (!currentIndex) {
|
||||
return
|
||||
}
|
||||
|
||||
const relevantHistory = forward
|
||||
? history.slice(currentIndex + 1)
|
||||
: history.slice(0, currentIndex).reverse()
|
||||
|
||||
historyPanel.innerHTML = ''
|
||||
relevantHistory.forEach(entry => {
|
||||
const div = document.createElement('div')
|
||||
div.textContent = `Title: ${entry.title}, URL: ${entry.url}`
|
||||
div.onclick = () => navigate(entry.url)
|
||||
historyPanel.appendChild(div)
|
||||
})
|
||||
|
||||
historyPanel.style.display = 'block'
|
||||
}
|
||||
|
||||
backBtn.addEventListener('click', () => window.electronAPI.goBack())
|
||||
forwardBtn.addEventListener('click', () => window.electronAPI.goForward())
|
||||
backHistoryBtn.addEventListener('click', () => showHistory(false))
|
||||
forwardHistoryBtn.addEventListener('click', () => showHistory(true))
|
||||
goBtn.addEventListener('click', () => navigate(urlInput.value))
|
||||
|
||||
urlInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
navigate(urlInput.value)
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target !== historyPanel && !historyPanel.contains(e.target) &&
|
||||
e.target !== backHistoryBtn && e.target !== forwardHistoryBtn) {
|
||||
historyPanel.style.display = 'none'
|
||||
}
|
||||
})
|
||||
|
||||
window.electronAPI.onNavigationUpdate(() => {
|
||||
updateButtons()
|
||||
updateURL()
|
||||
})
|
||||
|
||||
updateButtons()
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
#controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
button {
|
||||
margin-right: 10px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#urlInput {
|
||||
flex-grow: 1;
|
||||
margin: 0 10px;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#historyPanel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 10px;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
#historyPanel div {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#description {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
<title>Custom Titlebar App</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- mount your title bar at the top of you application's body tag -->
|
||||
<div class="titlebar">Cool titlebar</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
// remove the default titlebar
|
||||
titleBarStyle: 'hidden',
|
||||
// expose window controlls in Windows/Linux
|
||||
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
|
||||
})
|
||||
|
||||
win.loadFile('index.html')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.titlebar {
|
||||
height: 30px;
|
||||
background: blue;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
app-region: drag;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
<title>Custom Titlebar App</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- mount your title bar at the top of you application's body tag -->
|
||||
<div class="titlebar">Cool titlebar</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
// remove the default titlebar
|
||||
titleBarStyle: 'hidden',
|
||||
// expose window controlls in Windows/Linux
|
||||
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
|
||||
})
|
||||
|
||||
win.loadFile('index.html')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
height: 30px;
|
||||
background: blue;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
// remove the default titlebar
|
||||
titleBarStyle: 'hidden',
|
||||
// expose window controlls in Windows/Linux
|
||||
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
|
||||
})
|
||||
win.loadURL('https://example.com')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
// remove the default titlebar
|
||||
titleBarStyle: 'hidden'
|
||||
})
|
||||
win.loadURL('https://example.com')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({})
|
||||
win.loadURL('https://example.com')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
width: 300,
|
||||
height: 200,
|
||||
frame: false
|
||||
})
|
||||
win.loadURL('https://example.com')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
<title>Transparent Hello World</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="white-circle">
|
||||
<div>Hello World!</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
width: 100,
|
||||
height: 100,
|
||||
resizable: false,
|
||||
frame: false,
|
||||
transparent: true
|
||||
})
|
||||
win.loadFile('index.html')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, 0); /* Transparent background */
|
||||
}
|
||||
.white-circle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
app-region: drag;
|
||||
user-select: none;
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 412 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 215 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 98 KiB |
|
|
@ -0,0 +1,189 @@
|
|||
---
|
||||
title: "Custom Title Bar"
|
||||
description: "Application windows have a default chrome applied by the OS. Not to be confused with the Google Chrome browser, window _chrome_ refers to the parts of the window (e.g. title bar, toolbars, controls) that are not a part of the main web content. While the default title bar provided by the OS chrome is sufficent for simple use cases, many applications opt to remove it. Implementing a custom title bar can help your application feel more modern and consistent across platforms."
|
||||
slug: custom-title-bar
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# Custom Title Bar
|
||||
|
||||
## Basic tutorial
|
||||
|
||||
Application windows have a default [chrome][] applied by the OS. Not to be confused
|
||||
with the Google Chrome browser, window _chrome_ refers to the parts of the window (e.g.
|
||||
title bar, toolbars, controls) that are not a part of the main web content. While the
|
||||
default title bar provided by the OS chrome is sufficent for simple use cases, many
|
||||
applications opt to remove it. Implementing a custom title bar can help your application
|
||||
feel more modern and consistent across platforms.
|
||||
|
||||
You can follow along with this tutorial by opening Fiddle with the following starter code.
|
||||
|
||||
```fiddle docs/latest/fiddles/features/window-customization/custom-title-bar/starter-code
|
||||
|
||||
```
|
||||
|
||||
### Remove the default title bar
|
||||
|
||||
Let’s start by configuring a window with native window controls and a hidden title bar.
|
||||
To remove the default title bar, set the [`BaseWindowContructorOptions`][] `titleBarStyle`
|
||||
param in the `BrowserWindow` constructor to `'hidden'`.
|
||||
|
||||
```fiddle docs/latest/fiddles/features/window-customization/custom-title-bar/remove-title-bar
|
||||
|
||||
```
|
||||
|
||||
### Add native window controls _Windows_ _Linux_
|
||||
|
||||
On macOS, setting `titleBarStyle: 'hidden'` removes the title bar while keeping the window’s
|
||||
traffic light controls available in the upper left hand corner. However on Windows and Linux,
|
||||
you’ll need to add window controls back into your `BrowserWindow` by setting the
|
||||
[`BaseWindowContructorOptions`][] `titleBarOverlay` param in the `BrowserWindow` constructor.
|
||||
|
||||
```fiddle docs/latest/fiddles/features/window-customization/custom-title-bar/native-window-controls
|
||||
|
||||
```
|
||||
|
||||
Setting `titleBarOverlay: true` is the simplest way to expose window controls back into
|
||||
your `BrowserWindow`. If you’re interested in customizing the window controls further,
|
||||
check out the sections [Custom traffic lights][] and [Custom window controls][] that cover
|
||||
this in more detail.
|
||||
|
||||
### Create a custom title bar
|
||||
|
||||
Now, let’s implement a simple custom title bar in the `webContents` of our `BrowserWindow`.
|
||||
There’s nothing fancy here, just HTML and CSS!
|
||||
|
||||
```fiddle docs/latest/fiddles/features/window-customization/custom-title-bar/custom-title-bar
|
||||
|
||||
```
|
||||
|
||||
Currently our application window can’t be moved. Since we’ve removed the default title bar,
|
||||
the application needs to tell Electron which regions are draggable. We’ll do this by adding
|
||||
the CSS style `app-region: drag` to the custom title bar. Now we can drag the custom title
|
||||
bar to reposition our app window!
|
||||
|
||||
```fiddle docs/latest/fiddles/features/window-customization/custom-title-bar/custom-drag-region
|
||||
|
||||
```
|
||||
|
||||
For more information around how to manage drag regions defined by your electron application,
|
||||
see the [Custom draggable regions][] section below.
|
||||
|
||||
Congratulations, you've just implemented a basic custom title bar!
|
||||
|
||||
## Advanced window customization
|
||||
|
||||
### Custom traffic lights _macOS_
|
||||
|
||||
#### Customize the look of your traffic lights _macOS_
|
||||
|
||||
The `customButtonsOnHover` title bar style will hide the traffic lights until you hover
|
||||
over them. This is useful if you want to create custom traffic lights in your HTML but still
|
||||
use the native UI to control the window.
|
||||
|
||||
```js
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })
|
||||
```
|
||||
|
||||
#### Customize the traffic light position _macOS_
|
||||
|
||||
To modify the position of the traffic light window controls, there are two configuration
|
||||
options available.
|
||||
|
||||
Applying `hiddenInset` title bar style will shift the vertical inset of the traffic lights
|
||||
by a fixed amount.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
|
||||
```
|
||||
|
||||
If you need more granular control over the positioning of the traffic lights, you can pass
|
||||
a set of coordinates to the `trafficLightPosition` option in the `BrowserWindow`
|
||||
constructor.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({
|
||||
titleBarStyle: 'hidden',
|
||||
trafficLightPosition: { x: 10, y: 10 }
|
||||
})
|
||||
```
|
||||
|
||||
#### Show and hide the traffic lights programmatically _macOS_
|
||||
|
||||
You can also show and hide the traffic lights programmatically from the main process.
|
||||
The `win.setWindowButtonVisibility` forces traffic lights to be show or hidden depending
|
||||
on the value of its boolean parameter.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow()
|
||||
// hides the traffic lights
|
||||
win.setWindowButtonVisibility(false)
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
Given the number of APIs available, there are many ways of achieving this. For instance,
|
||||
combining `frame: false` with `win.setWindowButtonVisibility(true)` will yield the same
|
||||
layout outcome as setting `titleBarStyle: 'hidden'`.
|
||||
|
||||
:::
|
||||
|
||||
#### Custom window controls
|
||||
|
||||
The [Window Controls Overlay API][] is a web standard that gives web apps the ability to
|
||||
customize their title bar region when installed on desktop. Electron exposes this API
|
||||
through the `titleBarOverlay` option in the `BrowserWindow` constructor. When `titleBarOverlay`
|
||||
is enabled, the window controls become exposed in their default position, and DOM elements
|
||||
cannot use the area underneath this region.
|
||||
|
||||
:::note
|
||||
|
||||
`titleBarOverlay` requires the `titleBarStyle` param in the `BrowserWindow` constructor
|
||||
to have a value other than `default`.
|
||||
|
||||
:::
|
||||
|
||||
The custom title bar tutorial covers a [basic example][Add native window controls] of exposing
|
||||
window controls by setting `titleBarOverlay: true`. The height, color (_Windows_ _Linux_), and
|
||||
symbol colors (_Windows_) of the window controls can be customized further by setting
|
||||
`titleBarOverlay` to an object.
|
||||
|
||||
The value passed to the `height` property must be an integer. The `color` and `symbolColor`
|
||||
properties accept `rgba()`, `hsla()`, and `#RRGGBBAA` color formats and support transparency.
|
||||
If a color option is not specified, the color will default to its system color for the window
|
||||
control buttons. Similarly, if the height option is not specified, the window controls will
|
||||
default to the standard system height:
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({
|
||||
titleBarStyle: 'hidden',
|
||||
titleBarOverlay: {
|
||||
color: '#2f3241',
|
||||
symbolColor: '#74b1be',
|
||||
height: 60
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
Once your title bar overlay is enabled from the main process, you can access the overlay's
|
||||
color and dimension values from a renderer using a set of readonly
|
||||
[JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars].
|
||||
|
||||
:::
|
||||
|
||||
[Add native window controls]: #add-native-window-controls-windows-linux
|
||||
[`BaseWindowContructorOptions`]: latest/api/structures/base-window-options.md
|
||||
[chrome]: https://developer.mozilla.org/en-US/docs/Glossary/Chrome
|
||||
[Custom draggable regions]: latest/tutorial/custom-window-interactions.md#custom-draggable-regions
|
||||
[Custom traffic lights]: #custom-traffic-lights-macos
|
||||
[Custom window controls]: #custom-window-controls
|
||||
[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables
|
||||
[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis
|
||||
[Window Controls Overlay API]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
---
|
||||
title: "Custom Window Interactions"
|
||||
description: "By default, windows are dragged using the title bar provided by the OS chrome. Apps that remove the default title bar need to use the app-region CSS property to define specific areas that can be used to drag the window. Setting app-region: drag marks a rectagular area as draggable."
|
||||
slug: custom-window-interactions
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# Custom Window Interactions
|
||||
|
||||
## Custom draggable regions
|
||||
|
||||
By default, windows are dragged using the title bar provided by the OS chrome. Apps
|
||||
that remove the default title bar need to use the `app-region` CSS property to define
|
||||
specific areas that can be used to drag the window. Setting `app-region: drag` marks
|
||||
a rectagular area as draggable.
|
||||
|
||||
It is important to note that draggable areas ignore all pointer events. For example,
|
||||
a button element that overlaps a draggable region will not emit mouse clicks or mouse
|
||||
enter/exit events within that overlapping area. Setting `app-region: no-drag` reenables
|
||||
pointer events by excluding a rectagular area from a draggable region.
|
||||
|
||||
To make the whole window draggable, you can add `app-region: drag` as
|
||||
`body`'s style:
|
||||
|
||||
```css title='styles.css'
|
||||
body {
|
||||
app-region: drag;
|
||||
}
|
||||
```
|
||||
|
||||
And note that if you have made the whole window draggable, you must also mark
|
||||
buttons as non-draggable, otherwise it would be impossible for users to click on
|
||||
them:
|
||||
|
||||
```css title='styles.css'
|
||||
button {
|
||||
app-region: no-drag;
|
||||
}
|
||||
```
|
||||
|
||||
If you're only setting a custom title bar as draggable, you also need to make all
|
||||
buttons in title bar non-draggable.
|
||||
|
||||
### Tip: disable text selection
|
||||
|
||||
When creating a draggable region, the dragging behavior may conflict with text selection.
|
||||
For example, when you drag the title bar, you may accidentally select its text contents.
|
||||
To prevent this, you need to disable text selection within a draggable area like this:
|
||||
|
||||
```css
|
||||
.titlebar {
|
||||
user-select: none;
|
||||
app-region: drag;
|
||||
}
|
||||
```
|
||||
|
||||
### Tip: disable context menus
|
||||
|
||||
On some platforms, the draggable area will be treated as a non-client frame, so
|
||||
when you right click on it, a system menu will pop up. To make the context menu
|
||||
behave correctly on all platforms, you should never use a custom context menu on
|
||||
draggable areas.
|
||||
|
||||
## Click-through windows
|
||||
|
||||
To create a click-through window, i.e. making the window ignore all mouse
|
||||
events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events]
|
||||
API:
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow()
|
||||
win.setIgnoreMouseEvents(true)
|
||||
```
|
||||
|
||||
### Forward mouse events _macOS_ _Windows_
|
||||
|
||||
Ignoring mouse messages makes the web contents oblivious to mouse movement,
|
||||
meaning that mouse movement events will not be emitted. On Windows and macOS, an
|
||||
optional parameter can be used to forward mouse move messages to the web page,
|
||||
allowing events such as `mouseleave` to be emitted:
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow, ipcMain } = require('electron')
|
||||
const path = require('node:path')
|
||||
|
||||
const win = new BrowserWindow({
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js')
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
win.setIgnoreMouseEvents(ignore, options)
|
||||
})
|
||||
```
|
||||
|
||||
```js title='preload.js'
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const el = document.getElementById('clickThroughElement')
|
||||
el.addEventListener('mouseenter', () => {
|
||||
ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
|
||||
})
|
||||
el.addEventListener('mouseleave', () => {
|
||||
ipcRenderer.send('set-ignore-mouse-events', false)
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
This makes the web page click-through when over the `#clickThroughElement` element,
|
||||
and returns to normal outside it.
|
||||
|
||||
[ignore-mouse-events]: latest/api/browser-window.md#winsetignoremouseeventsignore-options
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
---
|
||||
title: "Custom Window Styles"
|
||||
description: "!Frameless Window"
|
||||
slug: custom-window-styles
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# Custom Window Styles
|
||||
|
||||
## Frameless windows
|
||||
|
||||
|
||||
|
||||
A frameless window removes all [chrome][] applied by the OS, including window controls.
|
||||
|
||||
To create a frameless window, set the [`BaseWindowContructorOptions`][] `frame` param in the `BrowserWindow` constructor to `false`.
|
||||
|
||||
```fiddle docs/latest/fiddles/features/window-customization/custom-window-styles/frameless-windows
|
||||
|
||||
```
|
||||
|
||||
## Transparent windows
|
||||
|
||||
|
||||
|
||||
|
||||
To create a fully transparent window, set the [`BaseWindowContructorOptions`][] `transparent` param in the `BrowserWindow` constructor to `true`.
|
||||
|
||||
The following fiddle takes advantage of a tranparent window and CSS styling to create
|
||||
the illusion of a circular window.
|
||||
|
||||
```fiddle docs/latest/fiddles/features/window-customization/custom-window-styles/transparent-windows
|
||||
|
||||
```
|
||||
|
||||
### Limitations
|
||||
|
||||
* You cannot click through the transparent area. See
|
||||
[#1335](https://github.com/electron/electron/issues/1335) for details.
|
||||
* Transparent windows are not resizable. Setting `resizable` to `true` may make
|
||||
a transparent window stop working on some platforms.
|
||||
* The CSS [`blur()`][] filter only applies to the window's web contents, so there is
|
||||
no way to apply blur effect to the content below the window (i.e. other applications
|
||||
open on the user's system).
|
||||
* The window will not be transparent when DevTools is opened.
|
||||
* On _Windows_:
|
||||
* Transparent windows will not work when DWM is disabled.
|
||||
* Transparent windows can not be maximized using the Windows system menu or by double
|
||||
clicking the title bar. The reasoning behind this can be seen on
|
||||
PR [#28207](https://github.com/electron/electron/pull/28207).
|
||||
* On _macOS_:
|
||||
* The native window shadow will not be shown on a transparent window.
|
||||
|
||||
[`BaseWindowContructorOptions`]: latest/api/structures/base-window-options.md
|
||||
[`blur()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur()
|
||||
[chrome]: https://developer.mozilla.org/en-US/docs/Glossary/Chrome
|
||||
|
|
@ -16,10 +16,11 @@ check out our [Electron Versioning](latest/tutorial/electron-versioning.md) doc.
|
|||
|
||||
| Electron | Alpha | Beta | Stable | EOL | Chrome | Node | Supported |
|
||||
| ------- | ----- | ------- | ------ | ------ | ---- | ---- | ---- |
|
||||
| 33.0.0 | 2024-Aug-22 | 2024-Sep-18 | 2024-Oct-15 | 2025-Apr-29 | M130 | TBD | ✅ |
|
||||
| 34.0.0 | 2024-Oct-17 | 2024-Nov-13 | 2024-Jan-07 | 2025-Jun-24 | M132 | TBD | ✅ |
|
||||
| 33.0.0 | 2024-Aug-22 | 2024-Sep-18 | 2024-Oct-15 | 2025-Apr-29 | M130 | v20.18 | ✅ |
|
||||
| 32.0.0 | 2024-Jun-14 | 2024-Jul-24 | 2024-Aug-20 | 2025-Mar-04 | M128 | v20.16 | ✅ |
|
||||
| 31.0.0 | 2024-Apr-18 | 2024-May-15 | 2024-Jun-11 | 2025-Jan-07 | M126 | v20.14 | ✅ |
|
||||
| 30.0.0 | 2024-Feb-22 | 2024-Mar-20 | 2024-Apr-16 | 2024-Oct-15 | M124 | v20.11 | ✅ |
|
||||
| 30.0.0 | 2024-Feb-22 | 2024-Mar-20 | 2024-Apr-16 | 2024-Oct-15 | M124 | v20.11 | 🚫 |
|
||||
| 29.0.0 | 2023-Dec-07 | 2024-Jan-24 | 2024-Feb-20 | 2024-Aug-20 | M122 | v20.9 | 🚫 |
|
||||
| 28.0.0 | 2023-Oct-11 | 2023-Nov-06 | 2023-Dec-05 | 2024-Jun-11 | M120 | v18.18 | 🚫 |
|
||||
| 27.0.0 | 2023-Aug-17 | 2023-Sep-13 | 2023-Oct-10 | 2024-Apr-16 | M118 | v18.17 | 🚫 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
title: "Navigation History"
|
||||
description: "The NavigationHistory API allows you to manage and interact with the browsing history of your Electron application."
|
||||
slug: navigation-history
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# Navigation History
|
||||
|
||||
## Overview
|
||||
|
||||
The [NavigationHistory](latest/tutorial/navigation-history.md) class allows you to manage and interact with the browsing history of your Electron application. This powerful feature enables you to create intuitive navigation experiences for your users.
|
||||
|
||||
## Accessing NavigationHistory
|
||||
|
||||
Navigation history is stored per [`WebContents`](latest/api/web-contents.md) instance. To access a specific instance of the NavigationHistory class, use the WebContents class's [`contents.navigationHistory` instance property](https://www.electronjs.org/docs/latest/api/web-contents#contentsnavigationhistory-readonly).
|
||||
|
||||
```js
|
||||
const { BrowserWindow } = require('electron')
|
||||
|
||||
const mainWindow = new BrowserWindow()
|
||||
const { navigationHistory } = mainWindow.webContents
|
||||
```
|
||||
|
||||
## Navigating through history
|
||||
|
||||
Easily implement back and forward navigation:
|
||||
|
||||
```js @ts-type={navigationHistory:Electron.NavigationHistory}
|
||||
// Go back
|
||||
if (navigationHistory.canGoBack()) {
|
||||
navigationHistory.goBack()
|
||||
}
|
||||
|
||||
// Go forward
|
||||
if (navigationHistory.canGoForward()) {
|
||||
navigationHistory.goForward()
|
||||
}
|
||||
```
|
||||
|
||||
## Accessing history entries
|
||||
|
||||
Retrieve and display the user's browsing history:
|
||||
|
||||
```js @ts-type={navigationHistory:Electron.NavigationHistory}
|
||||
const entries = navigationHistory.getAllEntries()
|
||||
|
||||
entries.forEach((entry) => {
|
||||
console.log(`${entry.title}: ${entry.url}`)
|
||||
})
|
||||
```
|
||||
|
||||
Each navigation entry corresponds to a specific page. The indexing system follows a sequential order:
|
||||
|
||||
- Index 0: Represents the earliest visited page.
|
||||
- Index N: Represents the most recent page visited.
|
||||
|
||||
## Navigating to specific entries
|
||||
|
||||
Allow users to jump to any point in their browsing history:
|
||||
|
||||
```js @ts-type={navigationHistory:Electron.NavigationHistory}
|
||||
// Navigate to the 5th entry in the history, if the index is valid
|
||||
navigationHistory.goToIndex(4)
|
||||
|
||||
// Navigate to the 2nd entry forward from the current position
|
||||
if (navigationHistory.canGoToOffset(2)) {
|
||||
navigationHistory.goToOffset(2)
|
||||
}
|
||||
```
|
||||
|
||||
Here's a full example that you can open with Electron Fiddle:
|
||||
|
||||
```fiddle docs/latest/fiddles/features/navigation-history
|
||||
|
||||
```
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Offscreen Rendering"
|
||||
description: "Offscreen rendering lets you obtain the content of a BrowserWindow in a bitmap, so it can be rendered anywhere, for example, on texture in a 3D scene. The offscreen rendering in Electron uses a similar approach to that of the Chromium Embedded Framework project."
|
||||
description: "Offscreen rendering lets you obtain the content of a BrowserWindow in a bitmap or a shared GPU texture, so it can be rendered anywhere, for example, on texture in a 3D scene. The offscreen rendering in Electron uses a similar approach to that of the Chromium Embedded Framework project."
|
||||
slug: offscreen-rendering
|
||||
hide_title: false
|
||||
---
|
||||
|
|
@ -10,7 +10,8 @@ hide_title: false
|
|||
## Overview
|
||||
|
||||
Offscreen rendering lets you obtain the content of a `BrowserWindow` in a
|
||||
bitmap, so it can be rendered anywhere, for example, on texture in a 3D scene.
|
||||
bitmap or a shared GPU texture, so it can be rendered anywhere, for example,
|
||||
on texture in a 3D scene.
|
||||
The offscreen rendering in Electron uses a similar approach to that of the
|
||||
[Chromium Embedded Framework](https://bitbucket.org/chromiumembedded/cef)
|
||||
project.
|
||||
|
|
@ -24,22 +25,39 @@ the dirty area is passed to the `paint` event to be more efficient.
|
|||
losses with no benefits.
|
||||
* When nothing is happening on a webpage, no frames are generated.
|
||||
* An offscreen window is always created as a
|
||||
[Frameless Window](latest/tutorial/window-customization.md)..
|
||||
[Frameless Window](latest/tutorial/window-customization.md).
|
||||
|
||||
### Rendering Modes
|
||||
|
||||
#### GPU accelerated
|
||||
|
||||
GPU accelerated rendering means that the GPU is used for composition. Because of
|
||||
that, the frame has to be copied from the GPU which requires more resources,
|
||||
thus this mode is slower than the Software output device. The benefit of this
|
||||
mode is that WebGL and 3D CSS animations are supported.
|
||||
GPU accelerated rendering means that the GPU is used for composition. The benefit
|
||||
of this mode is that WebGL and 3D CSS animations are supported. There are two
|
||||
different approaches depending on the `webPreferences.offscreen.useSharedTexture`
|
||||
setting.
|
||||
|
||||
1. Use GPU shared texture
|
||||
|
||||
Used when `webPreferences.offscreen.useSharedTexture` is set to `true`.
|
||||
|
||||
This is an advanced feature requiring a native node module to work with your own code.
|
||||
The frames are directly copied in GPU textures, thus this mode is very fast because
|
||||
there's no CPU-GPU memory copies overhead, and you can directly import the shared
|
||||
texture to your own rendering program.
|
||||
|
||||
2. Use CPU shared memory bitmap
|
||||
|
||||
Used when `webPreferences.offscreen.useSharedTexture` is set to `false` (default behavior).
|
||||
|
||||
The texture is accessible using the `NativeImage` API at the cost of performance.
|
||||
The frame has to be copied from the GPU to the CPU bitmap which requires more system
|
||||
resources, thus this mode is slower than the Software output device mode. But it supports
|
||||
GPU related functionalities.
|
||||
|
||||
#### Software output device
|
||||
|
||||
This mode uses a software output device for rendering in the CPU, so the frame
|
||||
generation is much faster. As a result, this mode is preferred over the GPU
|
||||
accelerated one.
|
||||
generation is faster than shared memory bitmap GPU accelerated mode.
|
||||
|
||||
To enable this mode, GPU acceleration has to be disabled by calling the
|
||||
[`app.disableHardwareAcceleration()`][disablehardwareacceleration] API.
|
||||
|
|
|
|||
|
|
@ -1,276 +1,26 @@
|
|||
---
|
||||
title: "Window Customization"
|
||||
description: "The BrowserWindow module is the foundation of your Electron application, and it exposes many APIs that can change the look and behavior of your browser windows. In this tutorial, we will be going over the various use-cases for window customization on macOS, Windows, and Linux."
|
||||
description: "The BrowserWindow module is the foundation of your Electron application, and it exposes many APIs that let you customize the look and behavior of your app’s windows. This section covers how to implement various use cases for window customization on macOS, Windows, and Linux."
|
||||
slug: window-customization
|
||||
hide_title: false
|
||||
---
|
||||
|
||||
# Window Customization
|
||||
|
||||
The `BrowserWindow` module is the foundation of your Electron application, and it exposes
|
||||
many APIs that can change the look and behavior of your browser windows. In this
|
||||
tutorial, we will be going over the various use-cases for window customization on
|
||||
macOS, Windows, and Linux.
|
||||
The [`BrowserWindow`][] module is the foundation of your Electron application, and
|
||||
it exposes many APIs that let you customize the look and behavior of your app’s windows.
|
||||
This section covers how to implement various use cases for window customization on macOS,
|
||||
Windows, and Linux.
|
||||
|
||||
## Create frameless windows
|
||||
:::info
|
||||
|
||||
A frameless window is a window that has no [chrome][]. Not to be confused with the Google
|
||||
Chrome browser, window _chrome_ refers to the parts of the window (e.g. toolbars, controls)
|
||||
that are not a part of the web page.
|
||||
`BrowserWindow` is a subclass of the [`BaseWindow`][] module. Both modules allow
|
||||
you to create and manage application windows in Electron, with the main difference
|
||||
being that `BrowserWindow` supports a single, full size web view while `BaseWindow`
|
||||
supports composing many web views. `BaseWindow` can be used interchangeably with `BrowserWindow`
|
||||
in the examples of the documents in this section.
|
||||
|
||||
To create a frameless window, you need to set `frame` to `false` in the `BrowserWindow`
|
||||
constructor.
|
||||
:::
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({ frame: false })
|
||||
```
|
||||
|
||||
## Apply custom title bar styles _macOS_ _Windows_
|
||||
|
||||
Title bar styles allow you to hide most of a BrowserWindow's chrome while keeping the
|
||||
system's native window controls intact and can be configured with the `titleBarStyle`
|
||||
option in the `BrowserWindow` constructor.
|
||||
|
||||
Applying the `hidden` title bar style results in a hidden title bar and a full-size
|
||||
content window.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({ titleBarStyle: 'hidden' })
|
||||
```
|
||||
|
||||
### Control the traffic lights _macOS_
|
||||
|
||||
On macOS, applying the `hidden` title bar style will still expose the standard window
|
||||
controls (“traffic lights”) in the top left.
|
||||
|
||||
#### Customize the look of your traffic lights _macOS_
|
||||
|
||||
The `customButtonsOnHover` title bar style will hide the traffic lights until you hover
|
||||
over them. This is useful if you want to create custom traffic lights in your HTML but still
|
||||
use the native UI to control the window.
|
||||
|
||||
```js
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })
|
||||
```
|
||||
|
||||
#### Customize the traffic light position _macOS_
|
||||
|
||||
To modify the position of the traffic light window controls, there are two configuration
|
||||
options available.
|
||||
|
||||
Applying `hiddenInset` title bar style will shift the vertical inset of the traffic lights
|
||||
by a fixed amount.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
|
||||
```
|
||||
|
||||
If you need more granular control over the positioning of the traffic lights, you can pass
|
||||
a set of coordinates to the `trafficLightPosition` option in the `BrowserWindow`
|
||||
constructor.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({
|
||||
titleBarStyle: 'hidden',
|
||||
trafficLightPosition: { x: 10, y: 10 }
|
||||
})
|
||||
```
|
||||
|
||||
#### Show and hide the traffic lights programmatically _macOS_
|
||||
|
||||
You can also show and hide the traffic lights programmatically from the main process.
|
||||
The `win.setWindowButtonVisibility` forces traffic lights to be show or hidden depending
|
||||
on the value of its boolean parameter.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow()
|
||||
// hides the traffic lights
|
||||
win.setWindowButtonVisibility(false)
|
||||
```
|
||||
|
||||
> Note: Given the number of APIs available, there are many ways of achieving this. For instance,
|
||||
> combining `frame: false` with `win.setWindowButtonVisibility(true)` will yield the same
|
||||
> layout outcome as setting `titleBarStyle: 'hidden'`.
|
||||
|
||||
## Window Controls Overlay
|
||||
|
||||
The [Window Controls Overlay API][] is a web standard that gives web apps the ability to
|
||||
customize their title bar region when installed on desktop. Electron exposes this API
|
||||
through the `BrowserWindow` constructor option `titleBarOverlay`.
|
||||
|
||||
This option only works whenever a custom `titlebarStyle` is applied.
|
||||
When `titleBarOverlay` is enabled, the window controls become exposed in their default
|
||||
position, and DOM elements cannot use the area underneath this region.
|
||||
|
||||
The `titleBarOverlay` option accepts two different value formats.
|
||||
|
||||
Specifying `true` on either platform will result in an overlay region with default
|
||||
system colors:
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({
|
||||
titleBarStyle: 'hidden',
|
||||
titleBarOverlay: true
|
||||
})
|
||||
```
|
||||
|
||||
On either platform `titleBarOverlay` can also be an object. The height of the overlay can be specified with the `height` property. On Windows and Linux, the color of the overlay and can be specified using the `color` property. On Windows and Linux, the color of the overlay and its symbols can be specified using the `color` and `symbolColor` properties respectively. The `rgba()`, `hsla()`, and `#RRGGBBAA` color formats are supported to apply transparency.
|
||||
|
||||
If a color option is not specified, the color will default to its system color for the window control buttons. Similarly, if the height option is not specified it will default to the default height:
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({
|
||||
titleBarStyle: 'hidden',
|
||||
titleBarOverlay: {
|
||||
color: '#2f3241',
|
||||
symbolColor: '#74b1be',
|
||||
height: 60
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
> Note: Once your title bar overlay is enabled from the main process, you can access the overlay's
|
||||
> color and dimension values from a renderer using a set of readonly
|
||||
> [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars].
|
||||
|
||||
## Create transparent windows
|
||||
|
||||
By setting the `transparent` option to `true`, you can make a fully transparent window.
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow({ transparent: true })
|
||||
```
|
||||
|
||||
### Limitations
|
||||
|
||||
* You cannot click through the transparent area. See
|
||||
[#1335](https://github.com/electron/electron/issues/1335) for details.
|
||||
* Transparent windows are not resizable. Setting `resizable` to `true` may make
|
||||
a transparent window stop working on some platforms.
|
||||
* The CSS [`blur()`][] filter only applies to the window's web contents, so there is no way to apply
|
||||
blur effect to the content below the window (i.e. other applications open on
|
||||
the user's system).
|
||||
* The window will not be transparent when DevTools is opened.
|
||||
* On _Windows_:
|
||||
* Transparent windows will not work when DWM is disabled.
|
||||
* Transparent windows can not be maximized using the Windows system menu or by double
|
||||
clicking the title bar. The reasoning behind this can be seen on
|
||||
PR [#28207](https://github.com/electron/electron/pull/28207).
|
||||
* On _macOS_:
|
||||
* The native window shadow will not be shown on a transparent window.
|
||||
|
||||
## Create click-through windows
|
||||
|
||||
To create a click-through window, i.e. making the window ignore all mouse
|
||||
events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events]
|
||||
API:
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow()
|
||||
win.setIgnoreMouseEvents(true)
|
||||
```
|
||||
|
||||
### Forward mouse events _macOS_ _Windows_
|
||||
|
||||
Ignoring mouse messages makes the web contents oblivious to mouse movement,
|
||||
meaning that mouse movement events will not be emitted. On Windows and macOS, an
|
||||
optional parameter can be used to forward mouse move messages to the web page,
|
||||
allowing events such as `mouseleave` to be emitted:
|
||||
|
||||
```js title='main.js'
|
||||
const { BrowserWindow, ipcMain } = require('electron')
|
||||
const path = require('node:path')
|
||||
|
||||
const win = new BrowserWindow({
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js')
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
win.setIgnoreMouseEvents(ignore, options)
|
||||
})
|
||||
```
|
||||
|
||||
```js title='preload.js'
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const el = document.getElementById('clickThroughElement')
|
||||
el.addEventListener('mouseenter', () => {
|
||||
ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
|
||||
})
|
||||
el.addEventListener('mouseleave', () => {
|
||||
ipcRenderer.send('set-ignore-mouse-events', false)
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
This makes the web page click-through when over the `#clickThroughElement` element,
|
||||
and returns to normal outside it.
|
||||
|
||||
## Set custom draggable region
|
||||
|
||||
By default, the frameless window is non-draggable. Apps need to specify
|
||||
`-webkit-app-region: drag` in CSS to tell Electron which regions are draggable
|
||||
(like the OS's standard titlebar), and apps can also use
|
||||
`-webkit-app-region: no-drag` to exclude the non-draggable area from the
|
||||
draggable region. Note that only rectangular shapes are currently supported.
|
||||
|
||||
To make the whole window draggable, you can add `-webkit-app-region: drag` as
|
||||
`body`'s style:
|
||||
|
||||
```css title='styles.css'
|
||||
body {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
```
|
||||
|
||||
And note that if you have made the whole window draggable, you must also mark
|
||||
buttons as non-draggable, otherwise it would be impossible for users to click on
|
||||
them:
|
||||
|
||||
```css title='styles.css'
|
||||
button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
```
|
||||
|
||||
If you're only setting a custom titlebar as draggable, you also need to make all
|
||||
buttons in titlebar non-draggable.
|
||||
|
||||
### Tip: disable text selection
|
||||
|
||||
When creating a draggable region, the dragging behavior may conflict with text selection.
|
||||
For example, when you drag the titlebar, you may accidentally select its text contents.
|
||||
To prevent this, you need to disable text selection within a draggable area like this:
|
||||
|
||||
```css
|
||||
.titlebar {
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
```
|
||||
|
||||
### Tip: disable context menus
|
||||
|
||||
On some platforms, the draggable area will be treated as a non-client frame, so
|
||||
when you right click on it, a system menu will pop up. To make the context menu
|
||||
behave correctly on all platforms, you should never use a custom context menu on
|
||||
draggable areas.
|
||||
|
||||
[`blur()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur()
|
||||
[chrome]: https://developer.mozilla.org/en-US/docs/Glossary/Chrome
|
||||
[ignore-mouse-events]: latest/api/browser-window.md#winsetignoremouseeventsignore-options
|
||||
[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables
|
||||
[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis
|
||||
[Window Controls Overlay API]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md
|
||||
[`BaseWindow`]: latest/api/base-window.md
|
||||
[`BrowserWindow`]: latest/api/browser-window.md
|
||||
|
|
|
|||
15
sidebars.js
15
sidebars.js
|
|
@ -63,6 +63,7 @@ module.exports = {
|
|||
},
|
||||
'latest/tutorial/multithreading',
|
||||
'latest/tutorial/native-file-drag-drop',
|
||||
'latest/tutorial/navigation-history',
|
||||
'latest/tutorial/notifications',
|
||||
'latest/tutorial/offscreen-rendering',
|
||||
'latest/tutorial/online-offline-events',
|
||||
|
|
@ -85,7 +86,16 @@ module.exports = {
|
|||
id: 'latest/tutorial/windows-taskbar',
|
||||
customProps: { tags: ['windows'] },
|
||||
},
|
||||
'latest/tutorial/window-customization',
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Window Customization',
|
||||
link: { type: 'doc', id: 'latest/tutorial/window-customization' },
|
||||
items: [
|
||||
'latest/tutorial/custom-title-bar',
|
||||
'latest/tutorial/custom-window-interactions',
|
||||
'latest/tutorial/custom-window-styles',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -164,7 +174,6 @@ module.exports = {
|
|||
'latest/development/build-instructions-linux',
|
||||
'latest/development/build-instructions-macos',
|
||||
'latest/development/build-instructions-windows',
|
||||
'latest/development/goma',
|
||||
'latest/development/reclient',
|
||||
],
|
||||
},
|
||||
|
|
@ -348,8 +357,10 @@ module.exports = {
|
|||
'latest/api/structures/mime-typed-buffer',
|
||||
'latest/api/structures/mouse-input-event',
|
||||
'latest/api/structures/mouse-wheel-input-event',
|
||||
'latest/api/structures/navigation-entry',
|
||||
'latest/api/structures/notification-action',
|
||||
'latest/api/structures/notification-response',
|
||||
'latest/api/structures/offscreen-shared-texture',
|
||||
'latest/api/structures/open-external-permission-request',
|
||||
'latest/api/structures/payment-discount',
|
||||
'latest/api/structures/permission-request',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче