📝 Thai: add English placeholders for files to be translated

This commit is contained in:
ThePooE 2017-01-19 14:37:00 +07:00 committed by Kevin Sawicki
parent a78cd79a58
commit 9ce93e6cac
106 changed files with 14474 additions and 1 deletions

View file

@ -4,7 +4,7 @@
รวบรวมคำถามที่ถูกถามบ่อย กรุณาอ่านก่อนเปิด issue:
* [คำถามที่ถูกถามบ่อยเกี่ยวกับ Electron](faq/electron-faq.md)
* [คำถามที่ถูกถามบ่อยเกี่ยวกับ Electron](faq.md)
## คู่มือ

View file

@ -0,0 +1,71 @@
# Accelerator
> Define keyboard shortcuts.
Accelerators are Strings that can contain multiple modifiers and key codes,
combined by the `+` character, and are used to define keyboard shortcuts
throughout your application.
Examples:
* `CommandOrControl+A`
* `CommandOrControl+Shift+Z`
Shortcuts are registered with the [`globalShortcut`](global-shortcut.md) module
using the [`register`](global-shortcut.md#globalshortcutregisteraccelerator-callback)
method, i.e.
```javascript
const {app, globalShortcut} = require('electron')
app.on('ready', () => {
// Register a 'CommandOrControl+Y' shortcut listener.
globalShortcut.register('CommandOrControl+Y', () => {
// Do stuff when Y and either Command/Control is pressed.
})
})
```
## Platform notice
On Linux and Windows, the `Command` key does not have any effect so
use `CommandOrControl` which represents `Command` on macOS and `Control` on
Linux and Windows to define some accelerators.
Use `Alt` instead of `Option`. The `Option` key only exists on macOS, whereas
the `Alt` key is available on all platforms.
The `Super` key is mapped to the `Windows` key on Windows and Linux and
`Cmd` on macOS.
## Available modifiers
* `Command` (or `Cmd` for short)
* `Control` (or `Ctrl` for short)
* `CommandOrControl` (or `CmdOrCtrl` for short)
* `Alt`
* `Option`
* `AltGr`
* `Shift`
* `Super`
## Available key codes
* `0` to `9`
* `A` to `Z`
* `F1` to `F24`
* Punctuations like `~`, `!`, `@`, `#`, `$`, etc.
* `Plus`
* `Space`
* `Tab`
* `Backspace`
* `Delete`
* `Insert`
* `Return` (or `Enter` as alias)
* `Up`, `Down`, `Left` and `Right`
* `Home` and `End`
* `PageUp` and `PageDown`
* `Escape` (or `Esc` for short)
* `VolumeUp`, `VolumeDown` and `VolumeMute`
* `MediaNextTrack`, `MediaPreviousTrack`, `MediaStop` and `MediaPlayPause`
* `PrintScreen`

View file

@ -0,0 +1,908 @@
# app
> Control your application's event lifecycle.
Process: [Main](../glossary.md#main-process)
The following example shows how to quit the application when the last window is
closed:
```javascript
const {app} = require('electron')
app.on('window-all-closed', () => {
app.quit()
})
```
## Events
The `app` object emits the following events:
### Event: 'will-finish-launching'
Emitted when the application has finished basic startup. On Windows and Linux,
the `will-finish-launching` event is the same as the `ready` event; on macOS,
this event represents the `applicationWillFinishLaunching` notification of
`NSApplication`. You would usually set up listeners for the `open-file` and
`open-url` events here, and start the crash reporter and auto updater.
In most cases, you should just do everything in the `ready` event handler.
### Event: 'ready'
Returns:
* `launchInfo` Object _macOS_
Emitted when Electron has finished initializing. On macOS, `launchInfo` holds
the `userInfo` of the `NSUserNotification` that was used to open the application,
if it was launched from Notification Center. You can call `app.isReady()` to
check if this event has already fired.
### Event: 'window-all-closed'
Emitted when all windows have been closed.
If you do not subscribe to this event and all windows are closed, the default
behavior is to quit the app; however, if you subscribe, you control whether the
app quits or not. If the user pressed `Cmd + Q`, or the developer called
`app.quit()`, Electron will first try to close all the windows and then emit the
`will-quit` event, and in this case the `window-all-closed` event would not be
emitted.
### Event: 'before-quit'
Returns:
* `event` Event
Emitted before the application starts closing its windows.
Calling `event.preventDefault()` will prevent the default behaviour, which is
terminating the application.
**Note:** If application quit was initiated by `autoUpdater.quitAndInstall()`
then `before-quit` is emitted *after* emitting `close` event on all windows and
closing them.
### Event: 'will-quit'
Returns:
* `event` Event
Emitted when all windows have been closed and the application will quit.
Calling `event.preventDefault()` will prevent the default behaviour, which is
terminating the application.
See the description of the `window-all-closed` event for the differences between
the `will-quit` and `window-all-closed` events.
### Event: 'quit'
Returns:
* `event` Event
* `exitCode` Integer
Emitted when the application is quitting.
### Event: 'open-file' _macOS_
Returns:
* `event` Event
* `path` String
Emitted when the user wants to open a file with the application. The `open-file`
event is usually emitted when the application is already open and the OS wants
to reuse the application to open the file. `open-file` is also emitted when a
file is dropped onto the dock and the application is not yet running. Make sure
to listen for the `open-file` event very early in your application startup to
handle this case (even before the `ready` event is emitted).
You should call `event.preventDefault()` if you want to handle this event.
On Windows, you have to parse `process.argv` (in the main process) to get the
filepath.
### Event: 'open-url' _macOS_
Returns:
* `event` Event
* `url` String
Emitted when the user wants to open a URL with the application. Your application's
`Info.plist` file must define the url scheme within the `CFBundleURLTypes` key, and
set `NSPrincipalClass` to `AtomApplication`.
You should call `event.preventDefault()` if you want to handle this event.
### Event: 'activate' _macOS_
Returns:
* `event` Event
* `hasVisibleWindows` Boolean
Emitted when the application is activated, which usually happens when the user
clicks on the application's dock icon.
### Event: 'continue-activity' _macOS_
Returns:
* `event` Event
* `type` String - A string identifying the activity. Maps to
[`NSUserActivity.activityType`][activity-type].
* `userInfo` Object - Contains app-specific state stored by the activity on
another device.
Emitted during [Handoff][handoff] when an activity from a different device wants
to be resumed. You should call `event.preventDefault()` if you want to handle
this event.
A user activity can be continued only in an app that has the same developer Team
ID as the activity's source app and that supports the activity's type.
Supported activity types are specified in the app's `Info.plist` under the
`NSUserActivityTypes` key.
### Event: 'browser-window-blur'
Returns:
* `event` Event
* `window` BrowserWindow
Emitted when a [browserWindow](browser-window.md) gets blurred.
### Event: 'browser-window-focus'
Returns:
* `event` Event
* `window` BrowserWindow
Emitted when a [browserWindow](browser-window.md) gets focused.
### Event: 'browser-window-created'
Returns:
* `event` Event
* `window` BrowserWindow
Emitted when a new [browserWindow](browser-window.md) is created.
### Event: 'web-contents-created'
Returns:
* `event` Event
* `webContents` WebContents
Emitted when a new [webContents](web-contents.md) is created.
### Event: 'certificate-error'
Returns:
* `event` Event
* `webContents` [WebContents](web-contents.md)
* `url` String
* `error` String - The error code
* `certificate` [Certificate](structures/certificate.md)
* `callback` Function
* `isTrusted` Boolean - Whether to consider the certificate as trusted
Emitted when failed to verify the `certificate` for `url`, to trust the
certificate you should prevent the default behavior with
`event.preventDefault()` and call `callback(true)`.
```javascript
const {app} = require('electron')
app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
if (url === 'https://github.com') {
// Verification logic.
event.preventDefault()
callback(true)
} else {
callback(false)
}
})
```
### Event: 'select-client-certificate'
Returns:
* `event` Event
* `webContents` [WebContents](web-contents.md)
* `url` URL
* `certificateList` [Certificate[]](structures/certificate.md)
* `callback` Function
* `certificate` [Certificate](structures/certificate.md) (optional)
Emitted when a client certificate is requested.
The `url` corresponds to the navigation entry requesting the client certificate
and `callback` can be called with an entry filtered from the list. Using
`event.preventDefault()` prevents the application from using the first
certificate from the store.
```javascript
const {app} = require('electron')
app.on('select-client-certificate', (event, webContents, url, list, callback) => {
event.preventDefault()
callback(list[0])
})
```
### Event: 'login'
Returns:
* `event` Event
* `webContents` [WebContents](web-contents.md)
* `request` Object
* `method` String
* `url` URL
* `referrer` URL
* `authInfo` Object
* `isProxy` Boolean
* `scheme` String
* `host` String
* `port` Integer
* `realm` String
* `callback` Function
* `username` String
* `password` String
Emitted when `webContents` wants to do basic auth.
The default behavior is to cancel all authentications, to override this you
should prevent the default behavior with `event.preventDefault()` and call
`callback(username, password)` with the credentials.
```javascript
const {app} = require('electron')
app.on('login', (event, webContents, request, authInfo, callback) => {
event.preventDefault()
callback('username', 'secret')
})
```
### Event: 'gpu-process-crashed'
Returns:
* `event` Event
* `killed` Boolean
Emitted when the gpu process crashes or is killed.
### Event: 'accessibility-support-changed' _macOS_ _Windows_
Returns:
* `event` Event
* `accessibilitySupportEnabled` Boolean - `true` when Chrome's accessibility
support is enabled, `false` otherwise.
Emitted when Chrome's accessibility support changes. This event fires when
assistive technologies, such as screen readers, are enabled or disabled.
See https://www.chromium.org/developers/design-documents/accessibility for more
details.
## Methods
The `app` object has the following methods:
**Note:** Some methods are only available on specific operating systems and are
labeled as such.
### `app.quit()`
Try to close all windows. The `before-quit` event will be emitted first. If all
windows are successfully closed, the `will-quit` event will be emitted and by
default the application will terminate.
This method guarantees that all `beforeunload` and `unload` event handlers are
correctly executed. It is possible that a window cancels the quitting by
returning `false` in the `beforeunload` event handler.
### `app.exit([exitCode])`
* `exitCode` Integer (optional)
Exits immediately with `exitCode`. `exitCode` defaults to 0.
All windows will be closed immediately without asking user and the `before-quit`
and `will-quit` events will not be emitted.
### `app.relaunch([options])`
* `options` Object (optional)
* `args` String[] - (optional)
* `execPath` String (optional)
Relaunches the app when current instance exits.
By default the new instance will use the same working directory and command line
arguments with current instance. When `args` is specified, the `args` will be
passed as command line arguments instead. When `execPath` is specified, the
`execPath` will be executed for relaunch instead of current app.
Note that this method does not quit the app when executed, you have to call
`app.quit` or `app.exit` after calling `app.relaunch` to make the app restart.
When `app.relaunch` is called for multiple times, multiple instances will be
started after current instance exited.
An example of restarting current instance immediately and adding a new command
line argument to the new instance:
```javascript
const {app} = require('electron')
app.relaunch({args: process.argv.slice(1).concat(['--relaunch'])})
app.exit(0)
```
### `app.isReady()`
Returns `Boolean` - `true` if Electron has finished initializing, `false` otherwise.
### `app.focus()`
On Linux, focuses on the first visible window. On macOS, makes the application
the active app. On Windows, focuses on the application's first window.
### `app.hide()` _macOS_
Hides all application windows without minimizing them.
### `app.show()` _macOS_
Shows application windows after they were hidden. Does not automatically focus
them.
### `app.getAppPath()`
Returns `String` - The current application directory.
### `app.getPath(name)`
* `name` String
Returns `String` - A path to a special directory or file associated with `name`. On
failure an `Error` is thrown.
You can request the following paths by the name:
* `home` User's home directory.
* `appData` Per-user application data directory, which by default points to:
* `%APPDATA%` on Windows
* `$XDG_CONFIG_HOME` or `~/.config` on Linux
* `~/Library/Application Support` on macOS
* `userData` The directory for storing your app's configuration files, which by
default it is the `appData` directory appended with your app's name.
* `temp` Temporary directory.
* `exe` The current executable file.
* `module` The `libchromiumcontent` library.
* `desktop` The current user's Desktop directory.
* `documents` Directory for a user's "My Documents".
* `downloads` Directory for a user's downloads.
* `music` Directory for a user's music.
* `pictures` Directory for a user's pictures.
* `videos` Directory for a user's videos.
* `pepperFlashSystemPlugin` Full path to the system version of the Pepper Flash plugin.
### `app.setPath(name, path)`
* `name` String
* `path` String
Overrides the `path` to a special directory or file associated with `name`. If
the path specifies a directory that does not exist, the directory will be
created by this method. On failure an `Error` is thrown.
You can only override paths of a `name` defined in `app.getPath`.
By default, web pages' cookies and caches will be stored under the `userData`
directory. If you want to change this location, you have to override the
`userData` path before the `ready` event of the `app` module is emitted.
### `app.getVersion()`
Returns `String` - The version of the loaded application. If no version is found in the
application's `package.json` file, the version of the current bundle or
executable is returned.
### `app.getName()`
Returns `String` - The current application's name, which is the name in the application's
`package.json` file.
Usually the `name` field of `package.json` is a short lowercased name, according
to the npm modules spec. You should usually also specify a `productName`
field, which is your application's full capitalized name, and which will be
preferred over `name` by Electron.
### `app.setName(name)`
* `name` String
Overrides the current application's name.
### `app.getLocale()`
Returns `String` - The current application locale. Possible return values are documented
[here](locales.md).
**Note:** When distributing your packaged app, you have to also ship the
`locales` folder.
**Note:** On Windows you have to call it after the `ready` events gets emitted.
### `app.addRecentDocument(path)` _macOS_ _Windows_
* `path` String
Adds `path` to the recent documents list.
This list is managed by the OS. On Windows you can visit the list from the task
bar, and on macOS you can visit it from dock menu.
### `app.clearRecentDocuments()` _macOS_ _Windows_
Clears the recent documents list.
### `app.setAsDefaultProtocolClient(protocol[, path, args])` _macOS_ _Windows_
* `protocol` String - The name of your protocol, without `://`. If you want your
app to handle `electron://` links, call this method with `electron` as the
parameter.
* `path` String (optional) _Windows_ - Defaults to `process.execPath`
* `args` String[] (optional) _Windows_ - Defaults to an empty array
Returns `Boolean` - Whether the call succeeded.
This method sets the current executable as the default handler for a protocol
(aka URI scheme). It allows you to integrate your app deeper into the operating
system. Once registered, all links with `your-protocol://` will be opened with
the current executable. The whole link, including protocol, will be passed to
your application as a parameter.
On Windows you can provide optional parameters path, the path to your executable,
and args, an array of arguments to be passed to your executable when it launches.
**Note:** On macOS, you can only register protocols that have been added to
your app's `info.plist`, which can not be modified at runtime. You can however
change the file with a simple text editor or script during build time.
Please refer to [Apple's documentation][CFBundleURLTypes] for details.
The API uses the Windows Registry and LSSetDefaultHandlerForURLScheme internally.
### `app.removeAsDefaultProtocolClient(protocol[, path, args])` _macOS_ _Windows_
* `protocol` String - The name of your protocol, without `://`.
* `path` String (optional) _Windows_ - Defaults to `process.execPath`
* `args` String[] (optional) _Windows_ - Defaults to an empty array
Returns `Boolean` - Whether the call succeeded.
This method checks if the current executable as the default handler for a
protocol (aka URI scheme). If so, it will remove the app as the default handler.
### `app.isDefaultProtocolClient(protocol[, path, args])` _macOS_ _Windows_
* `protocol` String - The name of your protocol, without `://`.
* `path` String (optional) _Windows_ - Defaults to `process.execPath`
* `args` String[] (optional) _Windows_ - Defaults to an empty array
Returns `Boolean`
This method checks if the current executable is the default handler for a protocol
(aka URI scheme). If so, it will return true. Otherwise, it will return false.
**Note:** On macOS, you can use this method to check if the app has been
registered as the default protocol handler for a protocol. You can also verify
this by checking `~/Library/Preferences/com.apple.LaunchServices.plist` on the
macOS machine. Please refer to
[Apple's documentation][LSCopyDefaultHandlerForURLScheme] for details.
The API uses the Windows Registry and LSCopyDefaultHandlerForURLScheme internally.
### `app.setUserTasks(tasks)` _Windows_
* `tasks` [Task[]](structures/task.md) - Array of `Task` objects
Adds `tasks` to the [Tasks][tasks] category of the JumpList on Windows.
`tasks` is an array of [`Task`](structures/task.md) objects.
Returns `Boolean` - Whether the call succeeded.
**Note:** If you'd like to customize the Jump List even more use
`app.setJumpList(categories)` instead.
### `app.getJumpListSettings()` _Windows_
Returns `Object`:
* `minItems` Integer - The minimum number of items that will be shown in the
Jump List (for a more detailed description of this value see the
[MSDN docs][JumpListBeginListMSDN]).
* `removedItems` [JumpListItem[]](structures/jump-list-item.md) - Array of `JumpListItem` objects that correspond to
items that the user has explicitly removed from custom categories in the
Jump List. These items must not be re-added to the Jump List in the **next**
call to `app.setJumpList()`, Windows will not display any custom category
that contains any of the removed items.
### `app.setJumpList(categories)` _Windows_
* `categories` [JumpListCategory[]](structures/jump-list-category.md) or `null` - Array of `JumpListCategory` objects.
Sets or removes a custom Jump List for the application, and returns one of the
following strings:
* `ok` - Nothing went wrong.
* `error` - One or more errors occurred, enable runtime logging to figure out
the likely cause.
* `invalidSeparatorError` - An attempt was made to add a separator to a
custom category in the Jump List. Separators are only allowed in the
standard `Tasks` category.
* `fileTypeRegistrationError` - An attempt was made to add a file link to
the Jump List for a file type the app isn't registered to handle.
* `customCategoryAccessDeniedError` - Custom categories can't be added to the
Jump List due to user privacy or group policy settings.
If `categories` is `null` the previously set custom Jump List (if any) will be
replaced by the standard Jump List for the app (managed by Windows).
**Note:** If a `JumpListCategory` object has neither the `type` nor the `name`
property set then its `type` is assumed to be `tasks`. If the `name` property
is set but the `type` property is omitted then the `type` is assumed to be
`custom`.
**Note:** Users can remove items from custom categories, and Windows will not
allow a removed item to be added back into a custom category until **after**
the next successful call to `app.setJumpList(categories)`. Any attempt to
re-add a removed item to a custom category earlier than that will result in the
entire custom category being omitted from the Jump List. The list of removed
items can be obtained using `app.getJumpListSettings()`.
Here's a very simple example of creating a custom Jump List:
```javascript
const {app} = require('electron')
app.setJumpList([
{
type: 'custom',
name: 'Recent Projects',
items: [
{ type: 'file', path: 'C:\\Projects\\project1.proj' },
{ type: 'file', path: 'C:\\Projects\\project2.proj' }
]
},
{ // has a name so `type` is assumed to be "custom"
name: 'Tools',
items: [
{
type: 'task',
title: 'Tool A',
program: process.execPath,
args: '--run-tool-a',
icon: process.execPath,
iconIndex: 0,
description: 'Runs Tool A'
},
{
type: 'task',
title: 'Tool B',
program: process.execPath,
args: '--run-tool-b',
icon: process.execPath,
iconIndex: 0,
description: 'Runs Tool B'
}
]
},
{ type: 'frequent' },
{ // has no name and no type so `type` is assumed to be "tasks"
items: [
{
type: 'task',
title: 'New Project',
program: process.execPath,
args: '--new-project',
description: 'Create a new project.'
},
{ type: 'separator' },
{
type: 'task',
title: 'Recover Project',
program: process.execPath,
args: '--recover-project',
description: 'Recover Project'
}
]
}
])
```
### `app.makeSingleInstance(callback)`
* `callback` Function
* `argv` String[] - An array of the second instance's command line arguments
* `workingDirectory` String - The second instance's working directory
This method makes your application a Single Instance Application - instead of
allowing multiple instances of your app to run, this will ensure that only a
single instance of your app is running, and other instances signal this
instance and exit.
`callback` will be called with `callback(argv, workingDirectory)` when a second
instance has been executed. `argv` is an Array of the second instance's command
line arguments, and `workingDirectory` is its current working directory. Usually
applications respond to this by making their primary window focused and
non-minimized.
The `callback` is guaranteed to be executed after the `ready` event of `app`
gets emitted.
This method returns `false` if your process is the primary instance of the
application and your app should continue loading. And returns `true` if your
process has sent its parameters to another instance, and you should immediately
quit.
On macOS the system enforces single instance automatically when users try to open
a second instance of your app in Finder, and the `open-file` and `open-url`
events will be emitted for that. However when users start your app in command
line the system's single instance mechanism will be bypassed and you have to
use this method to ensure single instance.
An example of activating the window of primary instance when a second instance
starts:
```javascript
const {app} = require('electron')
let myWindow = null
const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {
// Someone tried to run a second instance, we should focus our window.
if (myWindow) {
if (myWindow.isMinimized()) myWindow.restore()
myWindow.focus()
}
})
if (shouldQuit) {
app.quit()
}
// Create myWindow, load the rest of the app, etc...
app.on('ready', () => {
})
```
### `app.releaseSingleInstance()`
Releases all locks that were created by `makeSingleInstance`. This will allow
multiple instances of the application to once again run side by side.
### `app.setUserActivity(type, userInfo[, webpageURL])` _macOS_
* `type` String - Uniquely identifies the activity. Maps to
[`NSUserActivity.activityType`][activity-type].
* `userInfo` Object - App-specific state to store for use by another device.
* `webpageURL` String (optional) - The webpage to load in a browser if no suitable app is
installed on the resuming device. The scheme must be `http` or `https`.
Creates an `NSUserActivity` and sets it as the current activity. The activity
is eligible for [Handoff][handoff] to another device afterward.
### `app.getCurrentActivityType()` _macOS_
Returns `String` - The type of the currently running activity.
### `app.setAppUserModelId(id)` _Windows_
* `id` String
Changes the [Application User Model ID][app-user-model-id] to `id`.
### `app.importCertificate(options, callback)` _LINUX_
* `options` Object
* `certificate` String - Path for the pkcs12 file.
* `password` String - Passphrase for the certificate.
* `callback` Function
* `result` Integer - Result of import.
Imports the certificate in pkcs12 format into the platform certificate store.
`callback` is called with the `result` of import operation, a value of `0`
indicates success while any other value indicates failure according to chromium [net_error_list](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h).
### `app.disableHardwareAcceleration()`
Disables hardware acceleration for current app.
This method can only be called before app is ready.
### `app.setBadgeCount(count)` _Linux_ _macOS_
* `count` Integer
Returns `Boolean` - Whether the call succeeded.
Sets the counter badge for current app. Setting the count to `0` will hide the
badge.
On macOS it shows on the dock icon. On Linux it only works for Unity launcher,
**Note:** Unity launcher requires the exsistence of a `.desktop` file to work,
for more information please read [Desktop Environment Integration][unity-requiremnt].
### `app.getBadgeCount()` _Linux_ _macOS_
Returns `Integer` - The current value displayed in the counter badge.
### `app.isUnityRunning()` _Linux_
Returns `Boolean` - Whether the current desktop environment is Unity launcher.
### `app.getLoginItemSettings()` _macOS_ _Windows_
Returns `Object`:
* `openAtLogin` Boolean - `true` if the app is set to open at login.
* `openAsHidden` Boolean - `true` if the app is set to open as hidden at login.
This setting is only supported on macOS.
* `wasOpenedAtLogin` Boolean - `true` if the app was opened at login
automatically. This setting is only supported on macOS.
* `wasOpenedAsHidden` Boolean - `true` if the app was opened as a hidden login
item. This indicates that the app should not open any windows at startup.
This setting is only supported on macOS.
* `restoreState` Boolean - `true` if the app was opened as a login item that
should restore the state from the previous session. This indicates that the
app should restore the windows that were open the last time the app was
closed. This setting is only supported on macOS.
**Note:** This API has no effect on
[MAS builds][mas-builds].
### `app.setLoginItemSettings(settings)` _macOS_ _Windows_
* `settings` Object
* `openAtLogin` Boolean (optional) - `true` to open the app at login, `false` to remove
the app as a login item. Defaults to `false`.
* `openAsHidden` Boolean (optional) - `true` to open the app as hidden. Defaults to
`false`. The user can edit this setting from the System Preferences so
`app.getLoginItemStatus().wasOpenedAsHidden` should be checked when the app
is opened to know the current value. This setting is only supported on
macOS.
Set the app's login item settings.
**Note:** This API has no effect on
[MAS builds][mas-builds].
### `app.isAccessibilitySupportEnabled()` _macOS_ _Windows_
Returns `Boolean` - `true` if Chrome's accessibility support is enabled,
`false` otherwise. This API will return `true` if the use of assistive
technologies, such as screen readers, has been detected. See
https://www.chromium.org/developers/design-documents/accessibility for more
details.
### `app.setAboutPanelOptions(options)` _macOS_
* `options` Object
* `applicationName` String (optional) - The app's name.
* `applicationVersion` String (optional) - The app's version.
* `copyright` String (optional) - Copyright information.
* `credits` String (optional) - Credit information.
* `version` String (optional) - The app's build version number.
Set the about panel options. This will override the values defined in the app's
`.plist` file. See the [Apple docs][about-panel-options] for more details.
### `app.commandLine.appendSwitch(switch[, value])`
* `switch` String - A command-line switch
* `value` String (optional) - A value for the given switch
Append a switch (with optional `value`) to Chromium's command line.
**Note:** This will not affect `process.argv`, and is mainly used by developers
to control some low-level Chromium behaviors.
### `app.commandLine.appendArgument(value)`
* `value` String - The argument to append to the command line
Append an argument to Chromium's command line. The argument will be quoted
correctly.
**Note:** This will not affect `process.argv`.
### `app.dock.bounce([type])` _macOS_
* `type` String (optional) - Can be `critical` or `informational`. The default is
`informational`
When `critical` is passed, the dock icon will bounce until either the
application becomes active or the request is canceled.
When `informational` is passed, the dock icon will bounce for one second.
However, the request remains active until either the application becomes active
or the request is canceled.
Returns `Integer` an ID representing the request.
### `app.dock.cancelBounce(id)` _macOS_
* `id` Integer
Cancel the bounce of `id`.
### `app.dock.downloadFinished(filePath)` _macOS_
* `filePath` String
Bounces the Downloads stack if the filePath is inside the Downloads folder.
### `app.dock.setBadge(text)` _macOS_
* `text` String
Sets the string to be displayed in the docks badging area.
### `app.dock.getBadge()` _macOS_
Returns `String` - The badge string of the dock.
### `app.dock.hide()` _macOS_
Hides the dock icon.
### `app.dock.show()` _macOS_
Shows the dock icon.
### `app.dock.isVisible()` _macOS_
Returns `Boolean` - Whether the dock icon is visible.
The `app.dock.show()` call is asynchronous so this method might not
return true immediately after that call.
### `app.dock.setMenu(menu)` _macOS_
* `menu` [Menu](menu.md)
Sets the application's [dock menu][dock-menu].
### `app.dock.setIcon(image)` _macOS_
* `image` ([NativeImage](native-image.md) | String)
Sets the `image` associated with this dock icon.
[dock-menu]:https://developer.apple.com/library/mac/documentation/Carbon/Conceptual/customizing_docktile/concepts/dockconcepts.html#//apple_ref/doc/uid/TP30000986-CH2-TPXREF103
[tasks]:http://msdn.microsoft.com/en-us/library/windows/desktop/dd378460(v=vs.85).aspx#tasks
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
[CFBundleURLTypes]: https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html#//apple_ref/doc/uid/TP40009249-102207-TPXREF115
[LSCopyDefaultHandlerForURLScheme]: https://developer.apple.com/library/mac/documentation/Carbon/Reference/LaunchServicesReference/#//apple_ref/c/func/LSCopyDefaultHandlerForURLScheme
[handoff]: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Handoff/HandoffFundamentals/HandoffFundamentals.html
[activity-type]: https://developer.apple.com/library/ios/documentation/Foundation/Reference/NSUserActivity_Class/index.html#//apple_ref/occ/instp/NSUserActivity/activityType
[unity-requiremnt]: ../tutorial/desktop-environment-integration.md#unity-launcher-shortcuts-linux
[mas-builds]: ../tutorial/mac-app-store-submission-guide.md
[JumpListBeginListMSDN]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378398(v=vs.85).aspx
[about-panel-options]: https://developer.apple.com/reference/appkit/nsapplication/1428479-orderfrontstandardaboutpanelwith?language=objc

View file

@ -0,0 +1,139 @@
# autoUpdater
> Enable apps to automatically update themselves.
Process: [Main](../glossary.md#main-process)
The `autoUpdater` module provides an interface for the
[Squirrel](https://github.com/Squirrel) framework.
You can quickly launch a multi-platform release server for distributing your
application by using one of these projects:
- [nuts][nuts]: *A smart release server for your applications, using GitHub as a backend. Auto-updates with Squirrel (Mac & Windows)*
- [electron-release-server][electron-release-server]: *A fully featured,
self-hosted release server for electron applications, compatible with
auto-updater*
- [squirrel-updates-server][squirrel-updates-server]: *A simple node.js server
for Squirrel.Mac and Squirrel.Windows which uses GitHub releases*
- [squirrel-release-server][squirrel-release-server]: *A simple PHP application for Squirrel.Windows which reads updates from a folder. Supports delta updates.*
## Platform notices
Though `autoUpdater` provides a uniform API for different platforms, there are
still some subtle differences on each platform.
### macOS
On macOS, the `autoUpdater` module is built upon [Squirrel.Mac][squirrel-mac],
meaning you don't need any special setup to make it work. For server-side
requirements, you can read [Server Support][server-support]. Note that [App
Transport Security](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW35) (ATS) applies to all requests made as part of the
update process. Apps that need to disable ATS can add the
`NSAllowsArbitraryLoads` key to their app's plist.
**Note:** Your application must be signed for automatic updates on macOS.
This is a requirement of `Squirrel.Mac`.
### Windows
On Windows, you have to install your app into a user's machine before you can
use the `autoUpdater`, so it is recommended that you use the
[electron-winstaller][installer-lib], [electron-builder][electron-builder-lib] or the [grunt-electron-installer][installer] package to generate a Windows installer.
When using [electron-winstaller][installer-lib] or [electron-builder][electron-builder-lib] make sure you do not try to update your app [the first time it runs](https://github.com/electron/windows-installer#handling-squirrel-events) (Also see [this issue for more info](https://github.com/electron/electron/issues/7155)). It's also recommended to use [electron-squirrel-startup](https://github.com/mongodb-js/electron-squirrel-startup) to get desktop shortcuts for your app.
The installer generated with Squirrel will create a shortcut icon with an
[Application User Model ID][app-user-model-id] in the format of
`com.squirrel.PACKAGE_ID.YOUR_EXE_WITHOUT_DOT_EXE`, examples are
`com.squirrel.slack.Slack` and `com.squirrel.code.Code`. You have to use the
same ID for your app with `app.setAppUserModelId` API, otherwise Windows will
not be able to pin your app properly in task bar.
The server-side setup is also different from macOS. You can read the documents of
[Squirrel.Windows][squirrel-windows] to get more details.
### Linux
There is no built-in support for auto-updater on Linux, so it is recommended to
use the distribution's package manager to update your app.
## Events
The `autoUpdater` object emits the following events:
### Event: 'error'
Returns:
* `error` Error
Emitted when there is an error while updating.
### Event: 'checking-for-update'
Emitted when checking if an update has started.
### Event: 'update-available'
Emitted when there is an available update. The update is downloaded
automatically.
### Event: 'update-not-available'
Emitted when there is no available update.
### Event: 'update-downloaded'
Returns:
* `event` Event
* `releaseNotes` String
* `releaseName` String
* `releaseDate` Date
* `updateURL` String
Emitted when an update has been downloaded.
On Windows only `releaseName` is available.
## Methods
The `autoUpdater` object has the following methods:
### `autoUpdater.setFeedURL(url[, requestHeaders])`
* `url` String
* `requestHeaders` Object _macOS_ (optional) - HTTP request headers.
Sets the `url` and initialize the auto updater.
### `autoUpdater.getFeedURL()`
Returns `String` - The current update feed URL.
### `autoUpdater.checkForUpdates()`
Asks the server whether there is an update. You must call `setFeedURL` before
using this API.
### `autoUpdater.quitAndInstall()`
Restarts the app and installs the update after it has been downloaded. It
should only be called after `update-downloaded` has been emitted.
**Note:** `autoUpdater.quitAndInstall()` will close all application windows
first and only emit `before-quit` event on `app` after that. This is different
from the normal quit event sequence.
[squirrel-mac]: https://github.com/Squirrel/Squirrel.Mac
[server-support]: https://github.com/Squirrel/Squirrel.Mac#server-support
[squirrel-windows]: https://github.com/Squirrel/Squirrel.Windows
[installer]: https://github.com/electron/grunt-electron-installer
[installer-lib]: https://github.com/electron/windows-installer
[electron-builder-lib]: https://github.com/electron-userland/electron-builder
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
[electron-release-server]: https://github.com/ArekSredzki/electron-release-server
[squirrel-updates-server]: https://github.com/Aluxian/squirrel-updates-server
[nuts]: https://github.com/GitbookIO/nuts
[squirrel-release-server]: https://github.com/Arcath/squirrel-release-server

View file

@ -0,0 +1,53 @@
## Class: BrowserWindowProxy
> Manipulate the child browser window
Process: [Renderer](../glossary.md#renderer-process)
The `BrowserWindowProxy` object is returned from `window.open` and provides
limited functionality with the child window.
### Instance Methods
The `BrowserWindowProxy` object has the following instance methods:
#### `win.blur()`
Removes focus from the child window.
#### `win.close()`
Forcefully closes the child window without calling its unload event.
#### `win.eval(code)`
* `code` String
Evaluates the code in the child window.
#### `win.focus()`
Focuses the child window (brings the window to front).
#### `win.print()`
Invokes the print dialog on the child window.
#### `win.postMessage(message, targetOrigin)`
* `message` String
* `targetOrigin` String
Sends a message to the child window with the specified origin or `*` for no
origin preference.
In addition to these methods, the child window implements `window.opener` object
with no properties and a single method.
### Instance Properties
The `BrowserWindowProxy` object has the following instance properties:
#### `win.closed`
A Boolean that is set to true after the child window gets closed.

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,189 @@
# Supported Chrome Command Line Switches
> Command line switches supported by Electron.
You can use [app.commandLine.appendSwitch][append-switch] to append them in
your app's main script before the [ready][ready] event of the [app][app] module
is emitted:
```javascript
const {app} = require('electron')
app.commandLine.appendSwitch('remote-debugging-port', '8315')
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1')
app.on('ready', () => {
// Your code here
})
```
## --ignore-connections-limit=`domains`
Ignore the connections limit for `domains` list separated by `,`.
## --disable-http-cache
Disables the disk cache for HTTP requests.
## --disable-http2
Disable HTTP/2 and SPDY/3.1 protocols.
## --debug=`port` and --debug-brk=`port`
Debug-related flags, see the [Debugging the Main Process][debugging-main-process] guide for details.
## --remote-debugging-port=`port`
Enables remote debugging over HTTP on the specified `port`.
## --js-flags=`flags`
Specifies the flags passed to the Node JS engine. It has to be passed when starting
Electron if you want to enable the `flags` in the main process.
```bash
$ electron --js-flags="--harmony_proxies --harmony_collections" your-app
```
See the [Node documentation][node-cli] or run `node --help` in your terminal for a list of available flags. Additionally, run `node --v8-options` to see a list of flags that specifically refer to Node's V8 JavaScript engine.
## --proxy-server=`address:port`
Use a specified proxy server, which overrides the system setting. This switch
only affects requests with HTTP protocol, including HTTPS and WebSocket
requests. It is also noteworthy that not all proxy servers support HTTPS and
WebSocket requests.
## --proxy-bypass-list=`hosts`
Instructs Electron to bypass the proxy server for the given semi-colon-separated
list of hosts. This flag has an effect only if used in tandem with
`--proxy-server`.
For example:
```javascript
const {app} = require('electron')
app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com;1.2.3.4:5678')
```
Will use the proxy server for all hosts except for local addresses (`localhost`,
`127.0.0.1` etc.), `google.com` subdomains, hosts that contain the suffix
`foo.com` and anything at `1.2.3.4:5678`.
## --proxy-pac-url=`url`
Uses the PAC script at the specified `url`.
## --no-proxy-server
Don't use a proxy server and always make direct connections. Overrides any other
proxy server flags that are passed.
## --host-rules=`rules`
A comma-separated list of `rules` that control how hostnames are mapped.
For example:
* `MAP * 127.0.0.1` Forces all hostnames to be mapped to 127.0.0.1
* `MAP *.google.com proxy` Forces all google.com subdomains to be resolved to
"proxy".
* `MAP test.com [::1]:77` Forces "test.com" to resolve to IPv6 loopback. Will
also force the port of the resulting socket address to be 77.
* `MAP * baz, EXCLUDE www.google.com` Remaps everything to "baz", except for
"www.google.com".
These mappings apply to the endpoint host in a net request (the TCP connect
and host resolver in a direct connection, and the `CONNECT` in an HTTP proxy
connection, and the endpoint host in a `SOCKS` proxy connection).
## --host-resolver-rules=`rules`
Like `--host-rules` but these `rules` only apply to the host resolver.
## --auth-server-whitelist=`url`
A comma-separated list of servers for which integrated authentication is enabled.
For example:
```
--auth-server-whitelist='*example.com, *foobar.com, *baz'
```
then any `url` ending with `example.com`, `foobar.com`, `baz` will be considered
for integrated authentication. Without `*` prefix the url has to match exactly.
## --auth-negotiate-delegate-whitelist=`url`
A comma-separated list of servers for which delegation of user credentials is required.
Without `*` prefix the url has to match exactly.
## --ignore-certificate-errors
Ignores certificate related errors.
## --ppapi-flash-path=`path`
Sets the `path` of the pepper flash plugin.
## --ppapi-flash-version=`version`
Sets the `version` of the pepper flash plugin.
## --log-net-log=`path`
Enables net log events to be saved and writes them to `path`.
## --ssl-version-fallback-min=`version`
Sets the minimum SSL/TLS version (`tls1`, `tls1.1` or `tls1.2`) that TLS
fallback will accept.
## --cipher-suite-blacklist=`cipher_suites`
Specifies comma-separated list of SSL cipher suites to disable.
## --disable-renderer-backgrounding
Prevents Chromium from lowering the priority of invisible pages' renderer
processes.
This flag is global to all renderer processes, if you only want to disable
throttling in one window, you can take the hack of
[playing silent audio][play-silent-audio].
## --enable-logging
Prints Chromium's logging into console.
This switch can not be used in `app.commandLine.appendSwitch` since it is parsed
earlier than user's app is loaded, but you can set the `ELECTRON_ENABLE_LOGGING`
environment variable to achieve the same effect.
## --v=`log_level`
Gives the default maximal active V-logging level; 0 is the default. Normally
positive values are used for V-logging levels.
This switch only works when `--enable-logging` is also passed.
## --vmodule=`pattern`
Gives the per-module maximal V-logging levels to override the value given by
`--v`. E.g. `my_module=2,foo*=3` would change the logging level for all code in
source files `my_module.*` and `foo*.*`.
Any pattern containing a forward or backward slash will be tested against the
whole pathname and not just the module. E.g. `*/foo/bar/*=2` would change the
logging level for all code in the source files under a `foo/bar` directory.
This switch only works when `--enable-logging` is also passed.
[app]: app.md
[append-switch]: app.md#appcommandlineappendswitchswitch-value
[ready]: app.md#event-ready
[play-silent-audio]: https://github.com/atom/atom/pull/9485/files
[debugging-main-process]: ../tutorial/debugging-main-process.md
[node-cli]: https://nodejs.org/api/cli.html

View file

@ -0,0 +1,192 @@
## Class: ClientRequest
> Make HTTP/HTTPS requests.
Process: [Main](../glossary.md#main-process)
`ClientRequest` implements the [Writable Stream](https://nodejs.org/api/stream.html#stream_writable_streams)
interface and is therefore an [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter).
### `new ClientRequest(options)`
* `options` (Object | String) - If `options` is a String, it is interpreted as
the request URL. If it is an object, it is expected to fully specify an HTTP request via the
following properties:
* `method` String (optional) - The HTTP request method. Defaults to the GET
method.
* `url` String (optional) - The request URL. Must be provided in the absolute
form with the protocol scheme specified as http or https.
* `session` Object (optional) - The [`Session`](session.md) instance with
which the request is associated.
* `partition` String (optional) - The name of the [`partition`](session.md)
with which the request is associated. Defaults to the empty string. The
`session` option prevails on `partition`. Thus if a `session` is explicitly
specified, `partition` is ignored.
* `protocol` String (optional) - The protocol scheme in the form 'scheme:'.
Currently supported values are 'http:' or 'https:'. Defaults to 'http:'.
* `host` String (optional) - The server host provided as a concatenation of
the hostname and the port number 'hostname:port'
* `hostname` String (optional) - The server host name.
* `port` Integer (optional) - The server's listening port number.
* `path` String (optional) - The path part of the request URL.
`options` properties such as `protocol`, `host`, `hostname`, `port` and `path`
strictly follow the Node.js model as described in the
[URL](https://nodejs.org/api/url.html) module.
For instance, we could have created the same request to 'github.com' as follows:
```JavaScript
const request = net.request({
method: 'GET',
protocol: 'https:',
hostname: 'github.com',
port: 443,
path: '/'
})
```
### Instance Events
#### Event: 'response'
Returns:
* `response` IncomingMessage - An object representing the HTTP response message.
#### Event: 'login'
Returns:
* `authInfo` Object
* `isProxy` Boolean
* `scheme` String
* `host` String
* `port` Integer
* `realm` String
* `callback` Function
Emitted when an authenticating proxy is asking for user credentials.
The `callback` function is expected to be called back with user credentials:
* `username` String
* `password` String
```JavaScript
request.on('login', (authInfo, callback) => {
callback('username', 'password')
})
```
Providing empty credentials will cancel the request and report an authentication
error on the response object:
```JavaScript
request.on('response', (response) => {
console.log(`STATUS: ${response.statusCode}`);
response.on('error', (error) => {
console.log(`ERROR: ${JSON.stringify(error)}`)
})
})
request.on('login', (authInfo, callback) => {
callback()
})
```
#### Event: 'finish'
Emitted just after the last chunk of the `request`'s data has been written into
the `request` object.
#### Event: 'abort'
Emitted when the `request` is aborted. The `abort` event will not be fired if
the `request` is already closed.
#### Event: 'error'
Returns:
* `error` Error - an error object providing some information about the failure.
Emitted when the `net` module fails to issue a network request. Typically when
the `request` object emits an `error` event, a `close` event will subsequently
follow and no response object will be provided.
#### Event: 'close'
Emitted as the last event in the HTTP request-response transaction. The `close`
event indicates that no more events will be emitted on either the `request` or
`response` objects.
### Instance Properties
#### `request.chunkedEncoding`
A Boolean specifying whether the request will use HTTP chunked transfer encoding
or not. Defaults to false. The property is readable and writable, however it can
be set only before the first write operation as the HTTP headers are not yet put
on the wire. Trying to set the `chunkedEncoding` property after the first write
will throw an error.
Using chunked encoding is strongly recommended if you need to send a large
request body as data will be streamed in small chunks instead of being
internally buffered inside Electron process memory.
### Instance Methods
#### `request.setHeader(name, value)`
* `name` String - An extra HTTP header name.
* `value` String - An extra HTTP header value.
Adds an extra HTTP header. The header name will issued as it is without
lowercasing. It can be called only before first write. Calling this method after
the first write will throw an error.
#### `request.getHeader(name)`
* `name` String - Specify an extra header name.
Returns String - The value of a previously set extra header name.
#### `request.removeHeader(name)`
* `name` String - Specify an extra header name.
Removes a previously set extra header name. This method can be called only
before first write. Trying to call it after the first write will throw an error.
#### `request.write(chunk[, encoding][, callback])`
* `chunk` (String | Buffer) - A chunk of the request body's data. If it is a
string, it is converted into a Buffer using the specified encoding.
* `encoding` String (optional) - Used to convert string chunks into Buffer
objects. Defaults to 'utf-8'.
* `callback` Function (optional) - Called after the write operation ends.
`callback` is essentially a dummy function introduced in the purpose of keeping
similarity with the Node.js API. It is called asynchronously in the next tick
after `chunk` content have been delivered to the Chromium networking layer.
Contrary to the Node.js implementation, it is not guaranteed that `chunk`
content have been flushed on the wire before `callback` is called.
Adds a chunk of data to the request body. The first write operation may cause
the request headers to be issued on the wire. After the first write operation,
it is not allowed to add or remove a custom header.
#### `request.end([chunk][, encoding][, callback])`
* `chunk` (String | Buffer) (optional)
* `encoding` String (optional)
* `callback` Function (optional)
Sends the last chunk of the request data. Subsequent write or end operations
will not be allowed. The `finish` event is emitted just after the end operation.
#### `request.abort()`
Cancels an ongoing HTTP transaction. If the request has already emitted the
`close` event, the abort operation will have no effect. Otherwise an ongoing
event will emit `abort` and `close` events. Additionally, if there is an ongoing
response object,it will emit the `aborted` event.

View file

@ -0,0 +1,169 @@
# clipboard
> Perform copy and paste operations on the system clipboard.
Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer-process)
The following example shows how to write a string to the clipboard:
```javascript
const {clipboard} = require('electron')
clipboard.writeText('Example String')
```
On X Window systems, there is also a selection clipboard. To manipulate it
you need to pass `selection` to each method:
```javascript
const {clipboard} = require('electron')
clipboard.writeText('Example String', 'selection')
console.log(clipboard.readText('selection'))
```
## Methods
The `clipboard` module has the following methods:
**Note:** Experimental APIs are marked as such and could be removed in future.
### `clipboard.readText([type])`
* `type` String (optional)
Returns `String` - The content in the clipboard as plain text.
### `clipboard.writeText(text[, type])`
* `text` String
* `type` String (optional)
Writes the `text` into the clipboard as plain text.
### `clipboard.readHTML([type])`
* `type` String (optional)
Returns `String` - The content in the clipboard as markup.
### `clipboard.writeHTML(markup[, type])`
* `markup` String
* `type` String (optional)
Writes `markup` to the clipboard.
### `clipboard.readImage([type])`
* `type` String (optional)
Returns [`NativeImage`](native-image.md) - The image content in the clipboard.
### `clipboard.writeImage(image[, type])`
* `image` [NativeImage](native-image.md)
* `type` String (optional)
Writes `image` to the clipboard.
### `clipboard.readRTF([type])`
* `type` String (optional)
Returns `String` - The content in the clipboard as RTF.
### `clipboard.writeRTF(text[, type])`
* `text` String
* `type` String (optional)
Writes the `text` into the clipboard in RTF.
### `clipboard.readBookmark()` _macOS_ _Windows_
Returns `Object`:
* `title` String
* `url` String
Returns an Object containing `title` and `url` keys representing the bookmark in
the clipboard. The `title` and `url` values will be empty strings when the
bookmark is unavailable.
### `clipboard.writeBookmark(title, url[, type])` _macOS_ _Windows_
* `title` String
* `url` String
* `type` String (optional)
Writes the `title` and `url` into the clipboard as a bookmark.
**Note:** Most apps on Windows don't support pasting bookmarks into them so
you can use `clipboard.write` to write both a bookmark and fallback text to the
clipboard.
```js
clipboard.write({
text: 'http://electron.atom.io',
bookmark: 'Electron Homepage'
})
```
### `clipboard.readFindText()` _macOS_
Returns `String` - The text on the find pasteboard. This method uses synchronous
IPC when called from the renderer process. The cached value is reread from the
find pasteboard whenever the application is activated.
### `clipboard.writeFindText(text)` _macOS_
* `text` String
Writes the `text` into the find pasteboard as plain text. This method uses
synchronous IPC when called from the renderer process.
### `clipboard.clear([type])`
* `type` String (optional)
Clears the clipboard content.
### `clipboard.availableFormats([type])`
* `type` String (optional)
Returns `String[]` - An array of supported formats for the clipboard `type`.
### `clipboard.has(data[, type])` _Experimental_
* `data` String
* `type` String (optional)
Returns `Boolean` - Whether the clipboard supports the format of specified `data`.
```javascript
const {clipboard} = require('electron')
console.log(clipboard.has('<p>selection</p>'))
```
### `clipboard.read(data[, type])` _Experimental_
* `data` String
* `type` String (optional)
Returns `String` - Reads `data` from the clipboard.
### `clipboard.write(data[, type])`
* `data` Object
* `text` String (optional)
* `html` String (optional)
* `image` [NativeImage](native-image.md) (optional)
* `rtf` String (optional)
* `bookmark` String (optional) - The title of the url at `text`.
* `type` String (optional)
```javascript
const {clipboard} = require('electron')
clipboard.write({text: 'test', html: '<b>test</b>'})
```
Writes `data` to the clipboard.

View file

@ -0,0 +1,173 @@
# contentTracing
> Collect tracing data from Chromium's content module for finding performance
bottlenecks and slow operations.
Process: [Main](../glossary.md#main-process)
This module does not include a web interface so you need to open
`chrome://tracing/` in a Chrome browser and load the generated file to view the
result.
```javascript
const {contentTracing} = require('electron')
const options = {
categoryFilter: '*',
traceOptions: 'record-until-full,enable-sampling'
}
contentTracing.startRecording(options, () => {
console.log('Tracing started')
setTimeout(() => {
contentTracing.stopRecording('', (path) => {
console.log('Tracing data recorded to ' + path)
})
}, 5000)
})
```
## Methods
The `contentTracing` module has the following methods:
### `contentTracing.getCategories(callback)`
* `callback` Function
* `categories` String[]
Get a set of category groups. The category groups can change as new code paths
are reached.
Once all child processes have acknowledged the `getCategories` request the
`callback` is invoked with an array of category groups.
### `contentTracing.startRecording(options, callback)`
* `options` Object
* `categoryFilter` String
* `traceOptions` String
* `callback` Function
Start recording on all processes.
Recording begins immediately locally and asynchronously on child processes
as soon as they receive the EnableRecording request. The `callback` will be
called once all child processes have acknowledged the `startRecording` request.
`categoryFilter` is a filter to control what category groups should be
traced. A filter can have an optional `-` prefix to exclude category groups
that contain a matching category. Having both included and excluded
category patterns in the same list is not supported.
Examples:
* `test_MyTest*`,
* `test_MyTest*,test_OtherStuff`,
* `"-excluded_category1,-excluded_category2`
`traceOptions` controls what kind of tracing is enabled, it is a comma-delimited
list. Possible options are:
* `record-until-full`
* `record-continuously`
* `trace-to-console`
* `enable-sampling`
* `enable-systrace`
The first 3 options are trace recoding modes and hence mutually exclusive.
If more than one trace recording modes appear in the `traceOptions` string,
the last one takes precedence. If none of the trace recording modes are
specified, recording mode is `record-until-full`.
The trace option will first be reset to the default option (`record_mode` set to
`record-until-full`, `enable_sampling` and `enable_systrace` set to `false`)
before options parsed from `traceOptions` are applied on it.
### `contentTracing.stopRecording(resultFilePath, callback)`
* `resultFilePath` String
* `callback` Function
* `resultFilePath` String
Stop recording on all processes.
Child processes typically cache trace data and only rarely flush and send
trace data back to the main process. This helps to minimize the runtime overhead
of tracing since sending trace data over IPC can be an expensive operation. So,
to end tracing, we must asynchronously ask all child processes to flush any
pending trace data.
Once all child processes have acknowledged the `stopRecording` request,
`callback` will be called with a file that contains the traced data.
Trace data will be written into `resultFilePath` if it is not empty or into a
temporary file. The actual file path will be passed to `callback` if it's not
`null`.
### `contentTracing.startMonitoring(options, callback)`
* `options` Object
* `categoryFilter` String
* `traceOptions` String
* `callback` Function
Start monitoring on all processes.
Monitoring begins immediately locally and asynchronously on child processes as
soon as they receive the `startMonitoring` request.
Once all child processes have acknowledged the `startMonitoring` request the
`callback` will be called.
### `contentTracing.stopMonitoring(callback)`
* `callback` Function
Stop monitoring on all processes.
Once all child processes have acknowledged the `stopMonitoring` request the
`callback` is called.
### `contentTracing.captureMonitoringSnapshot(resultFilePath, callback)`
* `resultFilePath` String
* `callback` Function
* `resultFilePath` String
Get the current monitoring traced data.
Child processes typically cache trace data and only rarely flush and send
trace data back to the main process. This is because it may be an expensive
operation to send the trace data over IPC and we would like to avoid unneeded
runtime overhead from tracing. So, to end tracing, we must asynchronously ask
all child processes to flush any pending trace data.
Once all child processes have acknowledged the `captureMonitoringSnapshot`
request the `callback` will be called with a file that contains the traced data.
### `contentTracing.getTraceBufferUsage(callback)`
* `callback` Function
* `value` Number
* `percentage` Number
Get the maximum usage across processes of trace buffer as a percentage of the
full state. When the TraceBufferUsage value is determined the `callback` is
called.
### `contentTracing.setWatchEvent(categoryName, eventName, callback)`
* `categoryName` String
* `eventName` String
* `callback` Function
`callback` will be called every time the given event occurs on any
process.
### `contentTracing.cancelWatchEvent()`
Cancel the watch event. This may lead to a race condition with the watch event
callback if tracing is enabled.

View file

@ -0,0 +1,106 @@
## Class: Cookies
> Query and modify a session's cookies.
Process: [Main](../glossary.md#main-process)
Instances of the `Cookies` class are accessed by using `cookies` property of
a `Session`.
For example:
```javascript
const {session} = require('electron')
// Query all cookies.
session.defaultSession.cookies.get({}, (error, cookies) => {
console.log(error, cookies)
})
// Query all cookies associated with a specific url.
session.defaultSession.cookies.get({url: 'http://www.github.com'}, (error, cookies) => {
console.log(error, cookies)
})
// Set a cookie with the given cookie data;
// may overwrite equivalent cookies if they exist.
const cookie = {url: 'http://www.github.com', name: 'dummy_name', value: 'dummy'}
session.defaultSession.cookies.set(cookie, (error) => {
if (error) console.error(error)
})
```
### Instance Events
The following events are available on instances of `Cookies`:
#### Event: 'changed'
* `event` Event
* `cookie` [Cookie](structures/cookie.md) - The cookie that was changed
* `cause` String - The cause of the change with one of the following values:
* `explicit` - The cookie was changed directly by a consumer's action.
* `overwrite` - The cookie was automatically removed due to an insert
operation that overwrote it.
* `expired` - The cookie was automatically removed as it expired.
* `evicted` - The cookie was automatically evicted during garbage collection.
* `expired-overwrite` - The cookie was overwritten with an already-expired
expiration date.
* `removed` Boolean - `true` if the cookie was removed, `false` otherwise.
Emitted when a cookie is changed because it was added, edited, removed, or
expired.
### Instance Methods
The following methods are available on instances of `Cookies`:
#### `cookies.get(filter, callback)`
* `filter` Object
* `url` String (optional) - Retrieves cookies which are associated with
`url`. Empty implies retrieving cookies of all urls.
* `name` String (optional) - Filters cookies by name.
* `domain` String (optional) - Retrieves cookies whose domains match or are
subdomains of `domains`
* `path` String (optional) - Retrieves cookies whose path matches `path`.
* `secure` Boolean (optional) - Filters cookies by their Secure property.
* `session` Boolean (optional) - Filters out session or persistent cookies.
* `callback` Function
* `error` Error
* `cookies` Cookies[]
Sends a request to get all cookies matching `details`, `callback` will be called
with `callback(error, cookies)` on complete.
`cookies` is an Array of [`cookie`](structures/cookie.md) objects.
#### `cookies.set(details, callback)`
* `details` Object
* `url` String - The url to associate the cookie with.
* `name` String (optional) - The name of the cookie. Empty by default if omitted.
* `value` String (optional) - The value of the cookie. Empty by default if omitted.
* `domain` String (optional) - The domain of the cookie. Empty by default if omitted.
* `path` String (optional) - The path of the cookie. Empty by default if omitted.
* `secure` Boolean (optional) - Whether the cookie should be marked as Secure. Defaults to
false.
* `httpOnly` Boolean (optional) - Whether the cookie should be marked as HTTP only.
Defaults to false.
* `expirationDate` Double (optional) - The expiration date of the cookie as the number of
seconds since the UNIX epoch. If omitted then the cookie becomes a session
cookie and will not be retained between sessions.
* `callback` Function
* `error` Error
Sets a cookie with `details`, `callback` will be called with `callback(error)`
on complete.
#### `cookies.remove(url, name, callback)`
* `url` String - The URL associated with the cookie.
* `name` String - The name of cookie to remove.
* `callback` Function
Removes the cookies matching `url` and `name`, `callback` will called with
`callback()` on complete.

View file

@ -0,0 +1,112 @@
# crashReporter
> Submit crash reports to a remote server.
Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer-process)
The following is an example of automatically submitting a crash report to a
remote server:
```javascript
const {crashReporter} = require('electron')
crashReporter.start({
productName: 'YourName',
companyName: 'YourCompany',
submitURL: 'https://your-domain.com/url-to-submit',
uploadToServer: true
})
```
For setting up a server to accept and process crash reports, you can use
following projects:
* [socorro](https://github.com/mozilla/socorro)
* [mini-breakpad-server](https://github.com/electron/mini-breakpad-server)
Crash reports are saved locally in an application-specific temp directory folder.
For a `productName` of `YourName`, crash reports will be stored in a folder
named `YourName Crashes` inside the temp directory. You can customize this temp
directory location for your app by calling the `app.setPath('temp', '/my/custom/temp')`
API before starting the crash reporter.
## Methods
The `crashReporter` module has the following methods:
### `crashReporter.start(options)`
* `options` Object
* `companyName` String (optional)
* `submitURL` String - URL that crash reports will be sent to as POST.
* `productName` String (optional) - Defaults to `app.getName()`.
* `uploadToServer` Boolean (optional) _macOS_ - Whether crash reports should be sent to the server
Default is `true`.
* `ignoreSystemCrashHandler` Boolean (optional) - Default is `false`.
* `extra` Object (optional) - An object you can define that will be sent along with the
report. Only string properties are sent correctly, Nested objects are not
supported.
You are required to call this method before using any other `crashReporter` APIs
and in each process (main/renderer) from which you want to collect crash reports.
You can pass different options to `crashReporter.start` when calling from different processes.
**Note:** On Windows and Linux, Electron uses `breakpad` for crash collection and reporting.
Crashes can be collected from the main and renderer process, but not from the child processes
created via the `child_process` module.
**Note:** On macOS, Electron uses a new `crashpad` client for crash collection and reporting.
Crashes can be collected from the main, renderer and any of the child processes created via the `child_process` module.
If you want to enable crash reporting, initializing `crashpad` from the main process using `crashReporter.start` is required
regardless of which process you want to collect crashes from. Once initialized this way, the crashpad handler collects
crashes from all processes. You still have to call `crashReporter.start` from the renderer process, otherwise crashes from
renderer processes will get reported without `companyName`, `productName` or any of the `extra` information.
### `crashReporter.getLastCrashReport()`
Returns [`CrashReport`](structures/crash-report.md):
Returns the date and ID of the last crash report. If no crash reports have been
sent or the crash reporter has not been started, `null` is returned.
### `crashReporter.getUploadedReports()`
Returns [`CrashReport[]`](structures/crash-report.md):
Returns all uploaded crash reports. Each report contains the date and uploaded
ID.
### `crashReporter.getUploadToServer()` _macOS_
Returns `Boolean` - Whether reports should be submitted to the server. Set through
the `start` method or `setUploadToServer`.
**Note:** This API can only be called from the main process.
### `crashReporter.setUploadToServer(uploadToServer)` _macOS_
* `uploadToServer` Boolean _macOS_ - Whether reports should be submitted to the server
This would normally be controlled by user preferences. This has no effect if
called before `start` is called.
**Note:** This API can only be called from the main process.
## Crash Report Payload
The crash reporter will send the following data to the `submitURL` as
a `multipart/form-data` `POST`:
* `ver` String - The version of Electron.
* `platform` String - e.g. 'win32'.
* `process_type` String - e.g. 'renderer'.
* `guid` String - e.g. '5e1286fc-da97-479e-918b-6bfb0c3d1c72'
* `_version` String - The version in `package.json`.
* `_productName` String - The product name in the `crashReporter` `options`
object.
* `prod` String - Name of the underlying product. In this case Electron.
* `_companyName` String - The company name in the `crashReporter` `options`
object.
* `upload_file_minidump` File - The crash report in the format of `minidump`.
* All level one properties of the `extra` object in the `crashReporter`
`options` object.

View file

@ -0,0 +1,83 @@
## Class: Debugger
> An alternate transport for Chrome's remote debugging protocol.
Process: [Main](../glossary.md#main-process)
Chrome Developer Tools has a [special binding][rdp] available at JavaScript
runtime that allows interacting with pages and instrumenting them.
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
try {
win.webContents.debugger.attach('1.1')
} catch (err) {
console.log('Debugger attach failed : ', err)
}
win.webContents.debugger.on('detach', (event, reason) => {
console.log('Debugger detached due to : ', reason)
})
win.webContents.debugger.on('message', (event, method, params) => {
if (method === 'Network.requestWillBeSent') {
if (params.request.url === 'https://www.github.com') {
win.webContents.debugger.detach()
}
}
})
win.webContents.debugger.sendCommand('Network.enable')
```
### Instance Methods
#### `debugger.attach([protocolVersion])`
* `protocolVersion` String (optional) - Requested debugging protocol version.
Attaches the debugger to the `webContents`.
#### `debugger.isAttached()`
Returns `Boolean` - Whether a debugger is attached to the `webContents`.
#### `debugger.detach()`
Detaches the debugger from the `webContents`.
#### `debugger.sendCommand(method[, commandParams, callback])`
* `method` String - Method name, should be one of the methods defined by the
remote debugging protocol.
* `commandParams` Object (optional) - JSON object with request parameters.
* `callback` Function (optional) - Response
* `error` Object - Error message indicating the failure of the command.
* `result` Any - Response defined by the 'returns' attribute of
the command description in the remote debugging protocol.
Send given command to the debugging target.
### Instance Events
#### Event: 'detach'
* `event` Event
* `reason` String - Reason for detaching debugger.
Emitted when debugging session is terminated. This happens either when
`webContents` is closed or devtools is invoked for the attached `webContents`.
#### Event: 'message'
* `event` Event
* `method` String - Method name.
* `params` Object - Event parameters defined by the 'parameters'
attribute in the remote debugging protocol.
Emitted whenever debugging target issues instrumentation event.
[rdp]: https://developer.chrome.com/devtools/docs/debugger-protocol
[`webContents.findInPage`]: web-contents.md#contentsfindinpagetext-options

View file

@ -0,0 +1,76 @@
# desktopCapturer
> Access information about media sources that can be used to capture audio and
> video from the desktop using the [`navigator.webkitGetUserMedia`] API.
Process: [Renderer](../glossary.md#renderer-process)
The following example shows how to capture video from a desktop window whose
title is `Electron`:
```javascript
// In the renderer process.
const {desktopCapturer} = require('electron')
desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
if (error) throw error
for (let i = 0; i < sources.length; ++i) {
if (sources[i].name === 'Electron') {
navigator.webkitGetUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sources[i].id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
}, handleStream, handleError)
return
}
}
})
function handleStream (stream) {
document.querySelector('video').src = URL.createObjectURL(stream)
}
function handleError (e) {
console.log(e)
}
```
To capture video from a source provided by `desktopCapturer` the constraints
passed to [`navigator.webkitGetUserMedia`] must include
`chromeMediaSource: 'desktop'`, and `audio: false`.
To capture both audio and video from the entire desktop the constraints passed
to [`navigator.webkitGetUserMedia`] must include `chromeMediaSource: 'screen'`,
and `audio: true`, but should not include a `chromeMediaSourceId` constraint.
## Methods
The `desktopCapturer` module has the following methods:
### `desktopCapturer.getSources(options, callback)`
* `options` Object
* `types` String[] - An array of Strings that lists the types of desktop sources
to be captured, available types are `screen` and `window`.
* `thumbnailSize` Object (optional) - The suggested size that the media source
thumbnail should be scaled to, defaults to `{width: 150, height: 150}`.
* `callback` Function
* `error` Error
* `sources` [DesktopCapturerSource[]](structures/desktop-capturer-source.md)
Starts gathering information about all available desktop media sources,
and calls `callback(error, sources)` when finished.
`sources` is an array of [`DesktopCapturerSource`](structures/desktop-capturer-source.md)
objects, each `DesktopCapturerSource` represents a screen or an individual window that can be
captured.
[`navigator.webkitGetUserMedia`]: https://developer.mozilla.org/en/docs/Web/API/Navigator/getUserMedia

View file

@ -0,0 +1,161 @@
# dialog
> Display native system dialogs for opening and saving files, alerting, etc.
Process: [Main](../glossary.md#main-process)
An example of showing a dialog to select multiple files and directories:
```javascript
const {dialog} = require('electron')
console.log(dialog.showOpenDialog({properties: ['openFile', 'openDirectory', 'multiSelections']}))
```
The Dialog is opened from Electron's main thread. If you want to use the dialog
object from a renderer process, remember to access it using the remote:
```javascript
const {dialog} = require('electron').remote
console.log(dialog)
```
## Methods
The `dialog` module has the following methods:
### `dialog.showOpenDialog([browserWindow, ]options[, callback])`
* `browserWindow` BrowserWindow (optional)
* `options` Object
* `title` String (optional)
* `defaultPath` String (optional)
* `buttonLabel` String (optional) - Custom label for the confirmation button, when
left empty the default label will be used.
* `filters` [FileFilter[]](structures/file-filter.md) (optional)
* `properties` String[] (optional) - Contains which features the dialog should use, can
contain `openFile`, `openDirectory`, `multiSelections`, `createDirectory`
and `showHiddenFiles`.
* `normalizeAccessKeys` Boolean (optional) - Normalize the keyboard access keys
across platforms. Default is `false`. Enabling this assumes `&` is used in
the button labels for the placement of the keyboard shortcut access key
and labels will be converted so they work correctly on each platform, `&`
characters are removed on macOS, converted to `_` on Linux, and left
untouched on Windows. For example, a button label of `Vie&w` will be
converted to `Vie_w` on Linux and `View` on macOS and can be selected
via `Alt-W` on Windows and Linux.
* `callback` Function (optional)
* `filePaths` String[] - An array of file paths chosen by the user
Returns `String[]`, an array of file paths chosen by the user,
if the callback is provided it returns `undefined`.
The `browserWindow` argument allows the dialog to attach itself to a parent window, making it modal.
The `filters` specifies an array of file types that can be displayed or
selected when you want to limit the user to a specific type. For example:
```javascript
{
filters: [
{name: 'Images', extensions: ['jpg', 'png', 'gif']},
{name: 'Movies', extensions: ['mkv', 'avi', 'mp4']},
{name: 'Custom File Type', extensions: ['as']},
{name: 'All Files', extensions: ['*']}
]
}
```
The `extensions` array should contain extensions without wildcards or dots (e.g.
`'png'` is good but `'.png'` and `'*.png'` are bad). To show all files, use the
`'*'` wildcard (no other wildcard is supported).
If a `callback` is passed, the API call will be asynchronous and the result
will be passed via `callback(filenames)`
**Note:** On Windows and Linux an open dialog can not be both a file selector
and a directory selector, so if you set `properties` to
`['openFile', 'openDirectory']` on these platforms, a directory selector will be
shown.
### `dialog.showSaveDialog([browserWindow, ]options[, callback])`
* `browserWindow` BrowserWindow (optional)
* `options` Object
* `title` String (optional)
* `defaultPath` String (optional)
* `buttonLabel` String (optional) - Custom label for the confirmation button, when
left empty the default label will be used.
* `filters` [FileFilter[]](structures/file-filter.md) (optional)
* `callback` Function (optional)
* `filename` String
Returns `String`, the path of the file chosen by the user,
if a callback is provided it returns `undefined`.
The `browserWindow` argument allows the dialog to attach itself to a parent window, making it modal.
The `filters` specifies an array of file types that can be displayed, see
`dialog.showOpenDialog` for an example.
If a `callback` is passed, the API call will be asynchronous and the result
will be passed via `callback(filename)`
### `dialog.showMessageBox([browserWindow, ]options[, callback])`
* `browserWindow` BrowserWindow (optional)
* `options` Object
* `type` String (optional) - Can be `"none"`, `"info"`, `"error"`, `"question"` or
`"warning"`. On Windows, "question" displays the same icon as "info", unless
you set an icon using the "icon" option.
* `buttons` String[] (optional) - Array of texts for buttons. On Windows, an empty array
will result in one button labeled "OK".
* `defaultId` Integer (optional) - Index of the button in the buttons array which will
be selected by default when the message box opens.
* `title` String (optional) - Title of the message box, some platforms will not show it.
* `message` String - Content of the message box.
* `detail` String (optional) - Extra information of the message.
* `icon` [NativeImage](native-image.md) (optional)
* `cancelId` Integer (optional) - The value will be returned when user cancels the dialog
instead of clicking the buttons of the dialog. By default it is the index
of the buttons that have "cancel" or "no" as label, or 0 if there is no such
buttons. On macOS and Windows the index of the "Cancel" button will always
be used as `cancelId` even if it is specified.
* `noLink` Boolean (optional) - On Windows Electron will try to figure out which one of
the `buttons` are common buttons (like "Cancel" or "Yes"), and show the
others as command links in the dialog. This can make the dialog appear in
the style of modern Windows apps. If you don't like this behavior, you can
set `noLink` to `true`.
* `callback` Function (optional)
* `response` Number - The index of the button that was clicked
Returns `Integer`, the index of the clicked button, if a callback is provided
it returns undefined.
Shows a message box, it will block the process until the message box is closed.
It returns the index of the clicked button.
The `browserWindow` argument allows the dialog to attach itself to a parent window, making it modal.
If a `callback` is passed, the API call will be asynchronous and the result
will be passed via `callback(response)`.
### `dialog.showErrorBox(title, content)`
* `title` String - The title to display in the error box
* `content` String - The text content to display in the error box
Displays a modal dialog that shows an error message.
This API can be called safely before the `ready` event the `app` module emits,
it is usually used to report errors in early stage of startup. If called
before the app `ready`event on Linux, the message will be emitted to stderr,
and no GUI dialog will appear.
## Sheets
On macOS, dialogs are presented as sheets attached to a window if you provide
a `BrowserWindow` reference in the `browserWindow` parameter, or modals if no
window is provided.
You can call `BrowserWindow.getCurrentWindow().setSheetOffset(offset)` to change
the offset from the window frame where sheets are attached.

View file

@ -0,0 +1,168 @@
## Class: DownloadItem
> Control file downloads from remote sources.
Process: [Main](../glossary.md#main-process)
`DownloadItem` is an `EventEmitter` that represents a download item in Electron.
It is used in `will-download` event of `Session` class, and allows users to
control the download item.
```javascript
// In the main process.
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.webContents.session.on('will-download', (event, item, webContents) => {
// Set the save path, making Electron not to prompt a save dialog.
item.setSavePath('/tmp/save.pdf')
item.on('updated', (event, state) => {
if (state === 'interrupted') {
console.log('Download is interrupted but can be resumed')
} else if (state === 'progressing') {
if (item.isPaused()) {
console.log('Download is paused')
} else {
console.log(`Received bytes: ${item.getReceivedBytes()}`)
}
}
})
item.once('done', (event, state) => {
if (state === 'completed') {
console.log('Download successfully')
} else {
console.log(`Download failed: ${state}`)
}
})
})
```
### Instance Events
#### Event: 'updated'
Returns:
* `event` Event
* `state` String
Emitted when the download has been updated and is not done.
The `state` can be one of following:
* `progressing` - The download is in-progress.
* `interrupted` - The download has interrupted and can be resumed.
#### Event: 'done'
Returns:
* `event` Event
* `state` String
Emitted when the download is in a terminal state. This includes a completed
download, a cancelled download (via `downloadItem.cancel()`), and interrupted
download that can't be resumed.
The `state` can be one of following:
* `completed` - The download completed successfully.
* `cancelled` - The download has been cancelled.
* `interrupted` - The download has interrupted and can not resume.
### Instance Methods
The `downloadItem` object has the following methods:
#### `downloadItem.setSavePath(path)`
* `path` String - Set the save file path of the download item.
The API is only available in session's `will-download` callback function.
If user doesn't set the save path via the API, Electron will use the original
routine to determine the save path(Usually prompts a save dialog).
#### `downloadItem.getSavePath()`
Returns `String` - The save path of the download item. This will be either the path
set via `downloadItem.setSavePath(path)` or the path selected from the shown
save dialog.
#### `downloadItem.pause()`
Pauses the download.
#### `downloadItem.isPaused()`
Returns `Boolean` - Whether the download is paused.
#### `downloadItem.resume()`
Resumes the download that has been paused.
#### `downloadItem.canResume()`
Resumes `Boolean` - Whether the download can resume.
#### `downloadItem.cancel()`
Cancels the download operation.
#### `downloadItem.getURL()`
Returns `String` - The origin url where the item is downloaded from.
#### `downloadItem.getMimeType()`
Returns `String` - The files mime type.
#### `downloadItem.hasUserGesture()`
Returns `Boolean` - Whether the download has user gesture.
#### `downloadItem.getFilename()`
Returns `String` - The file name of the download item.
**Note:** The file name is not always the same as the actual one saved in local
disk. If user changes the file name in a prompted download saving dialog, the
actual name of saved file will be different.
#### `downloadItem.getTotalBytes()`
Returns `Integer` - The total size in bytes of the download item.
If the size is unknown, it returns 0.
#### `downloadItem.getReceivedBytes()`
Returns `Integer` - The received bytes of the download item.
#### `downloadItem.getContentDisposition()`
Returns `String` - The Content-Disposition field from the response
header.
#### `downloadItem.getState()`
Returns `String` - The current state. Can be `progressing`, `completed`, `cancelled` or `interrupted`.
**Note:** The following methods are useful specifically to resume a
`cancelled` item when session is restarted.
#### `downloadItem.getURLChain()`
Returns `String[]` - The complete url chain of the item including any redirects.
#### `downloadItem.getLastModifiedTime()`
Returns `String` - Last-Modified header value.
#### `downloadItem.getETag()`
Returns `String` - ETag header value.
#### `downloadItem.getStartTime()`
Returns `Double` - Number of seconds since the UNIX epoch when the download was
started.

View file

@ -0,0 +1,87 @@
# Environment Variables
> Control application configuration and behavior without changing code.
Certain Electron behaviors are controlled by environment variables because they
are initialized earlier than the command line flags and the app's code.
POSIX shell example:
```bash
$ export ELECTRON_ENABLE_LOGGING=true
$ electron
```
Windows console example:
```powershell
> set ELECTRON_ENABLE_LOGGING=true
> electron
```
## Production Variables
The following environment variables are intended primarily for use at runtime
in packaged Electron applications.
### `GOOGLE_API_KEY`
Electron includes a hardcoded API key for making requests to Google's geocoding
webservice. Because this API key is included in every version of Electron, it
often exceeds its usage quota. To work around this, you can supply your own
Google API key in the environment. Place the following code in your main process
file, before opening any browser windows that will make geocoding requests:
```javascript
process.env.GOOGLE_API_KEY = 'YOUR_KEY_HERE'
```
For instructions on how to acquire a Google API key, visit [this page](https://www.chromium.org/developers/how-tos/api-keys).
By default, a newly generated Google API key may not be allowed to make
geocoding requests. To enable geocoding requests, visit [this page](https://console.developers.google.com/apis/api/geolocation/overview).
### `ELECTRON_NO_ASAR`
Disables ASAR support. This variable is only supported in forked child processes
and spawned child processes that set `ELECTRON_RUN_AS_NODE`.
### `ELECTRON_RUN_AS_NODE`
Starts the process as a normal Node.js process.
### `ELECTRON_NO_ATTACH_CONSOLE` _Windows_
Don't attach to the current console session.
### `ELECTRON_FORCE_WINDOW_MENU_BAR` _Linux_
Don't use the global menu bar on Linux.
## Development Variables
The following environment variables are intended primarily for development and
debugging purposes.
### `ELECTRON_ENABLE_LOGGING`
Prints Chrome's internal logging to the console.
### `ELECTRON_LOG_ASAR_READS`
When Electron reads from an ASAR file, log the read offset and file path to
the system `tmpdir`. The resulting file can be provided to the ASAR module
to optimize file ordering.
### `ELECTRON_ENABLE_STACK_DUMPING`
Prints the stack trace to the console when Electron crashes.
This environment variable will not work if the `crashReporter` is started.
### `ELECTRON_DEFAULT_ERROR_MODE` _Windows_
Shows the Windows's crash dialog when Electron crashes.
This environment variable will not work if the `crashReporter` is started.

View file

@ -0,0 +1,33 @@
# `File` Object
> Use the HTML5 `File` API to work natively with files on the filesystem.
The DOM's File interface provides abstraction around native files in order to
let users work on native files directly with the HTML5 file API. Electron has
added a `path` attribute to the `File` interface which exposes the file's real
path on filesystem.
Example of getting a real path from a dragged-onto-the-app file:
```html
<div id="holder">
Drag your file here
</div>
<script>
const holder = document.getElementById('holder')
holder.ondragover = () => {
return false;
}
holder.ondragleave = holder.ondragend = () => {
return false;
}
holder.ondrop = (e) => {
e.preventDefault()
for (let f of e.dataTransfer.files) {
console.log('File(s) you dragged here: ', f.path)
}
return false;
}
</script>
```

View file

@ -0,0 +1,143 @@
# Frameless Window
> Open a window without toolbars, borders, or other graphical "chrome".
A frameless window is a window that has no
[chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome), the parts of
the window, like toolbars, that are not a part of the web page. These are
options on the [`BrowserWindow`](browser-window.md) class.
## Create a frameless window
To create a frameless window, you need to set `frame` to `false` in
[BrowserWindow](browser-window.md)'s `options`:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
win.show()
```
### Alternatives on macOS
On macOS 10.9 Mavericks and newer, there's an alternative way to specify
a chromeless window. Instead of setting `frame` to `false` which disables
both the titlebar and window controls, you may want to have the title bar
hidden and your content extend to the full window size, yet still preserve
the window controls ("traffic lights") for standard window actions.
You can do so by specifying the new `titleBarStyle` option:
#### `hidden`
Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls (“traffic lights”) in the top left.
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({titleBarStyle: 'hidden'})
win.show()
```
#### `hidden-inset`
Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge.
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({titleBarStyle: 'hidden-inset'})
win.show()
```
## Transparent window
By setting the `transparent` option to `true`, you can also make the frameless
window transparent:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({transparent: true, frame: false})
win.show()
```
### Limitations
* You can not click through the transparent area. We are going to introduce an
API to set window shape to solve this, see
[our issue](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 `blur` filter only applies to the web page, 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).
* On Windows operating systems, transparent windows will not work when DWM is
disabled.
* On Linux users have to put `--enable-transparent-visuals --disable-gpu` in
the command line to disable GPU and allow ARGB to make transparent window,
this is caused by an upstream bug that [alpha channel doesn't work on some
NVidia drivers](https://code.google.com/p/chromium/issues/detail?id=369209) on
Linux.
* On Mac the native window shadow will not be shown on a transparent window.
## Click-through window
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:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setIgnoreMouseEvents(true)
```
## 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:
```html
<body style="-webkit-app-region: drag">
</body>
```
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
button {
-webkit-app-region: no-drag;
}
```
If you're setting just a custom titlebar as draggable, you also need to make all
buttons in titlebar non-draggable.
## Text selection
In a frameless window the dragging behaviour may conflict with selecting text.
For example, when you drag the titlebar you may accidentally select the text on
the titlebar. 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;
}
```
## Context menu
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.
[ignore-mouse-events]: browser-window.md#winsetignoremouseeventsignore

View file

@ -0,0 +1,75 @@
# globalShortcut
> Detect keyboard events when the application does not have keyboard focus.
Process: [Main](../glossary.md#main-process)
The `globalShortcut` module can register/unregister a global keyboard shortcut
with the operating system so that you can customize the operations for various
shortcuts.
**Note:** The shortcut is global; it will work even if the app does
not have the keyboard focus. You should not use this module until the `ready`
event of the app module is emitted.
```javascript
const {app, globalShortcut} = require('electron')
app.on('ready', () => {
// Register a 'CommandOrControl+X' shortcut listener.
const ret = globalShortcut.register('CommandOrControl+X', () => {
console.log('CommandOrControl+X is pressed')
})
if (!ret) {
console.log('registration failed')
}
// Check whether a shortcut is registered.
console.log(globalShortcut.isRegistered('CommandOrControl+X'))
})
app.on('will-quit', () => {
// Unregister a shortcut.
globalShortcut.unregister('CommandOrControl+X')
// Unregister all shortcuts.
globalShortcut.unregisterAll()
})
```
## Methods
The `globalShortcut` module has the following methods:
### `globalShortcut.register(accelerator, callback)`
* `accelerator` [Accelerator](accelerator.md)
* `callback` Function
Registers a global shortcut of `accelerator`. The `callback` is called when
the registered shortcut is pressed by the user.
When the accelerator is already taken by other applications, this call will
silently fail. This behavior is intended by operating systems, since they don't
want applications to fight for global shortcuts.
### `globalShortcut.isRegistered(accelerator)`
* `accelerator` [Accelerator](accelerator.md)
Returns `Boolean` - Whether this application has registered `accelerator`.
When the accelerator is already taken by other applications, this call will
still return `false`. This behavior is intended by operating systems, since they
don't want applications to fight for global shortcuts.
### `globalShortcut.unregister(accelerator)`
* `accelerator` [Accelerator](accelerator.md)
Unregisters the global shortcut of `accelerator`.
### `globalShortcut.unregisterAll()`
Unregisters all of the global shortcuts.

View file

@ -0,0 +1,74 @@
## Class: IncomingMessage
> Handle responses to HTTP/HTTPS requests.
Process: [Main](../glossary.md#main-process)
`IncomingMessage` implements the [Readable Stream](https://nodejs.org/api/stream.html#stream_readable_streams)
interface and is therefore an [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter).
### Instance Events
#### Event: 'data'
Returns:
* `chunk` Buffer - A chunk of response body's data.
The `data` event is the usual method of transferring response data into
applicative code.
#### Event: 'end'
Indicates that response body has ended.
#### Event: 'aborted'
Emitted when a request has been canceled during an ongoing HTTP transaction.
#### Event: 'error'
Returns:
`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
streaming, an `error` event will be emitted on the response object and a `close`
event will subsequently follow on the request object.
### Instance Properties
An `IncomingMessage` instance has the following readable properties:
#### `response.statusCode`
An Integer indicating the HTTP response status code.
#### `response.statusMessage`
A String representing the HTTP status message.
#### `response.headers`
An Object representing the response HTTP headers. The `headers` object is
formatted as follows:
* All header names are lowercased.
* Each header name produces an array-valued property on the headers object.
* Each header value is pushed into the array associated with its header name.
#### `response.httpVersion`
A String indicating the HTTP protocol version number. Typical values are '1.0'
or '1.1'. Additionally `httpVersionMajor` and `httpVersionMinor` are two
Integer-valued readable properties that return respectively the HTTP major and
minor version numbers.
#### `response.httpVersionMajor`
An Integer indicating the HTTP protocol major version number.
#### `response.httpVersionMinor`
An Integer indicating the HTTP protocol minor version number.

View file

@ -0,0 +1,99 @@
# ipcMain
> Communicate asynchronously from the main process to renderer processes.
Process: [Main](../glossary.md#main-process)
The `ipcMain` module is an instance of the
[EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) class. When used in the main
process, it handles asynchronous and synchronous messages sent from a renderer
process (web page). Messages sent from a renderer will be emitted to this
module.
## Sending Messages
It is also possible to send messages from the main process to the renderer
process, see [webContents.send][web-contents-send] for more information.
* When sending a message, the event name is the `channel`.
* To reply a synchronous message, you need to set `event.returnValue`.
* To send an asynchronous back to the sender, you can use
`event.sender.send(...)`.
An example of sending and handling messages between the render and main
processes:
```javascript
// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.sender.send('asynchronous-reply', 'pong')
})
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.returnValue = 'pong'
})
```
```javascript
// In renderer process (web page).
const {ipcRenderer} = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
```
## Methods
The `ipcMain` module has the following method to listen for events:
### `ipcMain.on(channel, listener)`
* `channel` String
* `listener` Function
Listens to `channel`, when a new message arrives `listener` would be called with
`listener(event, args...)`.
### `ipcMain.once(channel, listener)`
* `channel` String
* `listener` Function
Adds a one time `listener` function for the event. This `listener` is invoked
only the next time a message is sent to `channel`, after which it is removed.
### `ipcMain.removeListener(channel, listener)`
* `channel` String
* `listener` Function
Removes the specified `listener` from the listener array for the specified
`channel`.
### `ipcMain.removeAllListeners([channel])`
* `channel` String (optional)
Removes all listeners, or those of the specified `channel`.
## Event object
The `event` object passed to the `callback` has the following methods:
### `event.returnValue`
Set this to the value to be returned in a synchronous message.
### `event.sender`
Returns the `webContents` that sent the message, you can call
`event.sender.send` to reply to the asynchronous message, see
[webContents.send][web-contents-send] for more information.
[web-contents-send]: web-contents.md#webcontentssendchannel-arg1-arg2-

View file

@ -0,0 +1,81 @@
# ipcRenderer
> Communicate asynchronously from a renderer process to the main process.
Process: [Renderer](../glossary.md#renderer-process)
The `ipcRenderer` module is an instance of the
[EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) class. It provides a few
methods so you can send synchronous and asynchronous messages from the render
process (web page) to the main process. You can also receive replies from the
main process.
See [ipcMain](ipc-main.md) for code examples.
## Methods
The `ipcRenderer` module has the following method to listen for events and send messages:
### `ipcRenderer.on(channel, listener)`
* `channel` String
* `listener` Function
Listens to `channel`, when a new message arrives `listener` would be called with
`listener(event, args...)`.
### `ipcRenderer.once(channel, listener)`
* `channel` String
* `listener` Function
Adds a one time `listener` function for the event. This `listener` is invoked
only the next time a message is sent to `channel`, after which it is removed.
### `ipcRenderer.removeListener(channel, listener)`
* `channel` String
* `listener` Function
Removes the specified `listener` from the listener array for the specified
`channel`.
### `ipcRenderer.removeAllListeners([channel])`
* `channel` String (optional)
Removes all listeners, or those of the specified `channel`.
### `ipcRenderer.send(channel[, arg1][, arg2][, ...])`
* `channel` String
* `...args` any[]
Send a message to the main process asynchronously via `channel`, you can also
send arbitrary arguments. Arguments will be serialized in JSON internally and
hence no functions or prototype chain will be included.
The main process handles it by listening for `channel` with `ipcMain` module.
### `ipcRenderer.sendSync(channel[, arg1][, arg2][, ...])`
* `channel` String
* `...args` any[]
Send a message to the main process synchronously via `channel`, you can also
send arbitrary arguments. Arguments will be serialized in JSON internally and
hence no functions or prototype chain will be included.
The main process handles it by listening for `channel` with `ipcMain` module,
and replies by setting `event.returnValue`.
**Note:** Sending a synchronous message will block the whole renderer process,
unless you know what you are doing you should never use it.
### `ipcRenderer.sendToHost(channel[, arg1][, arg2][, ...])`
* `channel` String
* `...args` any[]
Like `ipcRenderer.send` but the event will be sent to the `<webview>` element in
the host page instead of the main process.

View file

@ -0,0 +1,139 @@
# Locales
> Locale values returned by `app.getLocale()`.
Electron uses Chromium's `l10n_util` library to fetch the locale. Possible
values are listed below:
| Language Code | Language Name |
|---------------|---------------|
| af | Afrikaans |
| an | Aragonese |
| ar-AE | Arabic (U.A.E.) |
| ar-IQ | Arabic (Iraq) |
| ar | Arabic (Standard) |
| ar-BH | Arabic (Bahrain) |
| ar-DZ | Arabic (Algeria) |
| ar-EG | Arabic (Egypt) |
| ar-JO | Arabic (Jordan) |
| ar-KW | Arabic (Kuwait) |
| ar-LB | Arabic (Lebanon) |
| ar-LY | Arabic (Libya) |
| ar-MA | Arabic (Morocco) |
| ar-OM | Arabic (Oman) |
| ar-QA | Arabic (Qatar) |
| ar-SA | Arabic (Saudi Arabia) |
| ar-SY | Arabic (Syria) |
| ar-TN | Arabic (Tunisia) |
| ar-YE | Arabic (Yemen) |
| as | Assamese |
| ast | Asturian |
| az | Azerbaijani |
| be | Belarusian |
| bg | Bulgarian |
| bg | Bulgarian |
| bn | Bengali |
| br | Breton |
| bs | Bosnian |
| ca | Catalan |
| ce | Chechen |
| ch | Chamorro |
| co | Corsican |
| cr | Cree |
| cs | Czech |
| cv | Chuvash |
| da | Danish |
| de | German (Standard) |
| de-AT | German (Austria) |
| de-CH | German (Switzerland) |
| de-DE | German (Germany) |
| de-LI | German (Liechtenstein) |
| de-LU | German (Luxembourg) |
| el | Greek |
| en-AU | English (Australia) |
| en-BZ | English (Belize) |
| en | English |
| en-CA | English (Canada) |
| en-GB | English (United Kingdom) |
| en-IE | English (Ireland) |
| en-JM | English (Jamaica) |
| en-NZ | English (New Zealand) |
| en-PH | English (Philippines) |
| en-TT | English (Trinidad & Tobago) |
| en-US | English (United States) |
| en-ZA | English (South Africa) |
| en-ZW | English (Zimbabwe) |
| eo | Esperanto |
| et | Estonian |
| eu | Basque |
| fa | Persian |
| fa | Farsi |
| fa-IR | Persian/Iran |
| fi | Finnish |
| fj | Fijian |
| fo | Faeroese |
| fr-CH | French (Switzerland) |
| fr-FR | French (France) |
| fr-LU | French (Luxembourg) |
| fr-MC | French (Monaco) |
| fr | French (Standard) |
| fr-BE | French (Belgium) |
| fr-CA | French (Canada) |
| fur | Friulian |
| fy | Frisian |
| ga | Irish |
| gd-IE | Gaelic (Irish) |
| gd | Gaelic (Scots) |
| gl | Galacian |
| gu | Gujurati |
| he | Hebrew |
| hi | Hindi |
| hr | Croatian |
| ht | Haitian |
| hu | Hungarian |
| hy | Armenian |
| id | Indonesian |
| is | Icelandic |
| it-CH | Italian (Switzerland) |
| it | Italian (Standard) |
| iu | Inuktitut |
| ja | Japanese |
| ka | Georgian |
| kk | Kazakh |
| km | Khmer |
| kn | Kannada |
| ko | Korean |
| ko-KP | Korean (North Korea) |
| ko-KR | Korean (South Korea) |
| ks | Kashmiri |
| ky | Kirghiz |
| la | Latin |
| lb | Luxembourgish |
| lt | Lithuanian |
| lv | Latvian |
| mi | Maori |
| mk | FYRO Macedonian |
| ml | Malayalam |
| mo | Moldavian |
| mr | Marathi |
| ms | Malay |
| mt | Maltese |
| my | Burmese |
| nb | Norwegian (Bokmal) |
| ne | Nepali |
| ng | Ndonga |
| nl | Dutch (Standard) |
| nl-BE | Dutch (Belgian) |
| nn | Norwegian (Nynorsk) |
| no | Norwegian |
| nv | Navajo |
| oc | Occitan |
| om | Oromo |
| or | Oriya |
| sq | Albanian |
| tlh | Klingon |
| zh-TW | Chinese (Taiwan) |
| zh | Chinese |
| zh-CN | Chinese (PRC) |
| zh-HK | Chinese (Hong Kong) |
| zh-SG | Chinese (Singapore) |

View file

@ -0,0 +1,116 @@
## Class: MenuItem
> Add items to native application menus and context menus.
Process: [Main](../glossary.md#main-process)
See [`Menu`](menu.md) for examples.
### `new MenuItem(options)`
* `options` Object
* `click` Function (optional) - Will be called with
`click(menuItem, browserWindow, event)` when the menu item is clicked.
* `menuItem` MenuItem
* `browserWindow` BrowserWindow
* `event` Event
* `role` String (optional) - Define the action of the menu item, when specified the
`click` property will be ignored.
* `type` String (optional) - Can be `normal`, `separator`, `submenu`, `checkbox` or
`radio`.
* `label` String - (optional)
* `sublabel` String - (optional)
* `accelerator` [Accelerator](accelerator.md) (optional)
* `icon` ([NativeImage](native-image.md) | String) (optional)
* `enabled` Boolean (optional) - If false, the menu item will be greyed out and
unclickable.
* `visible` Boolean (optional) - If false, the menu item will be entirely hidden.
* `checked` Boolean (optional) - Should only be specified for `checkbox` or `radio` type
menu items.
* `submenu` (MenuItemConstructorOptions[] | Menu) (optional) - Should be specified for `submenu` type menu items. If
`submenu` is specified, the `type: 'submenu'` can be omitted. If the value
is not a `Menu` then it will be automatically converted to one using
`Menu.buildFromTemplate`.
* `id` String (optional) - Unique within a single menu. If defined then it can be used
as a reference to this item by the position attribute.
* `position` String (optional) - This field allows fine-grained definition of the
specific location within a given menu.
It is best to specify `role` for any menu item that matches a standard role,
rather than trying to manually implement the behavior in a `click` function.
The built-in `role` behavior will give the best native experience.
The `label` and `accelerator` are optional when using a `role` and will default
to appropriate values for each platform.
The `role` property can have following values:
* `undo`
* `redo`
* `cut`
* `copy`
* `paste`
* `pasteandmatchstyle`
* `selectall`
* `delete`
* `minimize` - Minimize current window
* `close` - Close current window
* `quit`- Quit the application
* `reload` - Reload the current window
* `toggledevtools` - Toggle developer tools in the current window
* `togglefullscreen`- Toggle full screen mode on the current window
* `resetzoom` - Reset the focused page's zoom level to the original size
* `zoomin` - Zoom in the focused page by 10%
* `zoomout` - Zoom out the focused page by 10%
On macOS `role` can also have following additional values:
* `about` - Map to the `orderFrontStandardAboutPanel` action
* `hide` - Map to the `hide` action
* `hideothers` - Map to the `hideOtherApplications` action
* `unhide` - Map to the `unhideAllApplications` action
* `startspeaking` - Map to the `startSpeaking` action
* `stopspeaking` - Map to the `stopSpeaking` action
* `front` - Map to the `arrangeInFront` action
* `zoom` - Map to the `performZoom` action
* `window` - The submenu is a "Window" menu
* `help` - The submenu is a "Help" menu
* `services` - The submenu is a "Services" menu
When specifying `role` on macOS, `label` and `accelerator` are the only options
that will affect the MenuItem. All other options will be ignored.
### Instance Properties
The following properties are available on instances of `MenuItem`:
#### `menuItem.enabled`
A Boolean indicating whether the item is enabled, this property can be
dynamically changed.
#### `menuItem.visible`
A Boolean indicating whether the item is visible, this property can be
dynamically changed.
#### `menuItem.checked`
A Boolean indicating whether the item is checked, this property can be
dynamically changed.
A `checkbox` menu item will toggle the `checked` property on and off when
selected.
A `radio` menu item will turn on its `checked` property when clicked, and
will turn off that property for all adjacent items in the same menu.
You can add a `click` function for additional behavior.
#### `menuItem.label`
A String representing the menu items visible label
#### `menuItem.click`
A Function that is fired when the MenuItem recieves a click event

View file

@ -0,0 +1,403 @@
## Class: Menu
> Create native application menus and context menus.
Process: [Main](../glossary.md#main-process)
### `new Menu()`
Creates a new menu.
### Static Methods
The `menu` class has the following static methods:
#### `Menu.setApplicationMenu(menu)`
* `menu` Menu
Sets `menu` as the application menu on macOS. On Windows and Linux, the `menu`
will be set as each window's top menu.
**Note:** This API has to be called after the `ready` event of `app` module.
#### `Menu.getApplicationMenu()`
Returns `Menu` - The application menu, if set, or `null`, if not set.
#### `Menu.sendActionToFirstResponder(action)` _macOS_
* `action` String
Sends the `action` to the first responder of application. This is used for
emulating default Cocoa menu behaviors, usually you would just use the
`role` property of `MenuItem`.
See the [macOS Cocoa Event Handling Guide](https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/EventOverview/EventArchitecture/EventArchitecture.html#//apple_ref/doc/uid/10000060i-CH3-SW7)
for more information on macOS' native actions.
#### `Menu.buildFromTemplate(template)`
* `template` MenuItemConstructorOptions[]
Returns `Menu`
Generally, the `template` is just an array of `options` for constructing a
[MenuItem](menu-item.md). The usage can be referenced above.
You can also attach other fields to the element of the `template` and they
will become properties of the constructed menu items.
### Instance Methods
The `menu` object has the following instance methods:
#### `menu.popup([browserWindow, x, y, positioningItem])`
* `browserWindow` BrowserWindow (optional) - Default is `BrowserWindow.getFocusedWindow()`.
* `x` Number (optional) - Default is the current mouse cursor position.
* `y` Number (**required** if `x` is used) - Default is the current mouse cursor position.
* `positioningItem` Number (optional) _macOS_ - The index of the menu item to
be positioned under the mouse cursor at the specified coordinates. Default is
-1.
Pops up this menu as a context menu in the `browserWindow`.
#### `menu.append(menuItem)`
* `menuItem` MenuItem
Appends the `menuItem` to the menu.
#### `menu.insert(pos, menuItem)`
* `pos` Integer
* `menuItem` MenuItem
Inserts the `menuItem` to the `pos` position of the menu.
### Instance Properties
`menu` objects also have the following properties:
#### `menu.items`
A MenuItem[] array containing the menu's items.
Each `Menu` consists of multiple [`MenuItem`](menu-item.md)s and each `MenuItem`
can have a submenu.
## Examples
The `Menu` class is only available in the main process, but you can also use it
in the render process via the [`remote`](remote.md) module.
### Main process
An example of creating the application menu in the main process with the
simple template API:
```javascript
const {app, Menu} = require('electron')
const template = [
{
label: 'Edit',
submenu: [
{
role: 'undo'
},
{
role: 'redo'
},
{
type: 'separator'
},
{
role: 'cut'
},
{
role: 'copy'
},
{
role: 'paste'
},
{
role: 'pasteandmatchstyle'
},
{
role: 'delete'
},
{
role: 'selectall'
}
]
},
{
label: 'View',
submenu: [
{
role: 'reload'
},
{
role: 'toggledevtools'
},
{
type: 'separator'
},
{
role: 'resetzoom'
},
{
role: 'zoomin'
},
{
role: 'zoomout'
},
{
type: 'separator'
},
{
role: 'togglefullscreen'
}
]
},
{
role: 'window',
submenu: [
{
role: 'minimize'
},
{
role: 'close'
}
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click () { require('electron').shell.openExternal('http://electron.atom.io') }
}
]
}
]
if (process.platform === 'darwin') {
template.unshift({
label: app.getName(),
submenu: [
{
role: 'about'
},
{
type: 'separator'
},
{
role: 'services',
submenu: []
},
{
type: 'separator'
},
{
role: 'hide'
},
{
role: 'hideothers'
},
{
role: 'unhide'
},
{
type: 'separator'
},
{
role: 'quit'
}
]
})
// Edit menu.
template[1].submenu.push(
{
type: 'separator'
},
{
label: 'Speech',
submenu: [
{
role: 'startspeaking'
},
{
role: 'stopspeaking'
}
]
}
)
// Window menu.
template[3].submenu = [
{
label: 'Close',
accelerator: 'CmdOrCtrl+W',
role: 'close'
},
{
label: 'Minimize',
accelerator: 'CmdOrCtrl+M',
role: 'minimize'
},
{
label: 'Zoom',
role: 'zoom'
},
{
type: 'separator'
},
{
label: 'Bring All to Front',
role: 'front'
}
]
}
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
```
### Render process
Below is an example of creating a menu dynamically in a web page
(render process) by using the [`remote`](remote.md) module, and showing it when
the user right clicks the page:
```html
<!-- index.html -->
<script>
const {remote} = require('electron')
const {Menu, MenuItem} = remote
const menu = new Menu()
menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }}))
menu.append(new MenuItem({type: 'separator'}))
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
menu.popup(remote.getCurrentWindow())
}, false)
</script>
```
## Notes on macOS Application Menu
macOS has a completely different style of application menu from Windows and
Linux. Here are some notes on making your app's menu more native-like.
### Standard Menus
On macOS there are many system-defined standard menus, like the `Services` and
`Windows` menus. To make your menu a standard menu, you should set your menu's
`role` to one of following and Electron will recognize them and make them
become standard menus:
* `window`
* `help`
* `services`
### Standard Menu Item Actions
macOS has provided standard actions for some menu items, like `About xxx`,
`Hide xxx`, and `Hide Others`. To set the action of a menu item to a standard
action, you should set the `role` attribute of the menu item.
### Main Menu's Name
On macOS the label of the application menu's first item is always your app's
name, no matter what label you set. To change it, modify your app bundle's
`Info.plist` file. See
[About Information Property List Files][AboutInformationPropertyListFiles]
for more information.
## Setting Menu for Specific Browser Window (*Linux* *Windows*)
The [`setMenu` method][setMenu] of browser windows can set the menu of certain
browser windows.
## Menu Item Position
You can make use of `position` and `id` to control how the item will be placed
when building a menu with `Menu.buildFromTemplate`.
The `position` attribute of `MenuItem` has the form `[placement]=[id]`, where
`placement` is one of `before`, `after`, or `endof` and `id` is the unique ID of
an existing item in the menu:
* `before` - Inserts this item before the id referenced item. If the
referenced item doesn't exist the item will be inserted at the end of
the menu.
* `after` - Inserts this item after id referenced item. If the referenced
item doesn't exist the item will be inserted at the end of the menu.
* `endof` - Inserts this item at the end of the logical group containing
the id referenced item (groups are created by separator items). If
the referenced item doesn't exist, a new separator group is created with
the given id and this item is inserted after that separator.
When an item is positioned, all un-positioned items are inserted after
it until a new item is positioned. So if you want to position a group of
menu items in the same location you only need to specify a position for
the first item.
### Examples
Template:
```javascript
[
{label: '4', id: '4'},
{label: '5', id: '5'},
{label: '1', id: '1', position: 'before=4'},
{label: '2', id: '2'},
{label: '3', id: '3'}
]
```
Menu:
```
- 1
- 2
- 3
- 4
- 5
```
Template:
```javascript
[
{label: 'a', position: 'endof=letters'},
{label: '1', position: 'endof=numbers'},
{label: 'b', position: 'endof=letters'},
{label: '2', position: 'endof=numbers'},
{label: 'c', position: 'endof=letters'},
{label: '3', position: 'endof=numbers'}
]
```
Menu:
```
- ---
- a
- b
- c
- ---
- 1
- 2
- 3
```
[AboutInformationPropertyListFiles]: https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html
[setMenu]: https://github.com/electron/electron/blob/master/docs/api/browser-window.md#winsetmenumenu-linux-windows

View file

@ -0,0 +1,256 @@
# nativeImage
> Create tray, dock, and application icons using PNG or JPG files.
Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer-process)
In Electron, for the APIs that take images, you can pass either file paths or
`NativeImage` instances. An empty image will be used when `null` is passed.
For example, when creating a tray or setting a window's icon, you can pass an
image file path as a `String`:
```javascript
const {BrowserWindow, Tray} = require('electron')
const appIcon = new Tray('/Users/somebody/images/icon.png')
let win = new BrowserWindow({icon: '/Users/somebody/images/window.png'})
console.log(appIcon, win)
```
Or read the image from the clipboard which returns a `NativeImage`:
```javascript
const {clipboard, Tray} = require('electron')
const image = clipboard.readImage()
const appIcon = new Tray(image)
console.log(appIcon)
```
## Supported Formats
Currently `PNG` and `JPEG` image formats are supported. `PNG` is recommended
because of its support for transparency and lossless compression.
On Windows, you can also load `ICO` icons from file paths. For best visual
quality it is recommended to include at least the following sizes in the:
* Small icon
* 16x16 (100% DPI scale)
* 20x20 (125% DPI scale)
* 24x24 (150% DPI scale)
* 32x32 (200% DPI scale)
* Large icon
* 32x32 (100% DPI scale)
* 40x40 (125% DPI scale)
* 48x48 (150% DPI scale)
* 64x64 (200% DPI scale)
* 256x256
Check the *Size requirements* section in [this article][icons].
[icons]:https://msdn.microsoft.com/en-us/library/windows/desktop/dn742485(v=vs.85).aspx
## High Resolution Image
On platforms that have high-DPI support such as Apple Retina displays, you can
append `@2x` after image's base filename to mark it as a high resolution image.
For example if `icon.png` is a normal image that has standard resolution, then
`icon@2x.png` will be treated as a high resolution image that has double DPI
density.
If you want to support displays with different DPI densities at the same time,
you can put images with different sizes in the same folder and use the filename
without DPI suffixes. For example:
```text
images/
├── icon.png
├── icon@2x.png
└── icon@3x.png
```
```javascript
const {Tray} = require('electron')
let appIcon = new Tray('/Users/somebody/images/icon.png')
console.log(appIcon)
```
Following suffixes for DPI are also supported:
* `@1x`
* `@1.25x`
* `@1.33x`
* `@1.4x`
* `@1.5x`
* `@1.8x`
* `@2x`
* `@2.5x`
* `@3x`
* `@4x`
* `@5x`
## Template Image
Template images consist of black and clear colors (and an alpha channel).
Template images are not intended to be used as standalone images and are usually
mixed with other content to create the desired final appearance.
The most common case is to use template images for a menu bar icon so it can
adapt to both light and dark menu bars.
**Note:** Template image is only supported on macOS.
To mark an image as a template image, its filename should end with the word
`Template`. For example:
* `xxxTemplate.png`
* `xxxTemplate@2x.png`
## Methods
The `nativeImage` module has the following methods, all of which return
an instance of the `NativeImage` class:
### `nativeImage.createEmpty()`
Returns `NativeImage`
Creates an empty `NativeImage` instance.
### `nativeImage.createFromPath(path)`
* `path` String
Returns `NativeImage`
Creates a new `NativeImage` instance from a file located at `path`. This method
returns an empty image if the `path` does not exist, cannot be read, or is not
a valid image.
```javascript
const nativeImage = require('electron').nativeImage
let image = nativeImage.createFromPath('/Users/somebody/images/icon.png')
console.log(image)
```
### `nativeImage.createFromBuffer(buffer[, options])`
* `buffer` [Buffer][buffer]
* `options` Object (optional)
* `width` Integer (optional) - Required for bitmap buffers.
* `height` Integer (optional) - Required for bitmap buffers.
* `scaleFactor` Double (optional) - Defaults to 1.0.
Returns `NativeImage`
Creates a new `NativeImage` instance from `buffer`.
### `nativeImage.createFromDataURL(dataURL)`
* `dataURL` String
Creates a new `NativeImage` instance from `dataURL`.
## Class: NativeImage
> Natively wrap images such as tray, dock, and application icons.
Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer-process)
### Instance Methods
The following methods are available on instances of the `NativeImage` class:
#### `image.toPNG()`
Returns `Buffer` - A [Buffer][buffer] that contains the image's `PNG` encoded data.
#### `image.toJPEG(quality)`
* `quality` Integer (**required**) - Between 0 - 100.
Returns `Buffer` - A [Buffer][buffer] that contains the image's `JPEG` encoded data.
#### `image.toBitmap()`
Returns `Buffer` - A [Buffer][buffer] that contains a copy of the image's raw bitmap pixel
data.
#### `image.toDataURL()`
Returns `String` - The data URL of the image.
#### `image.getBitmap()`
Returns `Buffer` - A [Buffer][buffer] that contains the image's raw bitmap pixel data.
The difference between `getBitmap()` and `toBitmap()` is, `getBitmap()` does not
copy the bitmap data, so you have to use the returned Buffer immediately in
current event loop tick, otherwise the data might be changed or destroyed.
#### `image.getNativeHandle()` _macOS_
Returns `Buffer` - A [Buffer][buffer] that stores C pointer to underlying native handle of
the image. On macOS, a pointer to `NSImage` instance would be returned.
Notice that the returned pointer is a weak pointer to the underlying native
image instead of a copy, so you _must_ ensure that the associated
`nativeImage` instance is kept around.
#### `image.isEmpty()`
Returns `Boolean` - Whether the image is empty.
#### `image.getSize()`
Returns `Object`:
* `width` Integer
* `height` Integer
#### `image.setTemplateImage(option)`
* `option` Boolean
Marks the image as a template image.
#### `image.isTemplateImage()`
Returns `Boolean` - Whether the image is a template image.
#### `image.crop(rect)`
* `rect` Object - The area of the image to crop
* `x` Integer
* `y` Integer
* `width` Integer
* `height` Integer
Returns `NativeImage` - The cropped image.
#### `image.resize(options)`
* `options` Object
* `width` Integer (optional)
* `height` Integer (optional)
* `quality` String (optional) - The desired quality of the resize image.
Possible values are `good`, `better` or `best`. The default is `best`.
These values express a desired quality/speed tradeoff. They are translated
into an algorithm-specific method that depends on the capabilities
(CPU, GPU) of the underlying platform. It is possible for all three methods
to be mapped to the same algorithm on a given platform.
Returns `NativeImage` - The resized image.
If only the `height` or the `width` are specified then the current aspect ratio
will be preserved in the resized image.
#### `image.getAspectRatio()`
Returns `Float` - The image's aspect ratio.
[buffer]: https://nodejs.org/api/buffer.html#buffer_class_buffer

View file

@ -0,0 +1,71 @@
# net
> Issue HTTP/HTTPS requests using Chromium's native networking library
Process: [Main](../glossary.md#main-process)
The `net` module is a client-side API for issuing HTTP(S) requests. It is
similar to the [HTTP](https://nodejs.org/api/http.html) and
[HTTPS](https://nodejs.org/api/https.html) modules of Node.js but uses
Chromium's native networking library instead of the Node.js implementation,
offering better support for web proxies.
The following is a non-exhaustive list of why you may consider using the `net`
module instead of the native Node.js modules:
* Automatic management of system proxy configuration, support of the wpad
protocol and proxy pac configuration files.
* Automatic tunneling of HTTPS requests.
* Support for authenticating proxies using basic, digest, NTLM, Kerberos or
negotiate authentication schemes.
* Support for traffic monitoring proxies: Fiddler-like proxies used for access
control and monitoring.
The `net` module API has been specifically designed to mimic, as closely as
possible, the familiar Node.js API. The API components including classes,
methods, properties and event names are similar to those commonly used in
Node.js.
For instance, the following example quickly shows how the `net` API might be
used:
```javascript
const {app} = require('electron')
app.on('ready', () => {
const {net} = require('electron')
const request = net.request('https://github.com')
request.on('response', (response) => {
console.log(`STATUS: ${response.statusCode}`)
console.log(`HEADERS: ${JSON.stringify(response.headers)}`)
response.on('data', (chunk) => {
console.log(`BODY: ${chunk}`)
})
response.on('end', () => {
console.log('No more data in response.')
})
})
request.end()
})
```
By the way, it is almost identical to how you would normally use the
[HTTP](https://nodejs.org/api/http.html)/[HTTPS](https://nodejs.org/api/https.html)
modules of Node.js
The `net` API can be used only after the application emits the `ready` event.
Trying to use the module before the `ready` event will throw an error.
## Methods
The `net` module has the following methods:
### `net.request(options)`
* `options` (Object | String) - The `ClientRequest` constructor options.
Returns [`ClientRequest`](./client-request.md)
Creates a [`ClientRequest`](./client-request.md) instance using the provided
`options` which are directly forwarded to the `ClientRequest` constructor.
The `net.request` method would be used to issue both secure and insecure HTTP
requests according to the specified protocol scheme in the `options` object.

View file

@ -0,0 +1,41 @@
# powerMonitor
> Monitor power state changes.
Process: [Main](../glossary.md#main-process)
You cannot require or use this module until the `ready` event of the `app`
module is emitted.
For example:
```javascript
const electron = require('electron')
const {app} = electron
app.on('ready', () => {
electron.powerMonitor.on('suspend', () => {
console.log('The system is going to sleep')
})
})
```
## Events
The `powerMonitor` module emits the following events:
### Event: 'suspend'
Emitted when the system is suspending.
### Event: 'resume'
Emitted when system is resuming.
### Event: 'on-ac' _Windows_
Emitted when the system changes to AC power.
### Event: 'on-battery' _Windows_
Emitted when system changes to battery power.

View file

@ -0,0 +1,56 @@
# powerSaveBlocker
> Block the system from entering low-power (sleep) mode.
Process: [Main](../glossary.md#main-process)
For example:
```javascript
const {powerSaveBlocker} = require('electron')
const id = powerSaveBlocker.start('prevent-display-sleep')
console.log(powerSaveBlocker.isStarted(id))
powerSaveBlocker.stop(id)
```
## Methods
The `powerSaveBlocker` module has the following methods:
### `powerSaveBlocker.start(type)`
* `type` String - Power save blocker type.
* `prevent-app-suspension` - Prevent the application from being suspended.
Keeps system active but allows screen to be turned off. Example use cases:
downloading a file or playing audio.
* `prevent-display-sleep` - Prevent the display from going to sleep. Keeps
system and screen active. Example use case: playing video.
Returns `Integer` - The blocker ID that is assigned to this power blocker
Starts preventing the system from entering lower-power mode. Returns an integer
identifying the power save blocker.
**Note:** `prevent-display-sleep` has higher precedence over
`prevent-app-suspension`. Only the highest precedence type takes effect. In
other words, `prevent-display-sleep` always takes precedence over
`prevent-app-suspension`.
For example, an API calling A requests for `prevent-app-suspension`, and
another calling B requests for `prevent-display-sleep`. `prevent-display-sleep`
will be used until B stops its request. After that, `prevent-app-suspension`
is used.
### `powerSaveBlocker.stop(id)`
* `id` Integer - The power save blocker id returned by `powerSaveBlocker.start`.
Stops the specified power save blocker.
### `powerSaveBlocker.isStarted(id)`
* `id` Integer - The power save blocker id returned by `powerSaveBlocker.start`.
Returns `Boolean` - Whether the corresponding `powerSaveBlocker` has started.

View file

@ -0,0 +1,118 @@
# process
> Extensions to process object.
Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer-process)
Electron's `process` object is extended from the
[Node.js `process` object](https://nodejs.org/api/process.html).
It adds the following events, properties, and methods:
## Events
### Event: 'loaded'
Emitted when Electron has loaded its internal initialization script and is
beginning to load the web page or the main script.
It can be used by the preload script to add removed Node global symbols back to
the global scope when node integration is turned off:
```javascript
// preload.js
const _setImmediate = setImmediate
const _clearImmediate = clearImmediate
process.once('loaded', () => {
global.setImmediate = _setImmediate
global.clearImmediate = _clearImmediate
})
```
## Properties
### `process.noAsar`
Setting this to `true` can disable the support for `asar` archives in Node's
built-in modules.
### `process.type`
Current process's type, can be `"browser"` (i.e. main process) or `"renderer"`.
### `process.versions.electron`
Electron's version string.
### `process.versions.chrome`
Chrome's version string.
### `process.resourcesPath`
Path to the resources directory.
### `process.mas`
For Mac App Store build, this property is `true`, for other builds it is
`undefined`.
### `process.windowsStore`
If the app is running as a Windows Store app (appx), this property is `true`,
for otherwise it is `undefined`.
### `process.defaultApp`
When app is started by being passed as parameter to the default app, this
property is `true` in the main process, otherwise it is `undefined`.
## Methods
The `process` object has the following method:
### `process.crash()`
Causes the main thread of the current process crash.
### `process.hang()`
Causes the main thread of the current process hang.
### `process.setFdLimit(maxDescriptors)` _macOS_ _Linux_
* `maxDescriptors` Integer
Sets the file descriptor soft limit to `maxDescriptors` or the OS hard
limit, whichever is lower for the current process.
### `process.getProcessMemoryInfo()`
Returns `Object`:
* `workingSetSize` Integer - The amount of memory currently pinned to actual physical
RAM.
* `peakWorkingSetSize` Integer - The maximum amount of memory that has ever been pinned
to actual physical RAM.
* `privateBytes` Integer - The amount of memory not shared by other processes, such as
JS heap or HTML content.
* `sharedBytes` Integer - The amount of memory shared between processes, typically
memory consumed by the Electron code itself
Returns an object giving memory usage statistics about the current process. Note
that all statistics are reported in Kilobytes.
### `process.getSystemMemoryInfo()`
Returns `Object`:
* `total` Integer - The total amount of physical memory in Kilobytes available to the
system.
* `free` Integer - The total amount of memory not being used by applications or disk
cache.
* `swapTotal` Integer - The total amount of swap memory in Kilobytes available to the
system. _Windows_ _Linux_
* `swapFree` Integer - The free amount of swap memory in Kilobytes available to the
system. _Windows_ _Linux_
Returns an object giving memory usage statistics about the entire system. Note
that all statistics are reported in Kilobytes.

View file

@ -0,0 +1,297 @@
# protocol
> Register a custom protocol and intercept existing protocol requests.
Process: [Main](../glossary.md#main-process)
An example of implementing a protocol that has the same effect as the
`file://` protocol:
```javascript
const {app, protocol} = require('electron')
const path = require('path')
app.on('ready', () => {
protocol.registerFileProtocol('atom', (request, callback) => {
const url = request.url.substr(7)
callback({path: path.normalize(`${__dirname}/${url}`)})
}, (error) => {
if (error) console.error('Failed to register protocol')
})
})
```
**Note:** All methods unless specified can only be used after the `ready` event
of the `app` module gets emitted.
## Methods
The `protocol` module has the following methods:
### `protocol.registerStandardSchemes(schemes[, options])`
* `schemes` String[] - Custom schemes to be registered as standard schemes.
* `options` Object (optional)
* `secure` Boolean (optional) - `true` to register the scheme as secure.
Default `false`.
A standard scheme adheres to what RFC 3986 calls [generic URI
syntax](https://tools.ietf.org/html/rfc3986#section-3). For example `http` and
`https` are standard schemes, while `file` is not.
Registering a scheme as standard, will allow relative and absolute resources to
be resolved correctly when served. Otherwise the scheme will behave like the
`file` protocol, but without the ability to resolve relative URLs.
For example when you load following page with custom protocol without
registering it as standard scheme, the image will not be loaded because
non-standard schemes can not recognize relative URLs:
```html
<body>
<img src='test.png'>
</body>
```
Registering a scheme as standard will allow access to files through the
[FileSystem API][file-system-api]. Otherwise the renderer will throw a security
error for the scheme.
By default web storage apis (localStorage, sessionStorage, webSQL, indexedDB, cookies)
are disabled for non standard schemes. So in general if you want to register a
custom protocol to replace the `http` protocol, you have to register it as a standard scheme:
```javascript
const {app, protocol} = require('electron')
protocol.registerStandardSchemes(['atom'])
app.on('ready', () => {
protocol.registerHttpProtocol('atom', '...')
})
```
**Note:** This method can only be used before the `ready` event of the `app`
module gets emitted.
### `protocol.registerServiceWorkerSchemes(schemes)`
* `schemes` String[] - Custom schemes to be registered to handle service workers.
### `protocol.registerFileProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `filePath` String (optional)
* `completion` Function (optional)
* `error` Error
Registers a protocol of `scheme` that will send the file as a response. The
`handler` will be called with `handler(request, callback)` when a `request` is
going to be created with `scheme`. `completion` will be called with
`completion(null)` when `scheme` is successfully registered or
`completion(error)` when failed.
To handle the `request`, the `callback` should be called with either the file's
path or an object that has a `path` property, e.g. `callback(filePath)` or
`callback({path: filePath})`.
When `callback` is called with nothing, a number, or an object that has an
`error` property, the `request` will fail with the `error` number you
specified. For the available error numbers you can use, please see the
[net error list][net-error].
By default the `scheme` is treated like `http:`, which is parsed differently
than protocols that follow the "generic URI syntax" like `file:`, so you
probably want to call `protocol.registerStandardSchemes` to have your scheme
treated as a standard scheme.
### `protocol.registerBufferProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `buffer` (Buffer | [MimeTypedBuffer](structures/mime-typed-buffer.md)) (optional)
* `completion` Function (optional)
* `error` Error
Registers a protocol of `scheme` that will send a `Buffer` as a response.
The usage is the same with `registerFileProtocol`, except that the `callback`
should be called with either a `Buffer` object or an object that has the `data`,
`mimeType`, and `charset` properties.
Example:
```javascript
const {protocol} = require('electron')
protocol.registerBufferProtocol('atom', (request, callback) => {
callback({mimeType: 'text/html', data: new Buffer('<h5>Response</h5>')})
}, (error) => {
if (error) console.error('Failed to register protocol')
})
```
### `protocol.registerStringProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `data` String (optional)
* `completion` Function (optional)
* `error` Error
Registers a protocol of `scheme` that will send a `String` as a response.
The usage is the same with `registerFileProtocol`, except that the `callback`
should be called with either a `String` or an object that has the `data`,
`mimeType`, and `charset` properties.
### `protocol.registerHttpProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `redirectRequest` Object
* `url` String
* `method` String
* `session` Object (optional)
* `uploadData` Object (optional)
* `contentType` String - MIME type of the content.
* `data` String - Content to be sent.
* `completion` Function (optional)
* `error` Error
Registers a protocol of `scheme` that will send an HTTP request as a response.
The usage is the same with `registerFileProtocol`, except that the `callback`
should be called with a `redirectRequest` object that has the `url`, `method`,
`referrer`, `uploadData` and `session` properties.
By default the HTTP request will reuse the current session. If you want the
request to have a different session you should set `session` to `null`.
For POST requests the `uploadData` object must be provided.
### `protocol.unregisterProtocol(scheme[, completion])`
* `scheme` String
* `completion` Function (optional)
* `error` Error
Unregisters the custom protocol of `scheme`.
### `protocol.isProtocolHandled(scheme, callback)`
* `scheme` String
* `callback` Function
* `error` Error
The `callback` will be called with a boolean that indicates whether there is
already a handler for `scheme`.
### `protocol.interceptFileProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `filePath` String
* `completion` Function (optional)
* `error` Error
Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
which sends a file as a response.
### `protocol.interceptStringProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `data` String (optional)
* `completion` Function (optional)
* `error` Error
Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
which sends a `String` as a response.
### `protocol.interceptBufferProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `buffer` Buffer (optional)
* `completion` Function (optional)
* `error` Error
Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
which sends a `Buffer` as a response.
### `protocol.interceptHttpProtocol(scheme, handler[, completion])`
* `scheme` String
* `handler` Function
* `request` Object
* `url` String
* `referrer` String
* `method` String
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `redirectRequest` Object
* `url` String
* `method` String
* `session` Object (optional)
* `uploadData` Object (optional)
* `contentType` String - MIME type of the content.
* `data` String - Content to be sent.
* `completion` Function (optional)
* `error` Error
Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
which sends a new HTTP request as a response.
### `protocol.uninterceptProtocol(scheme[, completion])`
* `scheme` String
* `completion` Function (optional)
* `error` Error
Remove the interceptor installed for `scheme` and restore its original handler.
[net-error]: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
[file-system-api]: https://developer.mozilla.org/en-US/docs/Web/API/LocalFileSystem

View file

@ -0,0 +1,169 @@
# remote
> Use main process modules from the renderer process.
Process: [Renderer](../glossary.md#renderer-process)
The `remote` module provides a simple way to do inter-process communication
(IPC) between the renderer process (web page) and the main process.
In Electron, GUI-related modules (such as `dialog`, `menu` etc.) are only
available in the main process, not in the renderer process. In order to use them
from the renderer process, the `ipc` module is necessary to send inter-process
messages to the main process. With the `remote` module, you can invoke methods
of the main process object without explicitly sending inter-process messages,
similar to Java's [RMI][rmi]. An example of creating a browser window from a
renderer process:
```javascript
const {BrowserWindow} = require('electron').remote
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('https://github.com')
```
**Note:** For the reverse (access the renderer process from the main process),
you can use [webContents.executeJavascript](web-contents.md#contentsexecutejavascriptcode-usergesture-callback).
## Remote Objects
Each object (including functions) returned by the `remote` module represents an
object in the main process (we call it a remote object or remote function).
When you invoke methods of a remote object, call a remote function, or create
a new object with the remote constructor (function), you are actually sending
synchronous inter-process messages.
In the example above, both `BrowserWindow` and `win` were remote objects and
`new BrowserWindow` didn't create a `BrowserWindow` object in the renderer
process. Instead, it created a `BrowserWindow` object in the main process and
returned the corresponding remote object in the renderer process, namely the
`win` object.
**Note:** Only [enumerable properties][enumerable-properties] which are present
when the remote object is first referenced are accessible via remote.
**Note:** Arrays and Buffers are copied over IPC when accessed via the `remote`
module. Modifying them in the renderer process does not modify them in the main
process and vice versa.
## Lifetime of Remote Objects
Electron makes sure that as long as the remote object in the renderer process
lives (in other words, has not been garbage collected), the corresponding object
in the main process will not be released. When the remote object has been
garbage collected, the corresponding object in the main process will be
dereferenced.
If the remote object is leaked in the renderer process (e.g. stored in a map but
never freed), the corresponding object in the main process will also be leaked,
so you should be very careful not to leak remote objects.
Primary value types like strings and numbers, however, are sent by copy.
## Passing callbacks to the main process
Code in the main process can accept callbacks from the renderer - for instance
the `remote` module - but you should be extremely careful when using this
feature.
First, in order to avoid deadlocks, the callbacks passed to the main process
are called asynchronously. You should not expect the main process to
get the return value of the passed callbacks.
For instance you can't use a function from the renderer process in an
`Array.map` called in the main process:
```javascript
// main process mapNumbers.js
exports.withRendererCallback = (mapper) => {
return [1, 2, 3].map(mapper)
}
exports.withLocalCallback = () => {
return [1, 2, 3].map(x => x + 1)
}
```
```javascript
// renderer process
const mapNumbers = require('electron').remote.require('./mapNumbers')
const withRendererCb = mapNumbers.withRendererCallback(x => x + 1)
const withLocalCb = mapNumbers.withLocalCallback()
console.log(withRendererCb, withLocalCb)
// [undefined, undefined, undefined], [2, 3, 4]
```
As you can see, the renderer callback's synchronous return value was not as
expected, and didn't match the return value of an identical callback that lives
in the main process.
Second, the callbacks passed to the main process will persist until the
main process garbage-collects them.
For example, the following code seems innocent at first glance. It installs a
callback for the `close` event on a remote object:
```javascript
require('electron').remote.getCurrentWindow().on('close', () => {
// window was closed...
})
```
But remember the callback is referenced by the main process until you
explicitly uninstall it. If you do not, each time you reload your window the
callback will be installed again, leaking one callback for each restart.
To make things worse, since the context of previously installed callbacks has
been released, exceptions will be raised in the main process when the `close`
event is emitted.
To avoid this problem, ensure you clean up any references to renderer callbacks
passed to the main process. This involves cleaning up event handlers, or
ensuring the main process is explicitly told to deference callbacks that came
from a renderer process that is exiting.
## Accessing built-in modules in the main process
The built-in modules in the main process are added as getters in the `remote`
module, so you can use them directly like the `electron` module.
```javascript
const app = require('electron').remote.app
console.log(app)
```
## Methods
The `remote` module has the following methods:
### `remote.require(module)`
* `module` String
Returns `any` - The object returned by `require(module)` in the main process.
### `remote.getCurrentWindow()`
Returns [`BrowserWindow`](browser-window.md) - The window to which this web page
belongs.
### `remote.getCurrentWebContents()`
Returns [`WebContents`](web-contents.md) - The web contents of this web page.
### `remote.getGlobal(name)`
* `name` String
Returns `any` - The global variable of `name` (e.g. `global[name]`) in the main
process.
## Properties
### `remote.process`
The `process` object in the main process. This is the same as
`remote.getGlobal('process')` but is cached.
[rmi]: http://en.wikipedia.org/wiki/Java_remote_method_invocation
[enumerable-properties]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties

View file

@ -0,0 +1,122 @@
# screen
> Retrieve information about screen size, displays, cursor position, etc.
Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer-process)
You cannot require or use this module until the `ready` event of the `app`
module is emitted.
`screen` is an [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter).
**Note:** In the renderer / DevTools, `window.screen` is a reserved DOM
property, so writing `let {screen} = require('electron')` will not work.
An example of creating a window that fills the whole screen:
```javascript
const electron = require('electron')
const {app, BrowserWindow} = electron
let win
app.on('ready', () => {
const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
win = new BrowserWindow({width, height})
win.loadURL('https://github.com')
})
```
Another example of creating a window in the external display:
```javascript
const electron = require('electron')
const {app, BrowserWindow} = require('electron')
let win
app.on('ready', () => {
let displays = electron.screen.getAllDisplays()
let externalDisplay = displays.find((display) => {
return display.bounds.x !== 0 || display.bounds.y !== 0
})
if (externalDisplay) {
win = new BrowserWindow({
x: externalDisplay.bounds.x + 50,
y: externalDisplay.bounds.y + 50
})
win.loadURL('https://github.com')
}
})
```
## Events
The `screen` module emits the following events:
### Event: 'display-added'
Returns:
* `event` Event
* `newDisplay` [Display](structures/display.md)
Emitted when `newDisplay` has been added.
### Event: 'display-removed'
Returns:
* `event` Event
* `oldDisplay` [Display](structures/display.md)
Emitted when `oldDisplay` has been removed.
### Event: 'display-metrics-changed'
Returns:
* `event` Event
* `display` [Display](structures/display.md)
* `changedMetrics` String[]
Emitted when one or more metrics change in a `display`. The `changedMetrics` is
an array of strings that describe the changes. Possible changes are `bounds`,
`workArea`, `scaleFactor` and `rotation`.
## Methods
The `screen` module has the following methods:
### `screen.getCursorScreenPoint()`
Returns `Object`:
* `x` Integer
* `y` Integer
The current absolute position of the mouse pointer.
### `screen.getPrimaryDisplay()`
Returns [`Display`](structures/display.md) - The primary display.
### `screen.getAllDisplays()`
Returns [`Display[]`](structures/display.md) - An array of displays that are currently available.
### `screen.getDisplayNearestPoint(point)`
* `point` Object
* `x` Integer
* `y` Integer
Returns [`Display`](structures/display.md) - The display nearest the specified point.
### `screen.getDisplayMatching(rect)`
* `rect` [Rectangle](structures/rectangle.md)
Returns [`Display`](structures/display.md) - The display that most closely
intersects the provided bounds.

View file

@ -0,0 +1,402 @@
# session
> Manage browser sessions, cookies, cache, proxy settings, etc.
Process: [Main](../glossary.md#main-process)
The `session` module can be used to create new `Session` objects.
You can also access the `session` of existing pages by using the `session`
property of [`WebContents`](web-contents.md), or from the `session` module.
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('http://github.com')
const ses = win.webContents.session
console.log(ses.getUserAgent())
```
## Methods
The `session` module has the following methods:
### `session.fromPartition(partition[, options])`
* `partition` String
* `options` Object
* `cache` Boolean - Whether to enable cache.
Returns `Session` - A session instance from `partition` string. When there is an existing
`Session` with the same `partition`, it will be returned; othewise a new
`Session` instance will be created with `options`.
If `partition` starts with `persist:`, the page will use a persistent session
available to all pages in the app with the same `partition`. if there is no
`persist:` prefix, the page will use an in-memory session. If the `partition` is
empty then default session of the app will be returned.
To create a `Session` with `options`, you have to ensure the `Session` with the
`partition` has never been used before. There is no way to change the `options`
of an existing `Session` object.
## Properties
The `session` module has the following properties:
### `session.defaultSession`
A `Session` object, the default session object of the app.
## Class: Session
> Get and set properties of a session.
Process: [Main](../glossary.md#main-process)
You can create a `Session` object in the `session` module:
```javascript
const {session} = require('electron')
const ses = session.fromPartition('persist:name')
console.log(ses.getUserAgent())
```
### Instance Events
The following events are available on instances of `Session`:
#### Event: 'will-download'
* `event` Event
* `item` [DownloadItem](download-item.md)
* `webContents` [WebContents](web-contents.md)
Emitted when Electron is about to download `item` in `webContents`.
Calling `event.preventDefault()` will cancel the download and `item` will not be
available from next tick of the process.
```javascript
const {session} = require('electron')
session.defaultSession.on('will-download', (event, item, webContents) => {
event.preventDefault()
require('request')(item.getURL(), (data) => {
require('fs').writeFileSync('/somewhere', data)
})
})
```
### Instance Methods
The following methods are available on instances of `Session`:
#### `ses.getCacheSize(callback)`
* `callback` Function
* `size` Integer - Cache size used in bytes.
Returns the session's current cache size.
#### `ses.clearCache(callback)`
* `callback` Function - Called when operation is done
Clears the sessions HTTP cache.
#### `ses.clearStorageData([options, callback])`
* `options` Object (optional)
* `origin` String - Should follow `window.location.origin`s representation
`scheme://host:port`.
* `storages` String[] - The types of storages to clear, can contain:
`appcache`, `cookies`, `filesystem`, `indexdb`, `localstorage`,
`shadercache`, `websql`, `serviceworkers`
* `quotas` String[] - The types of quotas to clear, can contain:
`temporary`, `persistent`, `syncable`.
* `callback` Function (optional) - Called when operation is done.
Clears the data of web storages.
#### `ses.flushStorageData()`
Writes any unwritten DOMStorage data to disk.
#### `ses.setProxy(config, callback)`
* `config` Object
* `pacScript` String - The URL associated with the PAC file.
* `proxyRules` String - Rules indicating which proxies to use.
* `proxyBypassRules` String - Rules indicating which URLs should
bypass the proxy settings.
* `callback` Function - Called when operation is done.
Sets the proxy settings.
When `pacScript` and `proxyRules` are provided together, the `proxyRules`
option is ignored and `pacScript` configuration is applied.
The `proxyRules` has to follow the rules below:
```
proxyRules = schemeProxies[";"<schemeProxies>]
schemeProxies = [<urlScheme>"="]<proxyURIList>
urlScheme = "http" | "https" | "ftp" | "socks"
proxyURIList = <proxyURL>[","<proxyURIList>]
proxyURL = [<proxyScheme>"://"]<proxyHost>[":"<proxyPort>]
```
For example:
* `http=foopy:80;ftp=foopy2` - Use HTTP proxy `foopy:80` for `http://` URLs, and
HTTP proxy `foopy2:80` for `ftp://` URLs.
* `foopy:80` - Use HTTP proxy `foopy:80` for all URLs.
* `foopy:80,bar,direct://` - Use HTTP proxy `foopy:80` for all URLs, failing
over to `bar` if `foopy:80` is unavailable, and after that using no proxy.
* `socks4://foopy` - Use SOCKS v4 proxy `foopy:1080` for all URLs.
* `http=foopy,socks5://bar.com` - Use HTTP proxy `foopy` for http URLs, and fail
over to the SOCKS5 proxy `bar.com` if `foopy` is unavailable.
* `http=foopy,direct://` - Use HTTP proxy `foopy` for http URLs, and use no
proxy if `foopy` is unavailable.
* `http=foopy;socks=foopy2` - Use HTTP proxy `foopy` for http URLs, and use
`socks4://foopy2` for all other URLs.
The `proxyBypassRules` is a comma separated list of rules described below:
* `[ URL_SCHEME "://" ] HOSTNAME_PATTERN [ ":" <port> ]`
Match all hostnames that match the pattern HOSTNAME_PATTERN.
Examples:
"foobar.com", "*foobar.com", "*.foobar.com", "*foobar.com:99",
"https://x.*.y.com:99"
* `"." HOSTNAME_SUFFIX_PATTERN [ ":" PORT ]`
Match a particular domain suffix.
Examples:
".google.com", ".com", "http://.google.com"
* `[ SCHEME "://" ] IP_LITERAL [ ":" PORT ]`
Match URLs which are IP address literals.
Examples:
"127.0.1", "[0:0::1]", "[::1]", "http://[::1]:99"
* `IP_LITERAL "/" PREFIX_LENGHT_IN_BITS`
Match any URL that is to an IP literal that falls between the
given range. IP range is specified using CIDR notation.
Examples:
"192.168.1.1/16", "fefe:13::abc/33".
* `<local>`
Match local addresses. The meaning of `<local>` is whether the
host matches one of: "127.0.0.1", "::1", "localhost".
#### `ses.resolveProxy(url, callback)`
* `url` URL
* `callback` Function
* `proxy` Object
Resolves the proxy information for `url`. The `callback` will be called with
`callback(proxy)` when the request is performed.
#### `ses.setDownloadPath(path)`
* `path` String - The download location
Sets download saving directory. By default, the download directory will be the
`Downloads` under the respective app folder.
#### `ses.enableNetworkEmulation(options)`
* `options` Object
* `offline` Boolean (optional) - Whether to emulate network outage. Defaults
to false.
* `latency` Double (optional) - RTT in ms. Defaults to 0 which will disable
latency throttling.
* `downloadThroughput` Double (optional) - Download rate in Bps. Defaults to 0
which will disable download throttling.
* `uploadThroughput` Double (optional) - Upload rate in Bps. Defaults to 0
which will disable upload throttling.
Emulates network with the given configuration for the `session`.
```javascript
// To emulate a GPRS connection with 50kbps throughput and 500 ms latency.
window.webContents.session.enableNetworkEmulation({
latency: 500,
downloadThroughput: 6400,
uploadThroughput: 6400
})
// To emulate a network outage.
window.webContents.session.enableNetworkEmulation({offline: true})
```
#### `ses.disableNetworkEmulation()`
Disables any network emulation already active for the `session`. Resets to
the original network configuration.
#### `ses.setCertificateVerifyProc(proc)`
* `proc` Function
* `hostname` String
* `certificate` [Certificate](structures/certificate.md)
* `callback` Function
* `isTrusted` Boolean - Determines if the certificate should be trusted
Sets the certificate verify proc for `session`, the `proc` will be called with
`proc(hostname, certificate, callback)` whenever a server certificate
verification is requested. Calling `callback(true)` accepts the certificate,
calling `callback(false)` rejects it.
Calling `setCertificateVerifyProc(null)` will revert back to default certificate
verify proc.
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.webContents.session.setCertificateVerifyProc((hostname, cert, callback) => {
callback(hostname === 'github.com')
})
```
#### `ses.setPermissionRequestHandler(handler)`
* `handler` Function
* `webContents` Object - [WebContents](web-contents.md) requesting the permission.
* `permission` String - Enum of 'media', 'geolocation', 'notifications', 'midiSysex',
'pointerLock', 'fullscreen', 'openExternal'.
* `callback` Function
* `permissionGranted` Boolean - Allow or deny the permission
Sets the handler which can be used to respond to permission requests for the `session`.
Calling `callback(true)` will allow the permission and `callback(false)` will reject it.
```javascript
const {session} = require('electron')
session.fromPartition('some-partition').setPermissionRequestHandler((webContents, permission, callback) => {
if (webContents.getURL() === 'some-host' && permission === 'notifications') {
return callback(false) // denied.
}
callback(true)
})
```
#### `ses.clearHostResolverCache([callback])`
* `callback` Function (optional) - Called when operation is done.
Clears the host resolver cache.
#### `ses.allowNTLMCredentialsForDomains(domains)`
* `domains` String - A comma-seperated list of servers for which
integrated authentication is enabled.
Dynamically sets whether to always send credentials for HTTP NTLM or Negotiate
authentication.
```javascript
const {session} = require('electron')
// consider any url ending with `example.com`, `foobar.com`, `baz`
// for integrated authentication.
session.defaultSession.allowNTLMCredentialsForDomains('*example.com, *foobar.com, *baz')
// consider all urls for integrated authentication.
session.defaultSession.allowNTLMCredentialsForDomains('*')
```
#### `ses.setUserAgent(userAgent[, acceptLanguages])`
* `userAgent` String
* `acceptLanguages` String (optional)
Overrides the `userAgent` and `acceptLanguages` for this session.
The `acceptLanguages` must a comma separated ordered list of language codes, for
example `"en-US,fr,de,ko,zh-CN,ja"`.
This doesn't affect existing `WebContents`, and each `WebContents` can use
`webContents.setUserAgent` to override the session-wide user agent.
#### `ses.getUserAgent()`
Returns `String` - The user agent for this session.
#### `ses.getBlobData(identifier, callback)`
* `identifier` String - Valid UUID.
* `callback` Function
* `result` Buffer - Blob data.
Returns `Blob` - The blob data associated with the `identifier`.
#### `ses.createInterruptedDownload(options)`
* `options` Object
* `path` String - Absolute path of the download.
* `urlChain` String[] - Complete URL chain for the download.
* `mimeType` String (optional)
* `offset` Integer - Start range for the download.
* `length` Integer - Total length of the download.
* `lastModified` String - Last-Modified header value.
* `eTag` String - ETag header value.
* `startTime` Double (optional) - Time when download was started in
number of seconds since UNIX epoch.
Allows resuming `cancelled` or `interrupted` downloads from previous `Session`.
The API will generate a [DownloadItem](download-item.md) that can be accessed with the [will-download](#event-will-download)
event. The [DownloadItem](download-item.md) will not have any `WebContents` associated with it and
the initial state will be `interrupted`. The download will start only when the
`resume` API is called on the [DownloadItem](download-item.md).
#### `ses.clearAuthCache(options[, callback])`
* `options` ([RemovePassword](structures/remove-password.md) | [RemoveClientCertificate](structures/remove-client-certificate.md))
* `callback` Function (optional) - Called when operation is done
Clears the sessions HTTP authentication cache.
### Instance Properties
The following properties are available on instances of `Session`:
#### `ses.cookies`
A Cookies object for this session.
#### `ses.webRequest`
A WebRequest object for this session.
#### `ses.protocol`
A Protocol object (an instance of [protocol](protocol.md) module) for this session.
```javascript
const {app, session} = require('electron')
const path = require('path')
app.on('ready', function () {
const protocol = session.fromPartition('some-partition').protocol
protocol.registerFileProtocol('atom', function (request, callback) {
var url = request.url.substr(7)
callback({path: path.normalize(`${__dirname}/${url}`)})
}, function (error) {
if (error) console.error('Failed to register protocol')
})
})
```

View file

@ -0,0 +1,86 @@
# shell
> Manage files and URLs using their default applications.
Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer-process)
The `shell` module provides functions related to desktop integration.
An example of opening a URL in the user's default browser:
```javascript
const {shell} = require('electron')
shell.openExternal('https://github.com')
```
## Methods
The `shell` module has the following methods:
### `shell.showItemInFolder(fullPath)`
* `fullPath` String
Returns `Boolean` - Whether the item was successfully shown
Show the given file in a file manager. If possible, select the file.
### `shell.openItem(fullPath)`
* `fullPath` String
Returns `Boolean` - Whether the item was successfully opened.
Open the given file in the desktop's default manner.
### `shell.openExternal(url[, options, callback])`
* `url` String
* `options` Object (optional) _macOS_
* `activate` Boolean - `true` to bring the opened application to the
foreground. The default is `true`.
* `callback` Function (optional) - If specified will perform the open asynchronously. _macOS_
* `error` Error
Returns `Boolean` - Whether an application was available to open the URL.
If callback is specified, always returns true.
Open the given external protocol URL in the desktop's default manner. (For
example, mailto: URLs in the user's default mail agent).
### `shell.moveItemToTrash(fullPath)`
* `fullPath` String
Returns `Boolean` - Whether the item was successfully moved to the trash
Move the given file to trash and returns a boolean status for the operation.
### `shell.beep()`
Play the beep sound.
### `shell.writeShortcutLink(shortcutPath[, operation], options)` _Windows_
* `shortcutPath` String
* `operation` String (optional) - Default is `create`, can be one of following:
* `create` - Creates a new shortcut, overwriting if necessary.
* `update` - Updates specified properties only on an existing shortcut.
* `replace` - Overwrites an existing shortcut, fails if the shortcut doesn't
exist.
* `options` [ShortcutDetails](structures/shortcut-details.md)
Returns `Boolean` - Whether the shortcut was created successfully
Creates or updates a shortcut link at `shortcutPath`.
### `shell.readShortcutLink(shortcutPath)` _Windows_
* `shortcutPath` String
Returns [`ShortcutDetails`](structures/shortcut-details.md)
Resolves the shortcut link at `shortcutPath`.
An exception will be thrown when any error happens.

View file

@ -0,0 +1,4 @@
# BluetoothDevice Object
* `deviceName` String
* `deviceId` String

View file

@ -0,0 +1,8 @@
# CertificatePrincipal Object
* `commonName` String - Common Name
* `organizations` String[] - Organization names
* `organizationUnits` String[] - Organization Unit names
* `locality` String - Locality
* `state` String - State or province
* `country` String - Country or region

View file

@ -0,0 +1,12 @@
# Certificate Object
* `data` String - PEM encoded data
* `issuer` [CertificatePrincipal](certificate-principal.md) - Issuer principal
* `issuerName` String - Issuer's Common Name
* `issuerCert` Certificate - Issuer certificate (if not self-signed)
* `subject` [CertificatePrincipal](certificate-principal.md) - Subject principal
* `subjectName` String - Subject's Common Name
* `serialNumber` String - Hex value represented string
* `validStart` Number - Start date of the certificate being valid in seconds
* `validExpiry` Number - End date of the certificate being valid in seconds
* `fingerprint` String - Fingerprint of the certificate

View file

@ -0,0 +1,14 @@
# Cookie Object
* `name` String - The name of the cookie.
* `value` String - The value of the cookie.
* `domain` String (optional) - The domain of the cookie.
* `hostOnly` Boolean (optional) - Whether the cookie is a host-only cookie.
* `path` String (optional) - The path of the cookie.
* `secure` Boolean (optional) - Whether the cookie is marked as secure.
* `httpOnly` Boolean (optional) - Whether the cookie is marked as HTTP only.
* `session` Boolean (optional) - Whether the cookie is a session cookie or a persistent
cookie with an expiration date.
* `expirationDate` Double (optional) - The expiration date of the cookie as
the number of seconds since the UNIX epoch. Not provided for session
cookies.

View file

@ -0,0 +1,4 @@
# CrashReport Object
* `date` String
* `ID` Integer

View file

@ -0,0 +1,14 @@
# DesktopCapturerSource Object
* `id` String - The identifier of a window or screen that can be used as a
`chromeMediaSourceId` constraint when calling
[`navigator.webkitGetUserMedia`]. The format of the identifier will be
`window:XX` or `screen:XX`, where `XX` is a random generated number.
* `name` String - A screen source will be named either `Entire Screen` or
`Screen <index>`, while the name of a window source will match the window
title.
* `thumbnail` [NativeImage](../native-image.md) - A thumbnail image. **Note:**
There is no guarantee that the size of the thumbnail is the same as the
`thumbnailSize` specified in the `options` passed to
`desktopCapturer.getSources`. The actual size depends on the scale of the
screen or window.

View file

@ -0,0 +1,19 @@
# Display Object
* `id` Number - Unique identifier associated with the display.
* `rotation` Number - Can be 0, 90, 180, 270, represents screen rotation in
clock-wise degrees.
* `scaleFactor` Number - Output device's pixel scale factor.
* `touchSupport` String - Can be `available`, `unavailable`, `unknown`.
* `bounds` [Rectangle](rectangle.md)
* `size` Object
* `height` Number
* `width` Number
* `workArea` [Rectangle](rectangle.md)
* `workAreaSize` Object
* `height` Number
* `width` Number
The `Display` object represents a physical display connected to the system. A
fake `Display` may exist on a headless system, or a `Display` may correspond to
a remote, virtual display.

View file

@ -0,0 +1,4 @@
# FileFilter Object
* `name` String
* `extensions` String[]

View file

@ -0,0 +1,21 @@
# JumpListCategory Object
* `type` String (optional) - One of the following:
* `tasks` - Items in this category will be placed into the standard `Tasks`
category. There can be only one such category, and it will always be
displayed at the bottom of the Jump List.
* `frequent` - Displays a list of files frequently opened by the app, the
name of the category and its items are set by Windows.
* `recent` - Displays a list of files recently opened by the app, the name
of the category and its items are set by Windows. Items may be added to
this category indirectly using `app.addRecentDocument(path)`.
* `custom` - Displays tasks or file links, `name` must be set by the app.
* `name` String (optional) - Must be set if `type` is `custom`, otherwise it should be
omitted.
* `items` JumpListItem[] (optional) - Array of [`JumpListItem`](jump-list-item.md) objects if `type` is `tasks` or
`custom`, otherwise it should be omitted.
**Note:** If a `JumpListCategory` object has neither the `type` nor the `name`
property set then its `type` is assumed to be `tasks`. If the `name` property
is set but the `type` property is omitted then the `type` is assumed to be
`custom`.

View file

@ -0,0 +1,28 @@
# JumpListItem Object
* `type` String (optional) - One of the following:
* `task` - A task will launch an app with specific arguments.
* `separator` - Can be used to separate items in the standard `Tasks`
category.
* `file` - A file link will open a file using the app that created the
Jump List, for this to work the app must be registered as a handler for
the file type (though it doesn't have to be the default handler).
* `path` String (optional) - Path of the file to open, should only be set if `type` is
`file`.
* `program` String (optional) - Path of the program to execute, usually you should
specify `process.execPath` which opens the current program. Should only be
set if `type` is `task`.
* `args` String (optional) - The command line arguments when `program` is executed. Should
only be set if `type` is `task`.
* `title` String (optional) - The text to be displayed for the item in the Jump List.
Should only be set if `type` is `task`.
* `description` String (optional) - Description of the task (displayed in a tooltip).
Should only be set if `type` is `task`.
* `iconPath` String (optional) - The absolute path to an icon to be displayed in a
Jump List, which can be an arbitrary resource file that contains an icon
(e.g. `.ico`, `.exe`, `.dll`). You can usually specify `process.execPath` to
show the program icon.
* `iconIndex` Number (optional) - The index of the icon in the resource file. If a
resource file contains multiple icons this value can be used to specify the
zero-based index of the icon that should be displayed for this task. If a
resource file contains only one icon, this property should be set to zero.

View file

@ -0,0 +1,8 @@
# MemoryUsageDetails Object
* `count` Number
* `size` Number
* `liveSize` Number
* `decodedSize` Number
* `purgedSize` Number
* `purgeableSize` Number

View file

@ -0,0 +1,4 @@
# MimeTypedBuffer Object
* `mimeType` String - The mimeType of the Buffer that you are sending
* `buffer` Buffer - The actual Buffer content

View file

@ -0,0 +1,6 @@
# Rectangle Object
* `x` Number - The x coordinate of the origin of the rectangle
* `y` Number - The y coordinate of the origin of the rectangle
* `width` Number
* `height` Number

View file

@ -0,0 +1,5 @@
# RemoveClientCertificate Object
* `type` String - `clientCertificate`.
* `origin` String - Origin of the server whose associated client certificate
must be removed from the cache.

View file

@ -0,0 +1,15 @@
# RemovePassword Object
* `type` String - `password`.
* `origin` String (optional) - When provided, the authentication info
related to the origin will only be removed otherwise the entire cache
will be cleared.
* `scheme` String (optional) - Scheme of the authentication.
Can be `basic`, `digest`, `ntlm`, `negotiate`. Must be provided if
removing by `origin`.
* `realm` String (optional) - Realm of the authentication. Must be provided if
removing by `origin`.
* `username` String (optional) - Credentials of the authentication. Must be
provided if removing by `origin`.
* `password` String (optional) - Credentials of the authentication. Must be
provided if removing by `origin`.

View file

@ -0,0 +1,15 @@
# ShortcutDetails Object
* `target` String - The target to launch from this shortcut.
* `cwd` String (optional) - The working directory. Default is empty.
* `args` String (optional) - The arguments to be applied to `target` when
launching from this shortcut. Default is empty.
* `description` String (optional) - The description of the shortcut. Default
is empty.
* `icon` String (optional) - The path to the icon, can be a DLL or EXE. `icon`
and `iconIndex` have to be set together. Default is empty, which uses the
target's icon.
* `iconIndex` Number (optional) - The resource ID of icon when `icon` is a
DLL or EXE. Default is 0.
* `appUserModelId` String (optional) - The Application User Model ID. Default
is empty.

View file

@ -0,0 +1,14 @@
# Task Object
* `program` String - Path of the program to execute, usually you should
specify `process.execPath` which opens the current program.
* `arguments` String - The command line arguments when `program` is
executed.
* `title` String - The string to be displayed in a JumpList.
* `description` String - Description of this task.
* `iconPath` String - The absolute path to an icon to be displayed in a
JumpList, which can be an arbitrary resource file that contains an icon. You
can usually specify `process.execPath` to show the icon of the program.
* `iconIndex` Number - The icon index in the icon file. If an icon file
consists of two or more icons, set this value to identify the icon. If an
icon file consists of one icon, this value is 0.

View file

@ -0,0 +1,21 @@
# ThumbarButton Object
* `icon` [NativeImage](../native-image.md) - The icon showing in thumbnail
toolbar.
* `click` Function
* `tooltip` String (optional) - The text of the button's tooltip.
* `flags` String[] (optional) - Control specific states and behaviors of the
button. By default, it is `['enabled']`.
The `flags` is an array that can include following `String`s:
* `enabled` - The button is active and available to the user.
* `disabled` - The button is disabled. It is present, but has a visual state
indicating it will not respond to user action.
* `dismissonclick` - When the button is clicked, the thumbnail window closes
immediately.
* `nobackground` - Do not draw a button border, use only the image.
* `hidden` - The button is not shown to the user.
* `noninteractive` - The button is enabled but not interactive; no pressed
button state is drawn. This value is intended for instances where the button
is used in a notification.

View file

@ -0,0 +1,4 @@
# UploadBlob Object
* `type` String - `blob`.
* `blobUUID` String - UUID of blob data to upload.

View file

@ -0,0 +1,6 @@
# UploadData Object
* `bytes` Buffer - Content being sent.
* `file` String - Path of file being uploaded.
* `blobUUID` String - UUID of blob data. Use [ses.getBlobData](../session.md#sesgetblobdataidentifier-callback) method
to retrieve the data.

View file

@ -0,0 +1,9 @@
# UploadFileSystem Object
* `type` String - `fileSystem`.
* `filsSystemURL` String - FileSystem url to read data for upload.
* `offset` Integer - Defaults to `0`.
* `length` Integer - Number of bytes to read from `offset`.
Defaults to `0`.
* `modificationTime` Double - Last Modification time in
number of seconds sine the UNIX epoch.

View file

@ -0,0 +1,9 @@
# UploadFile Object
* `type` String - `file`.
* `filePath` String - Path of file to be uploaded.
* `offset` Integer - Defaults to `0`.
* `length` Integer - Number of bytes to read from `offset`.
Defaults to `0`.
* `modificationTime` Double - Last Modification time in
number of seconds sine the UNIX epoch.

View file

@ -0,0 +1,4 @@
# UploadRawData Object
* `type` String - `rawData`.
* `bytes` Buffer - Data to be uploaded.

View file

@ -0,0 +1,95 @@
# Synopsis
> How to use Node.js and Electron APIs.
All of [Node.js's built-in modules](https://nodejs.org/api/) are available in
Electron and third-party node modules also fully supported as well (including
the [native modules](../tutorial/using-native-node-modules.md)).
Electron also provides some extra built-in modules for developing native
desktop applications. Some modules are only available in the main process, some
are only available in the renderer process (web page), and some can be used in
both processes.
The basic rule is: if a module is [GUI][gui] or low-level system related, then
it should be only available in the main process. You need to be familiar with
the concept of [main process vs. renderer process](../tutorial/quick-start.md#main-process)
scripts to be able to use those modules.
The main process script is just like a normal Node.js script:
```javascript
const {app, BrowserWindow} = require('electron')
let win = null
app.on('ready', () => {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL('https://github.com')
})
```
The renderer process is no different than a normal web page, except for the
extra ability to use node modules:
```html
<!DOCTYPE html>
<html>
<body>
<script>
const {app} = require('electron').remote
console.log(app.getVersion())
</script>
</body>
</html>
```
To run your app, read [Run your app](../tutorial/quick-start.md#run-your-app).
## Destructuring assignment
As of 0.37, you can use
[destructuring assignment][destructuring-assignment] to make it easier to use
built-in modules.
```javascript
const {app, BrowserWindow} = require('electron')
let win
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL('https://github.com')
})
```
If you need the entire `electron` module, you can require it and then using
destructuring to access the individual modules from `electron`.
```javascript
const electron = require('electron')
const {app, BrowserWindow} = electron
let win
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL('https://github.com')
})
```
This is equivalent to the following code:
```javascript
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let win
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL('https://github.com')
})
```
[gui]: https://en.wikipedia.org/wiki/Graphical_user_interface
[destructuring-assignment]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

View file

@ -0,0 +1,239 @@
# systemPreferences
> Get system preferences.
Process: [Main](../glossary.md#main-process)
```javascript
const {systemPreferences} = require('electron')
console.log(systemPreferences.isDarkMode())
```
## Events
The `systemPreferences` object emits the following events:
### Event: 'accent-color-changed' _Windows_
Returns:
* `event` Event
* `newColor` String - The new RGBA color the user assigned to be their system
accent color.
### Event: 'color-changed' _Windows_
Returns:
* `event` Event
### Event: 'inverted-color-scheme-changed' _Windows_
Returns:
* `event` Event
* `invertedColorScheme` Boolean - `true` if an inverted color scheme, such as
a high contrast theme, is being used, `false` otherwise.
## Methods
### `systemPreferences.isDarkMode()` _macOS_
Returns `Boolean` - Whether the system is in Dark Mode.
### `systemPreferences.isSwipeTrackingFromScrollEventsEnabled()` _macOS_
Returns `Boolean` - Whether the Swipe between pages setting is on.
### `systemPreferences.postNotification(event, userInfo)` _macOS_
* `event` String
* `userInfo` Object
Posts `event` as native notifications of macOS. The `userInfo` is an Object
that contains the user information dictionary sent along with the notification.
### `systemPreferences.postLocalNotification(event, userInfo)` _macOS_
* `event` String
* `userInfo` Object
Posts `event` as native notifications of macOS. The `userInfo` is an Object
that contains the user information dictionary sent along with the notification.
### `systemPreferences.subscribeNotification(event, callback)` _macOS_
* `event` String
* `callback` Function
* `event` String
* `userInfo` Object
Subscribes to native notifications of macOS, `callback` will be called with
`callback(event, userInfo)` when the corresponding `event` happens. The
`userInfo` is an Object that contains the user information dictionary sent
along with the notification.
The `id` of the subscriber is returned, which can be used to unsubscribe the
`event`.
Under the hood this API subscribes to `NSDistributedNotificationCenter`,
example values of `event` are:
* `AppleInterfaceThemeChangedNotification`
* `AppleAquaColorVariantChanged`
* `AppleColorPreferencesChangedNotification`
* `AppleShowScrollBarsSettingChanged`
### `systemPreferences.unsubscribeNotification(id)` _macOS_
* `id` Integer
Removes the subscriber with `id`.
### `systemPreferences.subscribeLocalNotification(event, callback)` _macOS_
* `event` String
* `callback` Function
* `event` String
* `userInfo` Object
Same as `subscribeNotification`, but uses `NSNotificationCenter` for local defaults.
This is necessary for events such as `NSUserDefaultsDidChangeNotification`
### `systemPreferences.unsubscribeLocalNotification(id)` _macOS_
* `id` Integer
Same as `unsubscribeNotification`, but removes the subscriber from `NSNotificationCenter`.
### `systemPreferences.getUserDefault(key, type)` _macOS_
* `key` String
* `type` String - Can be `string`, `boolean`, `integer`, `float`, `double`,
`url`, `array`, `dictionary`
Get the value of `key` in system preferences.
This API uses `NSUserDefaults` on macOS. Some popular `key` and `type`s are:
* `AppleInterfaceStyle`: `string`
* `AppleAquaColorVariant`: `integer`
* `AppleHighlightColor`: `string`
* `AppleShowScrollBars`: `string`
* `NSNavRecentPlaces`: `array`
* `NSPreferredWebServices`: `dictionary`
* `NSUserDictionaryReplacementItems`: `array`
### `systemPreferences.setUserDefault(key, type, value)` _macOS_
* `key` String
* `type` String - See [`getUserDefault`][#systempreferencesgetuserdefaultkey-type-macos]
* `value` String
Set the value of `key` in system preferences.
Note that `type` should match actual type of `value`. An exception is thrown
if they don't.
This API uses `NSUserDefaults` on macOS. Some popular `key` and `type`s are:
* `ApplePressAndHoldEnabled`: `boolean`
### `systemPreferences.isAeroGlassEnabled()` _Windows_
This method returns `true` if [DWM composition][dwm-composition] (Aero Glass) is
enabled, and `false` otherwise.
An example of using it to determine if you should create a transparent window or
not (transparent windows won't work correctly when DWM composition is disabled):
```javascript
const {BrowserWindow, systemPreferences} = require('electron')
let browserOptions = {width: 1000, height: 800}
// Make the window transparent only if the platform supports it.
if (process.platform !== 'win32' || systemPreferences.isAeroGlassEnabled()) {
browserOptions.transparent = true
browserOptions.frame = false
}
// Create the window.
let win = new BrowserWindow(browserOptions)
// Navigate.
if (browserOptions.transparent) {
win.loadURL(`file://${__dirname}/index.html`)
} else {
// No transparency, so we load a fallback that uses basic styles.
win.loadURL(`file://${__dirname}/fallback.html`)
}
```
[dwm-composition]:https://msdn.microsoft.com/en-us/library/windows/desktop/aa969540.aspx
### `systemPreferences.getAccentColor()` _Windows_
Returns `String` - The users current system wide accent color preference in RGBA
hexadecimal form.
```js
const color = systemPreferences.getAccentColor() // `"aabbccdd"`
const red = color.substr(0, 2) // "aa"
const green = color.substr(2, 2) // "bb"
const blue = color.substr(4, 2) // "cc"
const alpha = color.substr(6, 2) // "dd"
```
### `systemPreferences.getColor(color)` _Windows_
* `color` String - One of the following values:
* `3d-dark-shadow` - Dark shadow for three-dimensional display elements.
* `3d-face` - Face color for three-dimensional display elements and for dialog
box backgrounds.
* `3d-highlight` - Highlight color for three-dimensional display elements.
* `3d-light` - Light color for three-dimensional display elements.
* `3d-shadow` - Shadow color for three-dimensional display elements.
* `active-border` - Active window border.
* `active-caption` - Active window title bar. Specifies the left side color in
the color gradient of an active window's title bar if the gradient effect is
enabled.
* `active-caption-gradient` - Right side color in the color gradient of an
active window's title bar.
* `app-workspace` - Background color of multiple document interface (MDI)
applications.
* `button-text` - Text on push buttons.
* `caption-text` - Text in caption, size box, and scroll bar arrow box.
* `desktop` - Desktop background color.
* `disabled-text` - Grayed (disabled) text.
* `highlight` - Item(s) selected in a control.
* `highlight-text` - Text of item(s) selected in a control.
* `hotlight` - Color for a hyperlink or hot-tracked item.
* `inactive-border` - Inactive window border.
* `inactive-caption` - Inactive window caption. Specifies the left side color
in the color gradient of an inactive window's title bar if the gradient
effect is enabled.
* `inactive-caption-gradient` - Right side color in the color gradient of an
inactive window's title bar.
* `inactive-caption-text` - Color of text in an inactive caption.
* `info-background` - Background color for tooltip controls.
* `info-text` - Text color for tooltip controls.
* `menu` - Menu background.
* `menu-highlight` - The color used to highlight menu items when the menu
appears as a flat menu.
* `menubar` - The background color for the menu bar when menus appear as flat
menus.
* `menu-text` - Text in menus.
* `scrollbar` - Scroll bar gray area.
* `window` - Window background.
* `window-frame` - Window frame.
* `window-text` - Text in windows.
Returns `String` - The system color setting in RGB hexadecimal form (`#ABCDEF`).
See the [Windows docs][windows-colors] for more details.
### `systemPreferences.isInvertedColorScheme()` _Windows_
Returns `Boolean` - `true` if an inverted color scheme, such as a high contrast
theme, is active, `false` otherwise.
[windows-colors]:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724371(v=vs.85).aspx

View file

@ -0,0 +1,247 @@
## Class: Tray
> Add icons and context menus to the system's notification area.
Process: [Main](../glossary.md#main-process)
`Tray` is an [EventEmitter][event-emitter].
```javascript
const {app, Menu, Tray} = require('electron')
let tray = null
app.on('ready', () => {
tray = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{label: 'Item1', type: 'radio'},
{label: 'Item2', type: 'radio'},
{label: 'Item3', type: 'radio', checked: true},
{label: 'Item4', type: 'radio'}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})
```
__Platform limitations:__
* On Linux the app indicator will be used if it is supported, otherwise
`GtkStatusIcon` will be used instead.
* On Linux distributions that only have app indicator support, you have to
install `libappindicator1` to make the tray icon work.
* App indicator will only be shown when it has a context menu.
* When app indicator is used on Linux, the `click` event is ignored.
* On Linux in order for changes made to individual `MenuItem`s to take effect,
you have to call `setContextMenu` again. For example:
```javascript
const {app, Menu, Tray} = require('electron')
let appIcon = null
app.on('ready', () => {
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{label: 'Item1', type: 'radio'},
{label: 'Item2', type: 'radio'}
])
// Make a change to the context menu
contextMenu.items[1].checked = false
// Call this again for Linux because we modified the context menu
appIcon.setContextMenu(contextMenu)
})
```
* On Windows it is recommended to use `ICO` icons to get best visual effects.
If you want to keep exact same behaviors on all platforms, you should not
rely on the `click` event and always attach a context menu to the tray icon.
### `new Tray(image)`
* `image` ([NativeImage](native-image.md) | String)
Creates a new tray icon associated with the `image`.
### Instance Events
The `Tray` module emits the following events:
#### Event: 'click'
* `event` Event
* `altKey` Boolean
* `shiftKey` Boolean
* `ctrlKey` Boolean
* `metaKey` Boolean
* `bounds` [Rectangle](structures/rectangle.md) - The bounds of tray icon
Emitted when the tray icon is clicked.
#### Event: 'right-click' _macOS_ _Windows_
* `event` Event
* `altKey` Boolean
* `shiftKey` Boolean
* `ctrlKey` Boolean
* `metaKey` Boolean
* `bounds` [Rectangle](structures/rectangle.md) - The bounds of tray icon
Emitted when the tray icon is right clicked.
#### Event: 'double-click' _macOS_ _Windows_
* `event` Event
* `altKey` Boolean
* `shiftKey` Boolean
* `ctrlKey` Boolean
* `metaKey` Boolean
* `bounds` [Rectangle](structures/rectangle.md) - The bounds of tray icon
Emitted when the tray icon is double clicked.
#### Event: 'balloon-show' _Windows_
Emitted when the tray balloon shows.
#### Event: 'balloon-click' _Windows_
Emitted when the tray balloon is clicked.
#### Event: 'balloon-closed' _Windows_
Emitted when the tray balloon is closed because of timeout or user manually
closes it.
#### Event: 'drop' _macOS_
Emitted when any dragged items are dropped on the tray icon.
#### Event: 'drop-files' _macOS_
* `event` Event
* `files` String[] - The paths of the dropped files.
Emitted when dragged files are dropped in the tray icon.
#### Event: 'drop-text' _macOS_
* `event` Event
* `text` String - the dropped text string
Emitted when dragged text is dropped in the tray icon.
#### Event: 'drag-enter' _macOS_
Emitted when a drag operation enters the tray icon.
#### Event: 'drag-leave' _macOS_
Emitted when a drag operation exits the tray icon.
#### Event: 'drag-end' _macOS_
Emitted when a drag operation ends on the tray or ends at another location.
### Instance Methods
The `Tray` class has the following methods:
#### `tray.destroy()`
Destroys the tray icon immediately.
#### `tray.setImage(image)`
* `image` ([NativeImage](native-image.md) | String)
Sets the `image` associated with this tray icon.
#### `tray.setPressedImage(image)` _macOS_
* `image` [NativeImage](native-image.md)
Sets the `image` associated with this tray icon when pressed on macOS.
#### `tray.setToolTip(toolTip)`
* `toolTip` String
Sets the hover text for this tray icon.
#### `tray.setTitle(title)` _macOS_
* `title` String
Sets the title displayed aside of the tray icon in the status bar.
#### `tray.setHighlightMode(mode)` _macOS_
* `mode` String - Highlight mode with one of the following values:
* `selection` - Highlight the tray icon when it is clicked and also when
its context menu is open. This is the default.
* `always` - Always highlight the tray icon.
* `never` - Never highlight the tray icon.
Sets when the tray's icon background becomes highlighted (in blue).
**Note:** You can use `highlightMode` with a [`BrowserWindow`](browser-window.md)
by toggling between `'never'` and `'always'` modes when the window visibility
changes.
```javascript
const {BrowserWindow, Tray} = require('electron')
const win = new BrowserWindow({width: 800, height: 600})
const tray = new Tray('/path/to/my/icon')
tray.on('click', () => {
win.isVisible() ? win.hide() : win.show()
})
win.on('show', () => {
tray.setHighlightMode('always')
})
win.on('hide', () => {
tray.setHighlightMode('never')
})
```
#### `tray.displayBalloon(options)` _Windows_
* `options` Object
* `icon` ([NativeImage](native-image.md) | String) - (optional)
* `title` String - (optional)
* `content` String - (optional)
Displays a tray balloon.
#### `tray.popUpContextMenu([menu, position])` _macOS_ _Windows_
* `menu` Menu (optional)
* `position` Object (optional) - The pop up position.
* `x` Integer
* `y` Integer
Pops up the context menu of the tray icon. When `menu` is passed, the `menu` will
be shown instead of the tray icon's context menu.
The `position` is only available on Windows, and it is (0, 0) by default.
#### `tray.setContextMenu(menu)`
* `menu` Menu
Sets the context menu for this icon.
#### `tray.getBounds()` _macOS_ _Windows_
Returns [`Rectangle`](structures/rectangle.md)
The `bounds` of this tray icon as `Object`.
#### `tray.isDestroyed()`
Returns `Boolean` - Whether the tray icon is destroyed.
[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,193 @@
# webFrame
> Customize the rendering of the current web page.
Process: [Renderer](../glossary.md#renderer-process)
An example of zooming current page to 200%.
```javascript
const {webFrame} = require('electron')
webFrame.setZoomFactor(2)
```
## Methods
The `webFrame` module has the following methods:
### `webFrame.setZoomFactor(factor)`
* `factor` Number - Zoom factor.
Changes the zoom factor to the specified factor. Zoom factor is
zoom percent divided by 100, so 300% = 3.0.
### `webFrame.getZoomFactor()`
Returns `Number` - The current zoom factor.
### `webFrame.setZoomLevel(level)`
* `level` Number - Zoom level
Changes the zoom level to the specified level. The original size is 0 and each
increment above or below represents zooming 20% larger or smaller to default
limits of 300% and 50% of original size, respectively.
### `webFrame.getZoomLevel()`
Returns `Number` - The current zoom level.
### `webFrame.setZoomLevelLimits(minimumLevel, maximumLevel)`
* `minimumLevel` Number
* `maximumLevel` Number
**Deprecated:** Call `setVisualZoomLevelLimits` instead to set the visual zoom
level limits. This method will be removed in Electron 2.0.
### `webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`
* `minimumLevel` Number
* `maximumLevel` Number
Sets the maximum and minimum pinch-to-zoom level.
### `webFrame.setLayoutZoomLevelLimits(minimumLevel, maximumLevel)`
* `minimumLevel` Number
* `maximumLevel` Number
Sets the maximum and minimum layout-based (i.e. non-visual) zoom level.
### `webFrame.setSpellCheckProvider(language, autoCorrectWord, provider)`
* `language` String
* `autoCorrectWord` Boolean
* `provider` Object
* `spellCheck` Function - Returns `Boolean`
* `text` String
Sets a provider for spell checking in input fields and text areas.
The `provider` must be an object that has a `spellCheck` method that returns
whether the word passed is correctly spelled.
An example of using [node-spellchecker][spellchecker] as provider:
```javascript
const {webFrame} = require('electron')
webFrame.setSpellCheckProvider('en-US', true, {
spellCheck (text) {
return !(require('spellchecker').isMisspelled(text))
}
})
```
### `webFrame.registerURLSchemeAsSecure(scheme)`
* `scheme` String
Registers the `scheme` as secure scheme.
Secure schemes do not trigger mixed content warnings. For example, `https` and
`data` are secure schemes because they cannot be corrupted by active network
attackers.
### `webFrame.registerURLSchemeAsBypassingCSP(scheme)`
* `scheme` String
Resources will be loaded from this `scheme` regardless of the current page's
Content Security Policy.
### `webFrame.registerURLSchemeAsPrivileged(scheme[, options])`
* `scheme` String
* `options` Object (optional)
* `secure` Boolean - (optional) Default true.
* `bypassCSP` Boolean - (optional) Default true.
* `allowServiceWorkers` Boolean - (optional) Default true.
* `supportFetchAPI` Boolean - (optional) Default true.
* `corsEnabled` Boolean - (optional) Default true.
Registers the `scheme` as secure, bypasses content security policy for resources,
allows registering ServiceWorker and supports fetch API.
Specify an option with the value of `false` to omit it from the registration.
An example of registering a privileged scheme, without bypassing Content Security Policy:
```javascript
const {webFrame} = require('electron')
webFrame.registerURLSchemeAsPrivileged('foo', { bypassCSP: false })
```
### `webFrame.insertText(text)`
* `text` String
Inserts `text` to the focused element.
### `webFrame.executeJavaScript(code[, userGesture, callback])`
* `code` String
* `userGesture` Boolean (optional) - Default is `false`.
* `callback` Function (optional) - Called after script has been executed.
* `result` Any
Evaluates `code` in page.
In the browser window some HTML APIs like `requestFullScreen` can only be
invoked by a gesture from the user. Setting `userGesture` to `true` will remove
this limitation.
### `webFrame.getResourceUsage()`
Returns `Object`:
* `images` [MemoryUsageDetails](structures/memory-usage-details.md)
* `cssStyleSheets` [MemoryUsageDetails](structures/memory-usage-details.md)
* `xslStyleSheets` [MemoryUsageDetails](structures/memory-usage-details.md)
* `fonts` [MemoryUsageDetails](structures/memory-usage-details.md)
* `other` [MemoryUsageDetails](structures/memory-usage-details.md)
Returns an object describing usage information of Blink's internal memory
caches.
```javascript
const {webFrame} = require('electron')
console.log(webFrame.getResourceUsage())
```
This will generate:
```javascript
{
images: {
count: 22,
size: 2549,
liveSize: 2542,
decodedSize: 478,
purgedSize: 0,
purgeableSize: 0
},
cssStyleSheets: { /* same with "images" */ },
xslStyleSheets: { /* same with "images" */ },
fonts: { /* same with "images" */ },
other: { /* same with "images" */ }
}
```
### `webFrame.clearCache()`
Attempts to free memory that is no longer being used (like images from a
previous navigation).
Note that blindly calling this method probably makes Electron slower since it
will have to refill these emptied caches, you should only call it if an event
in your app has occurred that makes you think your page is actually using less
memory (i.e. you have navigated from a super heavy page to a mostly empty one,
and intend to stay there).
[spellchecker]: https://github.com/atom/node-spellchecker

View file

@ -0,0 +1,205 @@
## Class: WebRequest
> Intercept and modify the contents of a request at various stages of its lifetime.
Process: [Main](../glossary.md#main-process)
Instances of the `WebRequest` class are accessed by using the `webRequest`
property of a `Session`.
The methods of `WebRequest` accept an optional `filter` and a `listener`. The
`listener` will be called with `listener(details)` when the API's event has
happened. The `details` object describes the request. Passing `null`
as `listener` will unsubscribe from the event.
The `filter` object has a `urls` property which is an Array of URL
patterns that will be used to filter out the requests that do not match the URL
patterns. If the `filter` is omitted then all requests will be matched.
For certain events the `listener` is passed with a `callback`, which should be
called with a `response` object when `listener` has done its work.
An example of adding `User-Agent` header for requests:
```javascript
const {session} = require('electron')
// Modify the user agent for all requests to the following urls.
const filter = {
urls: ['https://*.github.com/*', '*://electron.github.io']
}
session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
details.requestHeaders['User-Agent'] = 'MyAgent'
callback({cancel: false, requestHeaders: details.requestHeaders})
})
```
### Instance Methods
The following methods are available on instances of `WebRequest`:
#### `webRequest.onBeforeRequest([filter, ]listener)`
* `filter` Object
* `listener` Function
* `details` Object
* `id` Integer
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `uploadData` [UploadData[]](structures/upload-data.md)
* `callback` Function
* `response` Object
* `cancel` Boolean (optional)
* `redirectURL` String (optional) - The original request is prevented from
being sent or completed and is instead redirected to the given URL.
The `listener` will be called with `listener(details, callback)` when a request
is about to occur.
The `uploadData` is an array of `UploadData` objects.
The `callback` has to be called with an `response` object.
#### `webRequest.onBeforeSendHeaders([filter, ]listener)`
* `filter` Object
* `listener` Function
The `listener` will be called with `listener(details, callback)` before sending
an HTTP request, once the request headers are available. This may occur after a
TCP connection is made to the server, but before any http data is sent.
* `details` Object
* `id` Integer
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `requestHeaders` Object
* `callback` Function
* `response` Object
* `cancel` Boolean (optional)
* `requestHeaders` Object (optional) - When provided, request will be made
with these headers.
The `callback` has to be called with an `response` object.
#### `webRequest.onSendHeaders([filter, ]listener)`
* `filter` Object
* `listener` Function
* `details` Object
* `id` Integer
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `requestHeaders` Object
The `listener` will be called with `listener(details)` just before a request is
going to be sent to the server, modifications of previous `onBeforeSendHeaders`
response are visible by the time this listener is fired.
#### `webRequest.onHeadersReceived([filter, ]listener)`
* `filter` Object
* `listener` Function
The `listener` will be called with `listener(details, callback)` when HTTP
response headers of a request have been received.
* `details` Object
* `id` String
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `statusLine` String
* `statusCode` Integer
* `responseHeaders` Object
* `callback` Function
* `response` Object
* `cancel` Boolean
* `responseHeaders` Object (optional) - When provided, the server is assumed
to have responded with these headers.
* `statusLine` String (optional) - Should be provided when overriding
`responseHeaders` to change header status otherwise original response
header's status will be used.
The `callback` has to be called with an `response` object.
#### `webRequest.onResponseStarted([filter, ]listener)`
* `filter` Object
* `listener` Function
* `details` Object
* `id` Integer
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `responseHeaders` Object
* `fromCache` Boolean - Indicates whether the response was fetched from disk
cache.
* `statusCode` Integer
* `statusLine` String
The `listener` will be called with `listener(details)` when first byte of the
response body is received. For HTTP requests, this means that the status line
and response headers are available.
#### `webRequest.onBeforeRedirect([filter, ]listener)`
* `filter` Object
* `listener` Function
* `details` Object
* `id` String
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `redirectURL` String
* `statusCode` Integer
* `ip` String (optional) - The server IP address that the request was
actually sent to.
* `fromCache` Boolean
* `responseHeaders` Object
The `listener` will be called with `listener(details)` when a server initiated
redirect is about to occur.
#### `webRequest.onCompleted([filter, ]listener)`
* `filter` Object
* `listener` Function
* `details` Object
* `id` Integer
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `responseHeaders` Object
* `fromCache` Boolean
* `statusCode` Integer
* `statusLine` String
The `listener` will be called with `listener(details)` when a request is
completed.
#### `webRequest.onErrorOccurred([filter, ]listener)`
* `filter` Object
* `listener` Function
* `details` Object
* `id` Integer
* `url` String
* `method` String
* `resourceType` String
* `timestamp` Double
* `fromCache` Boolean
* `error` String - The error description.
The `listener` will be called with `listener(details)` when an error occurs.

View file

@ -0,0 +1,910 @@
# `<webview>` Tag
> Display external web content in an isolated frame and process.
Use the `webview` tag to embed 'guest' content (such as web pages) in your
Electron app. The guest content is contained within the `webview` container.
An embedded page within your app controls how the guest content is laid out and
rendered.
Unlike an `iframe`, the `webview` runs in a separate process than your
app. It doesn't have the same permissions as your web page and all interactions
between your app and embedded content will be asynchronous. This keeps your app
safe from the embedded content.
For security purposes, `webview` can only be used in `BrowserWindow`s that have
`nodeIntegration` enabled.
## Example
To embed a web page in your app, add the `webview` tag to your app's embedder
page (this is the app page that will display the guest content). In its simplest
form, the `webview` tag includes the `src` of the web page and css styles that
control the appearance of the `webview` container:
```html
<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
```
If you want to control the guest content in any way, you can write JavaScript
that listens for `webview` events and responds to those events using the
`webview` methods. Here's sample code with two event listeners: one that listens
for the web page to start loading, the other for the web page to stop loading,
and displays a "loading..." message during the load time:
```html
<script>
onload = () => {
const webview = document.getElementById('foo')
const indicator = document.querySelector('.indicator')
const loadstart = () => {
indicator.innerText = 'loading...'
}
const loadstop = () => {
indicator.innerText = ''
}
webview.addEventListener('did-start-loading', loadstart)
webview.addEventListener('did-stop-loading', loadstop)
}
</script>
```
## CSS Styling Notes
Please note that the `webview` tag's style uses `display:flex;` internally to
ensure the child `object` element fills the full height and width of its `webview`
container when used with traditional and flexbox layouts (since v0.36.11). Please
do not overwrite the default `display:flex;` CSS property, unless specifying
`display:inline-flex;` for inline layout.
`webview` has issues being hidden using the `hidden` attribute or using `display: none;`.
It can cause unusual rendering behaviour within its child `browserplugin` object
and the web page is reloaded, when the `webview` is un-hidden, as opposed to just
becoming visible again. The recommended approach is to hide the `webview` using
CSS by zeroing the `width` & `height` and allowing the element to shrink to the 0px
dimensions via `flex`.
```html
<style>
webview {
display:inline-flex;
width:640px;
height:480px;
}
webview.hide {
flex: 0 1;
width: 0px;
height: 0px;
}
</style>
```
## Tag Attributes
The `webview` tag has the following attributes:
### `src`
```html
<webview src="https://www.github.com/"></webview>
```
Returns the visible URL. Writing to this attribute initiates top-level
navigation.
Assigning `src` its own value will reload the current page.
The `src` attribute can also accept data URLs, such as
`data:text/plain,Hello, world!`.
### `autosize`
```html
<webview src="https://www.github.com/" autosize="on" minwidth="576" minheight="432"></webview>
```
If "on", the `webview` container will automatically resize within the
bounds specified by the attributes `minwidth`, `minheight`, `maxwidth`, and
`maxheight`. These constraints do not impact the `webview` unless `autosize` is
enabled. When `autosize` is enabled, the `webview` container size cannot be less
than the minimum values or greater than the maximum.
### `nodeintegration`
```html
<webview src="http://www.google.com/" nodeintegration></webview>
```
If "on", the guest page in `webview` will have node integration and can use node
APIs like `require` and `process` to access low level system resources.
### `plugins`
```html
<webview src="https://www.github.com/" plugins></webview>
```
If "on", the guest page in `webview` will be able to use browser plugins.
### `preload`
```html
<webview src="https://www.github.com/" preload="./test.js"></webview>
```
Specifies a script that will be loaded before other scripts run in the guest
page. The protocol of script's URL must be either `file:` or `asar:`, because it
will be loaded by `require` in guest page under the hood.
When the guest page doesn't have node integration this script will still have
access to all Node APIs, but global objects injected by Node will be deleted
after this script has finished executing.
### `httpreferrer`
```html
<webview src="https://www.github.com/" httpreferrer="http://cheng.guru"></webview>
```
Sets the referrer URL for the guest page.
### `useragent`
```html
<webview src="https://www.github.com/" useragent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"></webview>
```
Sets the user agent for the guest page before the page is navigated to. Once the
page is loaded, use the `setUserAgent` method to change the user agent.
### `disablewebsecurity`
```html
<webview src="https://www.github.com/" disablewebsecurity></webview>
```
If "on", the guest page will have web security disabled.
### `partition`
```html
<webview src="https://github.com" partition="persist:github"></webview>
<webview src="http://electron.atom.io" partition="electron"></webview>
```
Sets the session used by the page. If `partition` starts with `persist:`, the
page will use a persistent session available to all pages in the app with the
same `partition`. if there is no `persist:` prefix, the page will use an
in-memory session. By assigning the same `partition`, multiple pages can share
the same session. If the `partition` is unset then default session of the app
will be used.
This value can only be modified before the first navigation, since the session
of an active renderer process cannot change. Subsequent attempts to modify the
value will fail with a DOM exception.
### `allowpopups`
```html
<webview src="https://www.github.com/" allowpopups></webview>
```
If "on", the guest page will be allowed to open new windows.
### `webpreferences`
```html
<webview src="https://github.com" webpreferences="allowDisplayingInsecureContent, javascript=no"></webview>
```
A list of strings which specifies the web preferences to be set on the webview, separated by `,`.
The full list of supported preference strings can be found in [BrowserWindow](browser-window.md#new-browserwindowoptions).
The string follows the same format as the features string in `window.open`.
A name by itself is given a `true` boolean value.
A preference can be set to another value by including an `=`, followed by the value.
Special values `yes` and `1` are interpreted as `true`, while `no` and `0` are interpreted as `false`.
### `blinkfeatures`
```html
<webview src="https://www.github.com/" blinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>
```
A list of strings which specifies the blink features to be enabled separated by `,`.
The full list of supported feature strings can be found in the
[RuntimeEnabledFeatures.in][blink-feature-string] file.
### `disableblinkfeatures`
```html
<webview src="https://www.github.com/" disableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>
```
A list of strings which specifies the blink features to be disabled separated by `,`.
The full list of supported feature strings can be found in the
[RuntimeEnabledFeatures.in][blink-feature-string] file.
### `guestinstance`
```html
<webview src="https://www.github.com/" guestinstance="3"></webview>
```
A value that links the webview to a specific webContents. When a webview
first loads a new webContents is created and this attribute is set to its
instance identifier. Setting this attribute on a new or existing webview
connects it to the existing webContents that currently renders in a different
webview.
The existing webview will see the `destroy` event and will then create a new
webContents when a new url is loaded.
### `disableguestresize`
```html
<webview src="https://www.github.com/" disableguestresize></webview>
```
Prevents the webview contents from resizing when the webview element itself is
resized.
This can be used in combination with
[`webContents.setSize`](web-contents.md#contentssetsizeoptions) to manually
resize the webview contents in reaction to a window size change. This can
make resizing faster compared to relying on the webview element bounds to
automatically resize the contents.
```javascript
const {webContents} = require('electron')
// We assume that `win` points to a `BrowserWindow` instance containing a
// `<webview>` with `disableguestresize`.
win.on('resize', () => {
const [width, height] = win.getContentSize()
for (let wc of webContents.getAllWebContents()) {
// Check if `wc` belongs to a webview in the `win` window.
if (wc.hostWebContents &&
wc.hostWebContents.id === win.webContents.id) {
wc.setSize({
normal: {
width: width,
height: height
}
})
}
}
})
```
## Methods
The `webview` tag has the following methods:
**Note:** The webview element must be loaded before using the methods.
**Example**
```javascript
const webview = document.getElementById('foo')
webview.addEventListener('dom-ready', () => {
webview.openDevTools()
})
```
### `<webview>.loadURL(url[, options])`
* `url` URL
* `options` Object (optional)
* `httpReferrer` String (optional) - A HTTP Referrer url.
* `userAgent` String (optional) - A user agent originating the request.
* `extraHeaders` String (optional) - Extra headers separated by "\n"
* `postData` ([UploadRawData](structures/upload-raw-data.md) | [UploadFile](structures/upload-file.md) | [UploadFileSystem](structures/upload-file-system.md) | [UploadBlob](structures/upload-blob.md))[] - (optional)
Loads the `url` in the webview, the `url` must contain the protocol prefix,
e.g. the `http://` or `file://`.
### `<webview>.getURL()`
Returns `String` - The URL of guest page.
### `<webview>.getTitle()`
Returns `String` - The title of guest page.
### `<webview>.isLoading()`
Returns `Boolean` - Whether guest page is still loading resources.
### `<webview>.isWaitingForResponse()`
Returns `Boolean` - Whether the guest page is waiting for a first-response for the
main resource of the page.
### `<webview>.stop()`
Stops any pending navigation.
### `<webview>.reload()`
Reloads the guest page.
### `<webview>.reloadIgnoringCache()`
Reloads the guest page and ignores cache.
### `<webview>.canGoBack()`
Returns `Boolean` - Whether the guest page can go back.
### `<webview>.canGoForward()`
Returns `Boolean` - Whether the guest page can go forward.
### `<webview>.canGoToOffset(offset)`
* `offset` Integer
Returns `Boolean` - Whether the guest page can go to `offset`.
### `<webview>.clearHistory()`
Clears the navigation history.
### `<webview>.goBack()`
Makes the guest page go back.
### `<webview>.goForward()`
Makes the guest page go forward.
### `<webview>.goToIndex(index)`
* `index` Integer
Navigates to the specified absolute index.
### `<webview>.goToOffset(offset)`
* `offset` Integer
Navigates to the specified offset from the "current entry".
### `<webview>.isCrashed()`
Returns `Boolean` - Whether the renderer process has crashed.
### `<webview>.setUserAgent(userAgent)`
* `userAgent` String
Overrides the user agent for the guest page.
### `<webview>.getUserAgent()`
Returns `String` - The user agent for guest page.
### `<webview>.insertCSS(css)`
* `css` String
Injects CSS into the guest page.
### `<webview>.executeJavaScript(code, userGesture, callback)`
* `code` String
* `userGesture` Boolean - Default `false`.
* `callback` Function (optional) - Called after script has been executed.
* `result` Any
Evaluates `code` in page. If `userGesture` is set, it will create the user
gesture context in the page. HTML APIs like `requestFullScreen`, which require
user action, can take advantage of this option for automation.
### `<webview>.openDevTools()`
Opens a DevTools window for guest page.
### `<webview>.closeDevTools()`
Closes the DevTools window of guest page.
### `<webview>.isDevToolsOpened()`
Returns `Boolean` - Whether guest page has a DevTools window attached.
### `<webview>.isDevToolsFocused()`
Returns `Boolean` - Whether DevTools window of guest page is focused.
### `<webview>.inspectElement(x, y)`
* `x` Integer
* `y` Integer
Starts inspecting element at position (`x`, `y`) of guest page.
### `<webview>.inspectServiceWorker()`
Opens the DevTools for the service worker context present in the guest page.
### `<webview>.setAudioMuted(muted)`
* `muted` Boolean
Set guest page muted.
### `<webview>.isAudioMuted()`
Returns `Boolean` - Whether guest page has been muted.
### `<webview>.undo()`
Executes editing command `undo` in page.
### `<webview>.redo()`
Executes editing command `redo` in page.
### `<webview>.cut()`
Executes editing command `cut` in page.
### `<webview>.copy()`
Executes editing command `copy` in page.
### `<webview>.paste()`
Executes editing command `paste` in page.
### `<webview>.pasteAndMatchStyle()`
Executes editing command `pasteAndMatchStyle` in page.
### `<webview>.delete()`
Executes editing command `delete` in page.
### `<webview>.selectAll()`
Executes editing command `selectAll` in page.
### `<webview>.unselect()`
Executes editing command `unselect` in page.
### `<webview>.replace(text)`
* `text` String
Executes editing command `replace` in page.
### `<webview>.replaceMisspelling(text)`
* `text` String
Executes editing command `replaceMisspelling` in page.
### `<webview>.insertText(text)`
* `text` String
Inserts `text` to the focused element.
### `<webview>.findInPage(text[, options])`
* `text` String - Content to be searched, must not be empty.
* `options` Object (optional)
* `forward` Boolean - Whether to search forward or backward, defaults to `true`.
* `findNext` Boolean - Whether the operation is first request or a follow up,
defaults to `false`.
* `matchCase` Boolean - Whether search should be case-sensitive,
defaults to `false`.
* `wordStart` Boolean - Whether to look only at the start of words.
defaults to `false`.
* `medialCapitalAsWordStart` Boolean - When combined with `wordStart`,
accepts a match in the middle of a word if the match begins with an
uppercase letter followed by a lowercase or non-letter.
Accepts several other intra-word matches, defaults to `false`.
Starts a request to find all matches for the `text` in the web page and returns an `Integer`
representing the request id used for the request. The result of the request can be
obtained by subscribing to [`found-in-page`](webview-tag.md#event-found-in-page) event.
### `<webview>.stopFindInPage(action)`
* `action` String - Specifies the action to take place when ending
[`<webview>.findInPage`](webview-tag.md#webviewtagfindinpage) request.
* `clearSelection` - Clear the selection.
* `keepSelection` - Translate the selection into a normal selection.
* `activateSelection` - Focus and click the selection node.
Stops any `findInPage` request for the `webview` with the provided `action`.
### `<webview>.print([options])`
Prints `webview`'s web page. Same as `webContents.print([options])`.
### `<webview>.printToPDF(options, callback)`
Prints `webview`'s web page as PDF, Same as `webContents.printToPDF(options, callback)`.
### `<webview>.capturePage([rect, ]callback)`
Captures a snapshot of the `webview`'s page. Same as `webContents.capturePage([rect, ]callback)`.
### `<webview>.send(channel[, arg1][, arg2][, ...])`
* `channel` String
* `arg` (optional)
Send an asynchronous message to renderer process via `channel`, you can also
send arbitrary arguments. The renderer process can handle the message by
listening to the `channel` event with the `ipcRenderer` module.
See [webContents.send](web-contents.md#webcontentssendchannel-args) for
examples.
### `<webview>.sendInputEvent(event)`
* `event` Object
Sends an input `event` to the page.
See [webContents.sendInputEvent](web-contents.md#webcontentssendinputeventevent)
for detailed description of `event` object.
### `<webview>.setZoomFactor(factor)`
* `factor` Number - Zoom factor.
Changes the zoom factor to the specified factor. Zoom factor is
zoom percent divided by 100, so 300% = 3.0.
### `<webview>.setZoomLevel(level)`
* `level` Number - Zoom level
Changes the zoom level to the specified level. The original size is 0 and each
increment above or below represents zooming 20% larger or smaller to default
limits of 300% and 50% of original size, respectively.
### `<webview>.showDefinitionForSelection()` _macOS_
Shows pop-up dictionary that searches the selected word on the page.
### `<webview>.getWebContents()`
Returns [`WebContents`](web-contents.md) - The web contents associated with
this `webview`.
## DOM events
The following DOM events are available to the `webview` tag:
### Event: 'load-commit'
Returns:
* `url` String
* `isMainFrame` Boolean
Fired when a load has committed. This includes navigation within the current
document as well as subframe document-level loads, but does not include
asynchronous resource loads.
### Event: 'did-finish-load'
Fired when the navigation is done, i.e. the spinner of the tab will stop
spinning, and the `onload` event is dispatched.
### Event: 'did-fail-load'
Returns:
* `errorCode` Integer
* `errorDescription` String
* `validatedURL` String
* `isMainFrame` Boolean
This event is like `did-finish-load`, but fired when the load failed or was
cancelled, e.g. `window.stop()` is invoked.
### Event: 'did-frame-finish-load'
Returns:
* `isMainFrame` Boolean
Fired when a frame has done navigation.
### Event: 'did-start-loading'
Corresponds to the points in time when the spinner of the tab starts spinning.
### Event: 'did-stop-loading'
Corresponds to the points in time when the spinner of the tab stops spinning.
### Event: 'did-get-response-details'
Returns:
* `status` Boolean
* `newURL` String
* `originalURL` String
* `httpResponseCode` Integer
* `requestMethod` String
* `referrer` String
* `headers` Object
* `resourceType` String
Fired when details regarding a requested resource is available.
`status` indicates socket connection to download the resource.
### Event: 'did-get-redirect-request'
Returns:
* `oldURL` String
* `newURL` String
* `isMainFrame` Boolean
Fired when a redirect was received while requesting a resource.
### Event: 'dom-ready'
Fired when document in the given frame is loaded.
### Event: 'page-title-updated'
Returns:
* `title` String
* `explicitSet` Boolean
Fired when page title is set during navigation. `explicitSet` is false when
title is synthesized from file url.
### Event: 'page-favicon-updated'
Returns:
* `favicons` String[] - Array of URLs.
Fired when page receives favicon urls.
### Event: 'enter-html-full-screen'
Fired when page enters fullscreen triggered by HTML API.
### Event: 'leave-html-full-screen'
Fired when page leaves fullscreen triggered by HTML API.
### Event: 'console-message'
Returns:
* `level` Integer
* `message` String
* `line` Integer
* `sourceId` String
Fired when the guest window logs a console message.
The following example code forwards all log messages to the embedder's console
without regard for log level or other properties.
```javascript
const webview = document.getElementById('foo')
webview.addEventListener('console-message', (e) => {
console.log('Guest page logged a message:', e.message)
})
```
### Event: 'found-in-page'
Returns:
* `result` Object
* `requestId` Integer
* `activeMatchOrdinal` Integer - Position of the active match.
* `matches` Integer - Number of Matches.
* `selectionArea` Object - Coordinates of first match region.
Fired when a result is available for
[`webview.findInPage`](webview-tag.md#webviewtagfindinpage) request.
```javascript
const webview = document.getElementById('foo')
webview.addEventListener('found-in-page', (e) => {
webview.stopFindInPage('keepSelection')
})
const requestId = webview.findInPage('test')
console.log(requestId)
```
### Event: 'new-window'
Returns:
* `url` String
* `frameName` String
* `disposition` String - Can be `default`, `foreground-tab`, `background-tab`,
`new-window`, `save-to-disk` and `other`.
* `options` Object - The options which should be used for creating the new
`BrowserWindow`.
Fired when the guest page attempts to open a new browser window.
The following example code opens the new url in system's default browser.
```javascript
const {shell} = require('electron')
const webview = document.getElementById('foo')
webview.addEventListener('new-window', (e) => {
const protocol = require('url').parse(e.url).protocol
if (protocol === 'http:' || protocol === 'https:') {
shell.openExternal(e.url)
}
})
```
### Event: 'will-navigate'
Returns:
* `url` String
Emitted when a user or the page wants to start navigation. It can happen when
the `window.location` object is changed or a user clicks a link in the page.
This event will not emit when the navigation is started programmatically with
APIs like `<webview>.loadURL` and `<webview>.back`.
It is also not emitted during in-page navigation, such as clicking anchor links
or updating the `window.location.hash`. Use `did-navigate-in-page` event for
this purpose.
Calling `event.preventDefault()` does __NOT__ have any effect.
### Event: 'did-navigate'
Returns:
* `url` String
Emitted when a navigation is done.
This event is not emitted for in-page navigations, such as clicking anchor links
or updating the `window.location.hash`. Use `did-navigate-in-page` event for
this purpose.
### Event: 'did-navigate-in-page'
Returns:
* `isMainFrame` Boolean
* `url` String
Emitted when an in-page navigation happened.
When in-page navigation happens, the page URL changes but does not cause
navigation outside of the page. Examples of this occurring are when anchor links
are clicked or when the DOM `hashchange` event is triggered.
### Event: 'close'
Fired when the guest page attempts to close itself.
The following example code navigates the `webview` to `about:blank` when the
guest attempts to close itself.
```javascript
const webview = document.getElementById('foo')
webview.addEventListener('close', () => {
webview.src = 'about:blank'
})
```
### Event: 'ipc-message'
Returns:
* `channel` String
* `args` Array
Fired when the guest page has sent an asynchronous message to embedder page.
With `sendToHost` method and `ipc-message` event you can easily communicate
between guest page and embedder page:
```javascript
// In embedder page.
const webview = document.getElementById('foo')
webview.addEventListener('ipc-message', (event) => {
console.log(event.channel)
// Prints "pong"
})
webview.send('ping')
```
```javascript
// In guest page.
const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
ipcRenderer.sendToHost('pong')
})
```
### Event: 'crashed'
Fired when the renderer process is crashed.
### Event: 'gpu-crashed'
Fired when the gpu process is crashed.
### Event: 'plugin-crashed'
Returns:
* `name` String
* `version` String
Fired when a plugin process is crashed.
### Event: 'destroyed'
Fired when the WebContents is destroyed.
### Event: 'media-started-playing'
Emitted when media starts playing.
### Event: 'media-paused'
Emitted when media is paused or done playing.
### Event: 'did-change-theme-color'
Returns:
* `themeColor` String
Emitted when a page's theme color changes. This is usually due to encountering a meta tag:
```html
<meta name='theme-color' content='#ff0000'>
```
### Event: 'update-target-url'
Returns:
* `url` String
Emitted when mouse moves over a link or the keyboard moves the focus to a link.
### Event: 'devtools-opened'
Emitted when DevTools is opened.
### Event: 'devtools-closed'
Emitted when DevTools is closed.
### Event: 'devtools-focused'
Emitted when DevTools is focused / opened.
[blink-feature-string]: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in

View file

@ -0,0 +1,43 @@
# `window.open` Function
> Open a new window and load a URL.
When `window.open` is called to create a new window in a web page, a new instance
of `BrowserWindow` will be created for the `url` and a proxy will be returned
to `window.open` to let the page have limited control over it.
The proxy has limited standard functionality implemented to be
compatible with traditional web pages. For full control of the new window
you should create a `BrowserWindow` directly.
The newly created `BrowserWindow` will inherit the parent window's options by
default. To override inherited options you can set them in the `features`
string.
### `window.open(url[, frameName][, features])`
* `url` String
* `frameName` String (optional)
* `features` String (optional)
Returns [`BrowserWindowProxy`](browser-window-proxy.md) - Creates a new window
and returns an instance of `BrowserWindowProxy` class.
The `features` string follows the format of standard browser, but each feature
has to be a field of `BrowserWindow`'s options.
**Notes:**
* Node integration will always be disabled in the opened `window` if it is
disabled on the parent window.
* Non-standard features (that are not handled by Chromium or Electron) given in
`features` will be passed to any registered `webContent`'s `new-window` event
handler in the `additionalFeatures` argument.
### `window.opener.postMessage(message, targetOrigin)`
* `message` String
* `targetOrigin` String
Sends a message to the parent window with the specified origin or `*` for no
origin preference.

View file

@ -0,0 +1,52 @@
# Technical Differences Between Electron and NW.js (formerly node-webkit)
__Note: Electron was previously named Atom Shell.__
Like NW.js, Electron provides a platform to write desktop applications
with JavaScript and HTML and has Node integration to grant access to the low
level system from web pages.
But there are also fundamental differences between the two projects that make
Electron a completely separate product from NW.js:
__1. Entry of Application__
In NW.js the main entry point of an application is a web page. You specify a
main page URL in the `package.json` and it is opened in a browser window as
the application's main window.
In Electron, the entry point is a JavaScript script. Instead of
providing a URL directly, you manually create a browser window and load
an HTML file using the API. You also need to listen to window events
to decide when to quit the application.
Electron works more like the Node.js runtime. Electron's APIs are lower level
so you can use it for browser testing in place of [PhantomJS](http://phantomjs.org/).
__2. Build System__
In order to avoid the complexity of building all of Chromium, Electron uses [`libchromiumcontent`](https://github.com/brightray/libchromiumcontent) to access
Chromium's Content API. `libchromiumcontent` is a single shared library that
includes the Chromium Content module and all of its dependencies. Users don't
need a powerful machine to build Electron.
__3. Node Integration__
In NW.js, the Node integration in web pages requires patching Chromium to
work, while in Electron we chose a different way to integrate the libuv loop
with each platform's message loop to avoid hacking Chromium. See the
[`node_bindings`][node-bindings] code for how that was done.
__4. Multi-context__
If you are an experienced NW.js user, you should be familiar with the
concept of Node context and web context. These concepts were invented because
of how NW.js was implemented.
By using the [multi-context](http://strongloop.com/strongblog/whats-new-node-js-v0-12-multiple-context-execution/)
feature of Node, Electron doesn't introduce a new JavaScript context in web
pages.
Note: NW.js has optionally supported multi-context since 0.13.
[node-bindings]: https://github.com/electron/electron/tree/master/atom/common

View file

@ -0,0 +1,204 @@
# Build Instructions (Linux)
Follow the guidelines below for building Electron on Linux.
## Prerequisites
* At least 25GB disk space and 8GB RAM.
* Python 2.7.x. Some distributions like CentOS 6.x still use Python 2.6.x
so you may need to check your Python version with `python -V`.
* Node.js. There are various ways to install Node. You can download
source code from [Node.js](http://nodejs.org) and compile from source.
Doing so permits installing Node on your own home directory as a standard user.
Or try repositories such as [NodeSource](https://nodesource.com/blog/nodejs-v012-iojs-and-the-nodesource-linux-repositories).
* Clang 3.4 or later.
* Development headers of GTK+ and libnotify.
On Ubuntu, install the following libraries:
```bash
$ sudo apt-get install build-essential clang libdbus-1-dev libgtk2.0-dev \
libnotify-dev libgnome-keyring-dev libgconf2-dev \
libasound2-dev libcap-dev libcups2-dev libxtst-dev \
libxss1 libnss3-dev gcc-multilib g++-multilib curl \
gperf bison
```
On RHEL / CentOS, install the following libraries:
```bash
$ sudo yum install clang dbus-devel gtk2-devel libnotify-devel \
libgnome-keyring-devel xorg-x11-server-utils libcap-devel \
cups-devel libXtst-devel alsa-lib-devel libXrandr-devel \
GConf2-devel nss-devel
```
On Fedora, install the following libraries:
```bash
$ sudo dnf install clang dbus-devel gtk2-devel libnotify-devel \
libgnome-keyring-devel xorg-x11-server-utils libcap-devel \
cups-devel libXtst-devel alsa-lib-devel libXrandr-devel \
GConf2-devel nss-devel
```
Other distributions may offer similar packages for installation via package
managers such as pacman. Or one can compile from source code.
## Getting the Code
```bash
$ git clone https://github.com/electron/electron.git
```
## Bootstrapping
The bootstrap script will download all necessary build dependencies and create
the build project files. You must have Python 2.7.x for the script to succeed.
Downloading certain files can take a long time. Notice that we are using
`ninja` to build Electron so there is no `Makefile` generated.
```bash
$ cd electron
$ ./script/bootstrap.py -v
```
### Cross compilation
If you want to build for an `arm` target you should also install the following
dependencies:
```bash
$ sudo apt-get install libc6-dev-armhf-cross linux-libc-dev-armhf-cross \
g++-arm-linux-gnueabihf
```
And to cross compile for `arm` or `ia32` targets, you should pass the
`--target_arch` parameter to the `bootstrap.py` script:
```bash
$ ./script/bootstrap.py -v --target_arch=arm
```
## Building
If you would like to build both `Release` and `Debug` targets:
```bash
$ ./script/build.py
```
This script will cause a very large Electron executable to be placed in
the directory `out/R`. The file size is in excess of 1.3 gigabytes. This
happens because the Release target binary contains debugging symbols.
To reduce the file size, run the `create-dist.py` script:
```bash
$ ./script/create-dist.py
```
This will put a working distribution with much smaller file sizes in
the `dist` directory. After running the create-dist.py script, you
may want to remove the 1.3+ gigabyte binary which is still in `out/R`.
You can also build the `Debug` target only:
```bash
$ ./script/build.py -c D
```
After building is done, you can find the `electron` debug binary under `out/D`.
## Cleaning
To clean the build files:
```bash
$ npm run clean
```
## Troubleshooting
### Error While Loading Shared Libraries: libtinfo.so.5
Prebulit `clang` will try to link to `libtinfo.so.5`. Depending on the host
architecture, symlink to appropriate `libncurses`:
```bash
$ sudo ln -s /usr/lib/libncurses.so.5 /usr/lib/libtinfo.so.5
```
## Tests
See [Build System Overview: Tests](build-system-overview.md#tests)
## Advanced topics
The default building configuration is targeted for major desktop Linux
distributions, to build for a specific distribution or device, following
information may help you.
### Building `libchromiumcontent` locally
To avoid using the prebuilt binaries of `libchromiumcontent`, you can pass the
`--build_libchromiumcontent` switch to `bootstrap.py` script:
```bash
$ ./script/bootstrap.py -v --build_libchromiumcontent
```
Note that by default the `shared_library` configuration is not built, so you can
only build `Release` version of Electron if you use this mode:
```bash
$ ./script/build.py -c R
```
### Using system `clang` instead of downloaded `clang` binaries
By default Electron is built with prebuilt `clang` binaries provided by Chromium
project. If for some reason you want to build with the `clang` installed in your
system, you can call `bootstrap.py` with `--clang_dir=<path>` switch. By passing
it the build script will assume the `clang` binaries reside in `<path>/bin/`.
For example if you installed `clang` under `/user/local/bin/clang`:
```bash
$ ./script/bootstrap.py -v --build_libchromiumcontent --clang_dir /usr/local
$ ./script/build.py -c R
```
### Using other compilers other than `clang`
To build Electron with compilers like `g++`, you first need to disable `clang`
with `--disable_clang` switch first, and then set `CC` and `CXX` environment
variables to the ones you want.
For example building with GCC toolchain:
```bash
$ env CC=gcc CXX=g++ ./script/bootstrap.py -v --build_libchromiumcontent --disable_clang
$ ./script/build.py -c R
```
### Environment variables
Apart from `CC` and `CXX`, you can also set following environment variables to
custom the building configurations:
* `CPPFLAGS`
* `CPPFLAGS_host`
* `CFLAGS`
* `CFLAGS_host`
* `CXXFLAGS`
* `CXXFLAGS_host`
* `AR`
* `AR_host`
* `CC`
* `CC_host`
* `CXX`
* `CXX_host`
* `LDFLAGS`
The environment variables have to be set when executing the `bootstrap.py`
script, it won't work in the `build.py` script.

View file

@ -0,0 +1,64 @@
# Build Instructions (macOS)
Follow the guidelines below for building Electron on macOS.
## Prerequisites
* macOS >= 10.8
* [Xcode](https://developer.apple.com/technologies/tools/) >= 5.1
* [node.js](http://nodejs.org) (external)
If you are using the Python downloaded by Homebrew, you also need to install
the following Python modules:
* [pyobjc](https://pythonhosted.org/pyobjc/install.html)
## Getting the Code
```bash
$ git clone https://github.com/electron/electron
```
## Bootstrapping
The bootstrap script will download all necessary build dependencies and create
the build project files. Notice that we're using [ninja](https://ninja-build.org/)
to build Electron so there is no Xcode project generated.
```bash
$ cd electron
$ ./script/bootstrap.py -v
```
## Building
Build both `Release` and `Debug` targets:
```bash
$ ./script/build.py
```
You can also only build the `Debug` target:
```bash
$ ./script/build.py -c D
```
After building is done, you can find `Electron.app` under `out/D`.
## 32bit Support
Electron can only be built for a 64bit target on macOS and there is no plan to
support 32bit macOS in the future.
## Cleaning
To clean the build files:
```bash
$ npm run clean
```
## Tests
See [Build System Overview: Tests](build-system-overview.md#tests)

View file

@ -0,0 +1,146 @@
# Build Instructions (Windows)
Follow the guidelines below for building Electron on Windows.
## Prerequisites
* Windows 7 / Server 2008 R2 or higher
* Visual Studio 2015 - [download VS 2015 Community Edition for
free](https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx)
* [Python 2.7](http://www.python.org/download/releases/2.7/)
* [Node.js](http://nodejs.org/download/)
* [Git](http://git-scm.com)
If you don't currently have a Windows installation,
[dev.microsoftedge.com](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)
has timebombed versions of Windows that you can use to build Electron.
Building Electron is done entirely with command-line scripts and cannot be done
with Visual Studio. You can develop Electron with any editor but support for
building with Visual Studio will come in the future.
**Note:** Even though Visual Studio is not used for building, it's still
**required** because we need the build toolchains it provides.
**Note:** While older versions of Electron required Visual Studio 2013, Electron 1.1 and later does require Visual Studio 2015.
## Getting the Code
```powershell
$ git clone https://github.com/electron/electron.git
```
## Bootstrapping
The bootstrap script will download all necessary build dependencies and create
the build project files. Notice that we're using `ninja` to build Electron so
there is no Visual Studio project generated.
```powershell
$ cd electron
$ python script\bootstrap.py -v
```
## Building
Build both Release and Debug targets:
```powershell
$ python script\build.py
```
You can also only build the Debug target:
```powershell
$ python script\build.py -c D
```
After building is done, you can find `electron.exe` under `out\D` (debug
target) or under `out\R` (release target).
## 32bit Build
To build for the 32bit target, you need to pass `--target_arch=ia32` when
running the bootstrap script:
```powershell
$ python script\bootstrap.py -v --target_arch=ia32
```
The other building steps are exactly the same.
## Visual Studio project
To generate a Visual Studio project, you can pass the `--msvs` parameter:
```powershell
$ python script\bootstrap.py --msvs
```
## Cleaning
To clean the build files:
```powershell
$ npm run clean
```
## Tests
See [Build System Overview: Tests](build-system-overview.md#tests)
## Troubleshooting
### Command xxxx not found
If you encountered an error like `Command xxxx not found`, you may try to use
the `VS2015 Command Prompt` console to execute the build scripts.
### Fatal internal compiler error: C1001
Make sure you have the latest Visual Studio update installed.
### Assertion failed: ((handle))->activecnt >= 0
If building under Cygwin, you may see `bootstrap.py` failed with following
error:
```
Assertion failed: ((handle))->activecnt >= 0, file src\win\pipe.c, line 1430
Traceback (most recent call last):
File "script/bootstrap.py", line 87, in <module>
sys.exit(main())
File "script/bootstrap.py", line 22, in main
update_node_modules('.')
File "script/bootstrap.py", line 56, in update_node_modules
execute([NPM, 'install'])
File "/home/zcbenz/codes/raven/script/lib/util.py", line 118, in execute
raise e
subprocess.CalledProcessError: Command '['npm.cmd', 'install']' returned non-zero exit status 3
```
This is caused by a bug when using Cygwin Python and Win32 Node together. The
solution is to use the Win32 Python to execute the bootstrap script (assuming
you have installed Python under `C:\Python27`):
```powershell
$ /cygdrive/c/Python27/python.exe script/bootstrap.py
```
### LNK1181: cannot open input file 'kernel32.lib'
Try reinstalling 32bit Node.js.
### Error: ENOENT, stat 'C:\Users\USERNAME\AppData\Roaming\npm'
Simply making that directory [should fix the problem](http://stackoverflow.com/a/25095327/102704):
```powershell
$ mkdir ~\AppData\Roaming\npm
```
### node-gyp is not recognized as an internal or external command
You may get this error if you are using Git Bash for building, you should use
PowerShell or VS2015 Command Prompt instead.

View file

@ -0,0 +1,122 @@
# Build System Overview
Electron uses [gyp](https://gyp.gsrc.io/) for project generation and
[ninja](https://ninja-build.org/) for building. Project configurations can
be found in the `.gyp` and `.gypi` files.
## Gyp Files
Following `gyp` files contain the main rules for building Electron:
* `electron.gyp` defines how Electron itself is built.
* `common.gypi` adjusts the build configurations of Node to make it build
together with Chromium.
* `vendor/brightray/brightray.gyp` defines how `brightray` is built and
includes the default configurations for linking with Chromium.
* `vendor/brightray/brightray.gypi` includes general build configurations about
building.
## Component Build
Since Chromium is quite a large project, the final linking stage can take
quite a few minutes, which makes it hard for development. In order to solve
this, Chromium introduced the "component build", which builds each component as
a separate shared library, making linking very quick but sacrificing file size
and performance.
In Electron we took a very similar approach: for `Debug` builds, the binary
will be linked to a shared library version of Chromium's components to achieve
fast linking time; for `Release` builds, the binary will be linked to the static
library versions, so we can have the best possible binary size and performance.
## Minimal Bootstrapping
All of Chromium's prebuilt binaries (`libchromiumcontent`) are downloaded when
running the bootstrap script. By default both static libraries and shared
libraries will be downloaded and the final size should be between 800MB and 2GB
depending on the platform.
By default, `libchromiumcontent` is downloaded from Amazon Web Services.
If the `LIBCHROMIUMCONTENT_MIRROR` environment variable is set, the bootstrap
script will download from it.
[`libchromiumcontent-qiniu-mirror`](https://github.com/hokein/libchromiumcontent-qiniu-mirror)
is a mirror for `libchromiumcontent`. If you have trouble in accessing AWS, you
can switch the download address to it via
`export LIBCHROMIUMCONTENT_MIRROR=http://7xk3d2.dl1.z0.glb.clouddn.com/`
If you only want to build Electron quickly for testing or development, you
can download just the shared library versions by passing the `--dev` parameter:
```bash
$ ./script/bootstrap.py --dev
$ ./script/build.py -c D
```
## Two-Phase Project Generation
Electron links with different sets of libraries in `Release` and `Debug`
builds. `gyp`, however, doesn't support configuring different link settings for
different configurations.
To work around this Electron uses a `gyp` variable
`libchromiumcontent_component` to control which link settings to use and only
generates one target when running `gyp`.
## Target Names
Unlike most projects that use `Release` and `Debug` as target names, Electron
uses `R` and `D` instead. This is because `gyp` randomly crashes if there is
only one `Release` or `Debug` build configuration defined, and Electron only has
to generate one target at a time as stated above.
This only affects developers, if you are just building Electron for rebranding
you are not affected.
## Tests
Test your changes conform to the project coding style using:
```bash
$ npm run lint
```
Test functionality using:
```bash
$ npm test
```
Whenever you make changes to Electron source code, you'll need to re-run the
build before the tests:
```bash
$ npm run build && npm test
```
You can make the test suite run faster by isolating the specific test or block
you're currently working on using Mocha's
[exclusive tests](https://mochajs.org/#exclusive-tests) feature. Just append
`.only` to any `describe` or `it` function call:
```js
describe.only('some feature', function () {
// ... only tests in this block will be run
})
```
Alternatively, you can use mocha's `grep` option to only run tests matching the
given regular expression pattern:
```sh
$ npm test -- --grep child_process
```
Tests that include native modules (e.g. `runas`) can't be executed with the
debug build (see [#2558](https://github.com/electron/electron/issues/2558) for
details), but they will work with the release build.
To run the tests with the release build use:
```bash
$ npm test -- -R
```

View file

@ -0,0 +1,34 @@
# Using clang-format on C++ Code
[`clang-format`](http://clang.llvm.org/docs/ClangFormat.html) is a tool to
automatically format C/C++/Objective-C code, so that developers don't need to
worry about style issues during code reviews.
It is highly recommended to format your changed C++ code before opening pull
requests, which will save you and the reviewers' time.
You can install `clang-format` and `git-clang-format` via
`npm install -g clang-format`.
To automatically format a file according to Electron C++ code style, simply run
`clang-format -i path/to/electron/file.cc`. It should work on macOS/Linux/Windows.
The workflow to format your changed code:
1. Make codes changes in Electron repository.
2. Run `git add your_changed_file.cc`.
3. Run `git-clang-format`, and you will probably see modifications in
`your_changed_file.cc`, these modifications are generated from `clang-format`.
4. Run `git add your_changed_file.cc`, and commit your change.
5. Now the branch is ready to be opened as a pull request.
If you want to format the changed code on your latest git commit (HEAD), you can
run `git-clang-format HEAD~1`. See `git-clang-format -h` for more details.
## Editor Integration
You can also integrate `clang-format` directly into your favorite editors.
For further guidance on setting up editor integration, see these pages:
* [Atom](https://atom.io/packages/clang-format)
* [Vim & Emacs](http://clang.llvm.org/docs/ClangFormat.html#vim-integration)

View file

@ -0,0 +1,55 @@
# Coding Style
These are the style guidelines for coding in Electron.
You can run `npm run lint` to show any style issues detected by `cpplint` and
`eslint`.
## C++ and Python
For C++ and Python, we follow Chromium's [Coding
Style](http://www.chromium.org/developers/coding-style). You can use
[clang-format](clang-format.md) to format the C++ code automatically. There is
also a script `script/cpplint.py` to check whether all files conform.
The Python version we are using now is Python 2.7.
The C++ code uses a lot of Chromium's abstractions and types, so it's
recommended to get acquainted with them. A good place to start is
Chromium's [Important Abstractions and Data Structures](https://www.chromium.org/developers/coding-style/important-abstractions-and-data-structures)
document. The document mentions some special types, scoped types (that
automatically release their memory when going out of scope), logging mechanisms
etc.
## JavaScript
* Write [standard](http://npm.im/standard) JavaScript style.
* File names should be concatenated with `-` instead of `_`, e.g.
`file-name.js` rather than `file_name.js`, because in
[github/atom](https://github.com/github/atom) module names are usually in
the `module-name` form. This rule only applies to `.js` files.
* Use newer ES6/ES2015 syntax where appropriate
* [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
for requires and other constants
* [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
for defining variables
* [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
instead of `function () { }`
* [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
instead of string concatenation using `+`
## Naming Things
Electron APIs uses the same capitalization scheme as Node.js:
- When the module itself is a class like `BrowserWindow`, use `CamelCase`.
- When the module is a set of APIs, like `globalShortcut`, use `mixedCase`.
- When the API is a property of object, and it is complex enough to be in a
separate chapter like `win.webContents`, use `mixedCase`.
- For other non-module APIs, use natural titles, like `<webview> Tag` or
`Process Object`.
When creating a new API, it is preferred to use getters and setters instead of
jQuery's one-function style. For example, `.getText()` and `.setText(text)`
are preferred to `.text([text])`. There is a
[discussion](https://github.com/electron/electron/issues/46) on this.

View file

@ -0,0 +1,93 @@
# Debugging on Windows
If you experience crashes or issues in Electron that you believe are not caused
by your JavaScript application, but instead by Electron itself, debugging can
be a little bit tricky, especially for developers not used to native/C++
debugging. However, using Visual Studio, GitHub's hosted Electron Symbol Server,
and the Electron source code, it is fairly easy to enable step-through debugging
with breakpoints inside Electron's source code.
## Requirements
* **A debug build of Electron**: The easiest way is usually building it
yourself, using the tools and prerequisites listed in the
[build instructions for Windows](build-instructions-windows.md). While you can
easily attach to and debug Electron as you can download it directly, you will
find that it is heavily optimized, making debugging substantially more
difficult: The debugger will not be able to show you the content of all
variables and the execution path can seem strange because of inlining,
tail calls, and other compiler optimizations.
* **Visual Studio with C++ Tools**: The free community editions of Visual
Studio 2013 and Visual Studio 2015 both work. Once installed,
[configure Visual Studio to use GitHub's Electron Symbol server](setting-up-symbol-server.md).
It will enable Visual Studio to gain a better understanding of what happens
inside Electron, making it easier to present variables in a human-readable
format.
* **ProcMon**: The [free SysInternals tool][sys-internals] allows you to inspect
a processes parameters, file handles, and registry operations.
## Attaching to and Debugging Electron
To start a debugging session, open up PowerShell/CMD and execute your debug
build of Electron, using the application to open as a parameter.
```powershell
$ ./out/D/electron.exe ~/my-electron-app/
```
### Setting Breakpoints
Then, open up Visual Studio. Electron is not built with Visual Studio and hence
does not contain a project file - you can however open up the source code files
"As File", meaning that Visual Studio will open them up by themselves. You can
still set breakpoints - Visual Studio will automatically figure out that the
source code matches the code running in the attached process and break
accordingly.
Relevant code files can be found in `./atom/` as well as in Brightray, found in
`./vendor/brightray/browser` and `./vendor/brightray/common`. If you're hardcore,
you can also debug Chromium directly, which is obviously found in `chromium_src`.
### Attaching
You can attach the Visual Studio debugger to a running process on a local or
remote computer. After the process is running, click Debug / Attach to Process
(or press `CTRL+ALT+P`) to open the "Attach to Process" dialog box. You can use
this capability to debug apps that are running on a local or remote computer,
debug multiple processes simultaneously.
If Electron is running under a different user account, select the
`Show processes from all users` check box. Notice that depending on how many
BrowserWindows your app opened, you will see multiple processes. A typical
one-window app will result in Visual Studio presenting you with two
`Electron.exe` entries - one for the main process and one for the renderer
process. Since the list only gives you names, there's currently no reliable
way of figuring out which is which.
### Which Process Should I Attach to?
Code executed within the main process (that is, code found in or eventually run
by your main JavaScript file) as well as code called using the remote
(`require('electron').remote`) will run inside the main process, while other
code will execute inside its respective renderer process.
You can be attached to multiple programs when you are debugging, but only one
program is active in the debugger at any time. You can set the active program
in the `Debug Location` toolbar or the `Processes window`.
## Using ProcMon to Observe a Process
While Visual Studio is fantastic for inspecting specific code paths, ProcMon's
strength is really in observing everything your application is doing with the
operating system - it captures File, Registry, Network, Process, and Profiling
details of processes. It attempts to log **all** events occurring and can be
quite overwhelming, but if you seek to understand what and how your application
is doing to the operating system, it can be a valuable resource.
For an introduction to ProcMon's basic and advanced debugging features, go check
out [this video tutorial][procmon-instructions] provided by Microsoft.
[sys-internals]: https://technet.microsoft.com/en-us/sysinternals/processmonitor.aspx
[procmon-instructions]: https://channel9.msdn.com/shows/defrag-tools/defrag-tools-4-process-monitor

View file

@ -0,0 +1,125 @@
# Debugging on macOS
If you experience crashes or issues in Electron that you believe are not caused
by your JavaScript application, but instead by Electron itself, debugging can
be a little bit tricky, especially for developers not used to native/C++
debugging. However, using lldb, and the Electron source code, it is fairly easy
to enable step-through debugging with breakpoints inside Electron's source code.
## Requirements
* **A debug build of Electron**: The easiest way is usually building it
yourself, using the tools and prerequisites listed in the
[build instructions for macOS](build-instructions-osx.md). While you can
easily attach to and debug Electron as you can download it directly, you will
find that it is heavily optimized, making debugging substantially more
difficult: The debugger will not be able to show you the content of all
variables and the execution path can seem strange because of inlining,
tail calls, and other compiler optimizations.
* **Xcode**: In addition to Xcode, also install the Xcode command line tools.
They include LLDB, the default debugger in Xcode on Mac OS X. It supports
debugging C, Objective-C and C++ on the desktop and iOS devices and simulator.
## Attaching to and Debugging Electron
To start a debugging session, open up Terminal and start `lldb`, passing a debug
build of Electron as a parameter.
```bash
$ lldb ./out/D/Electron.app
(lldb) target create "./out/D/Electron.app"
Current executable set to './out/D/Electron.app' (x86_64).
```
### Setting Breakpoints
LLDB is a powerful tool and supports multiple strategies for code inspection. For
this basic introduction, let's assume that you're calling a command from JavaScript
that isn't behaving correctly - so you'd like to break on that command's C++
counterpart inside the Electron source.
Relevant code files can be found in `./atom/` as well as in Brightray, found in
`./vendor/brightray/browser` and `./vendor/brightray/common`. If you're hardcore,
you can also debug Chromium directly, which is obviously found in `chromium_src`.
Let's assume that you want to debug `app.setName()`, which is defined in `browser.cc`
as `Browser::SetName()`. Set the breakpoint using the `breakpoint` command, specifying
file and line to break on:
```bash
(lldb) breakpoint set --file browser.cc --line 117
Breakpoint 1: where = Electron Framework`atom::Browser::SetName(std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&) + 20 at browser.cc:118, address = 0x000000000015fdb4
```
Then, start Electron:
```bash
(lldb) run
```
The app will immediately be paused, since Electron sets the app's name on launch:
```bash
(lldb) run
Process 25244 launched: '/Users/fr/Code/electron/out/D/Electron.app/Contents/MacOS/Electron' (x86_64)
Process 25244 stopped
* thread #1: tid = 0x839a4c, 0x0000000100162db4 Electron Framework`atom::Browser::SetName(this=0x0000000108b14f20, name="Electron") + 20 at browser.cc:118, queue = 'com.apple.main-thread', stop reason = breakpoint 1.1
frame #0: 0x0000000100162db4 Electron Framework`atom::Browser::SetName(this=0x0000000108b14f20, name="Electron") + 20 at browser.cc:118
115 }
116
117 void Browser::SetName(const std::string& name) {
-> 118 name_override_ = name;
119 }
120
121 int Browser::GetBadgeCount() {
(lldb)
```
To show the arguments and local variables for the current frame, run `frame variable` (or `fr v`),
which will show you that the app is currently setting the name to "Electron".
```bash
(lldb) frame variable
(atom::Browser *) this = 0x0000000108b14f20
(const string &) name = "Electron": {
[...]
}
```
To do a source level single step in the currently selected thread, execute `step` (or `s`).
This would take you into into `name_override_.empty()`. To proceed and do a step over,
run `next` (or `n`).
```bash
(lldb) step
Process 25244 stopped
* thread #1: tid = 0x839a4c, 0x0000000100162dcc Electron Framework`atom::Browser::SetName(this=0x0000000108b14f20, name="Electron") + 44 at browser.cc:119, queue = 'com.apple.main-thread', stop reason = step in
frame #0: 0x0000000100162dcc Electron Framework`atom::Browser::SetName(this=0x0000000108b14f20, name="Electron") + 44 at browser.cc:119
116
117 void Browser::SetName(const std::string& name) {
118 name_override_ = name;
-> 119 }
120
121 int Browser::GetBadgeCount() {
122 return badge_count_;
```
To finish debugging at this point, run `process continue`. You can also continue until a certain
line is hit in this thread (`thread until 100`). This command will run the thread in the current
frame till it reaches line 100 in this frame or stops if it leaves the current frame.
Now, if you open up Electron's developer tools and call `setName`, you will once again hit the
breakpoint.
### Further Reading
LLDB is a powerful tool with a great documentation. To learn more about it, consider
Apple's debugging documentation, for instance the [LLDB Command Structure Reference][lldb-command-structure]
or the introduction to [Using LLDB as a Standalone Debugger][lldb-standalone].
You can also check out LLDB's fantastic [manual and tutorial][lldb-tutorial], which
will explain more complex debugging scenarios.
[lldb-command-structure]: https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/gdb_to_lldb_transition_guide/document/lldb-basics.html#//apple_ref/doc/uid/TP40012917-CH2-SW2
[lldb-standalone]: https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/gdb_to_lldb_transition_guide/document/lldb-terminal-workflow-tutorial.html
[lldb-tutorial]: http://lldb.llvm.org/tutorial.html

View file

@ -0,0 +1,101 @@
# Releasing
This document describes the process for releasing a new version of Electron.
## Compile release notes
The current process is to maintain a local file, keeping track of notable changes as pull requests are merged. For examples of how to format the notes, see previous releases on [the releases page].
## Create a temporary branch
Create a new branch from `master` named `release`.
```sh
git checkout master
git pull
git checkout -b release
```
This branch is created as a precaution to prevent any merged PRs from sneaking into a release between the time the temporary release branch is created and the CI builds are complete.
## Bump the version
Run the `bump-version` script, passing `major`, `minor`, or `patch` as an argument:
```sh
npm run bump-version -- patch
git push origin HEAD
```
This will bump the version number in several files. See [this bump commit] for an example.
Most releases will be `patch` level. Upgrades to Chrome or other major changes should use `minor`. For more info, see [electron-versioning].
## Edit the release draft
1. Visit [the releases page] and you'll see a new draft release with placeholder release notes.
1. Edit the release and add release notes.
1. Click 'Save draft'. **Do not click 'Publish release'!**
1. Wait for all the builds to pass. :hourglass_flowing_sand:
## Merge temporary branch
Merge the temporary back into master, without creating a merge commit:
```sh
git merge release master --no-commit
git push origin master
```
If this fails, rebase with master and rebuild:
```sh
git pull
git checkout release
git rebase master
git push origin HEAD
```
## Run local debug build
Run local debug build to verify that you are actually building the version you want. Sometimes you thought you were doing a release for a new version, but you're actually not.
```sh
npm run build
npm start
```
Verify the window is displaying the current updated version.
## Set environment variables
You'll need to set the following environment variables to publish a release. Ask another team member for these credentials.
- `ELECTRON_S3_BUCKET`
- `ELECTRON_S3_ACCESS_KEY`
- `ELECTRON_S3_SECRET_KEY`
- `ELECTRON_GITHUB_TOKEN` - A personal access token with "repo" scope.
You will only need to do this once.
## Publish the release
This script will download the binaries and generate the node headers and the .lib linker used on Windows by node-gyp to build native modules.
```sh
npm run release
```
Note: Many distributions of Python still ship with old HTTPS certificates. You may see a `InsecureRequestWarning`, but it can be disregarded.
## Delete the temporary branch
```sh
git checkout master
git branch -D release # delete local branch
git push origin :release # delete remote branch
```
[the releases page]: https://github.com/electron/electron/releases
[this bump commit]: https://github.com/electron/electron/commit/78ec1b8f89b3886b856377a1756a51617bc33f5a
[electron-versioning]: /docs/tutorial/electron-versioning.md

View file

@ -0,0 +1,56 @@
# Setting Up Symbol Server in Debugger
Debug symbols allow you to have better debugging sessions. They have information
about the functions contained in executables and dynamic libraries and provide
you with information to get clean call stacks. A Symbol Server allows the
debugger to load the correct symbols, binaries and sources automatically without
forcing users to download large debugging files. The server functions like
[Microsoft's symbol server](http://support.microsoft.com/kb/311503) so the
documentation there can be useful.
Note that because released Electron builds are heavily optimized, debugging is
not always easy. The debugger will not be able to show you the content of all
variables and the execution path can seem strange because of inlining, tail
calls, and other compiler optimizations. The only workaround is to build an
unoptimized local build.
The official symbol server URL for Electron is
https://electron-symbols.githubapp.com.
You cannot visit this URL directly, you must add it to the symbol path of your
debugging tool. In the examples below, a local cache directory is used to avoid
repeatedly fetching the PDB from the server. Replace `c:\code\symbols` with an
appropriate cache directory on your machine.
## Using the Symbol Server in Windbg
The Windbg symbol path is configured with a string value delimited with asterisk
characters. To use only the Electron symbol server, add the following entry to
your symbol path (**Note:** you can replace `c:\code\symbols` with any writable
directory on your computer, if you'd prefer a different location for downloaded
symbols):
```
SRV*c:\code\symbols\*https://electron-symbols.githubapp.com
```
Set this string as `_NT_SYMBOL_PATH` in the environment, using the Windbg menus,
or by typing the `.sympath` command. If you would like to get symbols from
Microsoft's symbol server as well, you should list that first:
```
SRV*c:\code\symbols\*http://msdl.microsoft.com/download/symbols;SRV*c:\code\symbols\*https://electron-symbols.githubapp.com
```
## Using the symbol server in Visual Studio
<img src='http://mdn.mozillademos.org/files/733/symbol-server-vc8express-menu.jpg'>
<img src='http://mdn.mozillademos.org/files/2497/2005_options.gif'>
## Troubleshooting: Symbols will not load
Type the following commands in Windbg to print why symbols are not loading:
```
> !sym noisy
> .reload /f electron.exe
```

View file

@ -0,0 +1,93 @@
# Source Code Directory Structure
The source code of Electron is separated into a few parts, mostly
following Chromium on the separation conventions.
You may need to become familiar with [Chromium's multi-process
architecture](http://dev.chromium.org/developers/design-documents/multi-process-architecture)
to understand the source code better.
## Structure of Source Code
```
Electron
├── atom/ - C++ source code.
| ├── app/ - System entry code.
| ├── browser/ - The frontend including the main window, UI, and all of the
| | main process things. This talks to the renderer to manage web pages.
| | ├── ui/ - Implementation of UI stuff for different platforms.
| | | ├── cocoa/ - Cocoa specific source code.
| | | ├── win/ - Windows GUI specific source code.
| | | └── x/ - X11 specific source code.
| | ├── api/ - The implementation of the main process APIs.
| | ├── net/ - Network related code.
| | ├── mac/ - Mac specific Objective-C source code.
| | └── resources/ - Icons, platform-dependent files, etc.
| ├── renderer/ - Code that runs in renderer process.
| | └── api/ - The implementation of renderer process APIs.
| └── common/ - Code that used by both the main and renderer processes,
| including some utility functions and code to integrate node's message
| loop into Chromium's message loop.
| └── api/ - The implementation of common APIs, and foundations of
| Electron's built-in modules.
├── chromium_src/ - Source code that copied from Chromium.
├── default_app/ - The default page to show when Electron is started without
| providing an app.
├── docs/ - Documentations.
├── lib/ - JavaScript source code.
| ├── browser/ - Javascript main process initialization code.
| | └── api/ - Javascript API implementation.
| ├── common/ - JavaScript used by both the main and renderer processes
| | └── api/ - Javascript API implementation.
| └── renderer/ - Javascript renderer process initialization code.
| └── api/ - Javascript API implementation.
├── spec/ - Automatic tests.
├── electron.gyp - Building rules of Electron.
└── common.gypi - Compiler specific settings and building rules for other
components like `node` and `breakpad`.
```
## Structure of Other Directories
* **script** - Scripts used for development purpose like building, packaging,
testing, etc.
* **tools** - Helper scripts used by gyp files, unlike `script`, scripts put
here should never be invoked by users directly.
* **vendor** - Source code of third party dependencies, we didn't use
`third_party` as name because it would confuse it with the same directory in
Chromium's source code tree.
* **node_modules** - Third party node modules used for building.
* **out** - Temporary output directory of `ninja`.
* **dist** - Temporary directory created by `script/create-dist.py` script
when creating a distribution.
* **external_binaries** - Downloaded binaries of third-party frameworks which
do not support building with `gyp`.
## Keeping Git Submodules Up to Date
The Electron repository has a few vendored dependencies, found in the
[/vendor][vendor] directory. Occasionally you might see a message like this
when running `git status`:
```sh
$ git status
modified: vendor/brightray (new commits)
modified: vendor/node (new commits)
```
To update these vendored dependencies, run the following command:
```sh
git submodule update --init --recursive
```
If you find yourself running this command often, you can create an alias for it
in your `~/.gitconfig` file:
```
[alias]
su = submodule update --init --recursive
```
[vendor]: https://github.com/electron/electron/tree/master/vendor

View file

@ -0,0 +1,153 @@
# Glossary
This page defines some terminology that is commonly used in Electron development.
### ASAR
ASAR stands for Atom Shell Archive Format. An [asar][asar] archive is a simple
`tar`-like format that concatenates files into a single file. Electron can read
arbitrary files from it without unpacking the whole file.
The ASAR format was created primarily to improve performance on Windows... TODO
### Brightray
[Brightray][brightray] is a static library that makes [libchromiumcontent]
easier to use in applications. It was created specifically for Electron, but can
be used to enable Chromium's renderer in native apps that are not based on
Electron.
Brightray is a low-level dependency of Electron that does not concern the
majority of Electron users.
### DMG
An Apple Disk Image is a packaging format used by macOS. DMG files are
commonly used for distributing application "installers". [electron-builder]
supports `dmg` as a build target.
### IPC
IPC stands for Inter-Process Communication. Electron uses IPC to send
serialized JSON messages between the [main] and [renderer] processes.
### libchromiumcontent
A single, shared library that includes the Chromium Content module and all its
dependencies (e.g., Blink, [V8], etc.).
### main process
The main process, commonly a file named `main.js`, is the entry point to every
Electron app. It controls the life of the app, from open to close. It also
manages native elements such as the Menu, Menu Bar, Dock, Tray, etc. The
main process is responsible for creating each new renderer process in the app.
The full Node API is built in.
Every app's main process file is specified in the `main` property in
`package.json`. This is how `electron .` knows what file to execute at startup.
See also: [process](#process), [renderer process](#renderer-process)
### MAS
Acronym for Apple's Mac App Store. For details on submitting your app to the
MAS, see the [Mac App Store Submission Guide].
### native modules
Native modules (also called [addons] in
Node.js) are modules written in C or C++ that can be loaded into Node.js or
Electron using the require() function, and used just as if they were an
ordinary Node.js module. They are used primarily to provide an interface
between JavaScript running in Node.js and C/C++ libraries.
Native Node modules are supported by Electron, but since Electron is very
likely to use a different V8 version from the Node binary installed in your
system, you have to manually specify the location of Electrons headers when
building native modules.
See also [Using Native Node Modules].
## NSIS
Nullsoft Scriptable Install System is a script-driven Installer
authoring tool for Microsoft Windows. It is released under a combination of
free software licenses, and is a widely-used alternative to commercial
proprietary products like InstallShield. [electron-builder] supports NSIS
as a build target.
### process
A process is an instance of a computer program that is being executed. Electron
apps that make use of the [main] and one or many [renderer] process are
actually running several programs simultaneously.
In Node.js and Electron, each running process has a `process` object. This
object is a global that provides information about, and control over, the
current process. As a global, it is always available to applications without
using require().
See also: [main process](#main-process), [renderer process](#renderer-process)
### renderer process
The renderer process is a browser window in your app. Unlike the main process,
there can be multiple of these and each is run in a separate process.
They can also be hidden.
In normal browsers, web pages usually run in a sandboxed environment and are not
allowed access to native resources. Electron users, however, have the power to
use Node.js APIs in web pages allowing lower level operating system
interactions.
See also: [process](#process), [main process](#main-process)
### Squirrel
Squirrel is an open-source framework that enables Electron apps to update
automatically as new versions are released. See the [autoUpdater] API for
info about getting started with Squirrel.
### userland
This term originated in the Unix community, where "userland" or "userspace"
referred to programs that run outside of the operating system kernel. More
recently, the term has been popularized in the Node and npm community to
distinguish between the features available in "Node core" versus packages
published to the npm registry by the much larger "user" community.
Like Node, Electron is focused on having a small set of APIs that provide
all the necessary primitives for developing multi-platform desktop applications.
This design philosophy allows Electron to remain a flexible tool without being
overly prescriptive about how it should be used. Userland enables users to
create and share tools that provide additional functionality on top of what is
available in "core".
### V8
V8 is Google's open source JavaScript engine. It is written in C++ and is
used in Google Chrome, the open source browser from Google. V8 can run
standalone, or can be embedded into any C++ application.
### webview
`webview` tags are used to embed 'guest' content (such as external web pages) in
your Electron app. They are similar to `iframe`s, but differ in that each
webview runs in a separate process. It doesn't have the same
permissions as your web page and all interactions between your app and
embedded content will be asynchronous. This keeps your app safe from the
embedded content.
[addons]: https://nodejs.org/api/addons.html
[asar]: https://github.com/electron/asar
[autoUpdater]: api/auto-updater.md
[brightray]: https://github.com/electron/brightray
[electron-builder]: https://github.com/electron-userland/electron-builder
[libchromiumcontent]: #libchromiumcontent
[Mac App Store Submission Guide]: tutorials/mac-app-store-submission-guide.md
[main]: #main-process
[renderer]: #renderer-process
[Using Native Node Modules]: tutorial/using-native-node-modules.md
[userland]: #userland
[V8]: #v8

View file

@ -0,0 +1,246 @@
# Electron Documentation Styleguide
These are the guidelines for writing Electron documentation.
## Titles
* Each page must have a single `#`-level title at the top.
* Chapters in the same page must have `##`-level titles.
* Sub-chapters need to increase the number of `#` in the title according to
their nesting depth.
* All words in the page's title must be capitalized, except for conjunctions
like "of" and "and" .
* Only the first word of a chapter title must be capitalized.
Using `Quick Start` as example:
```markdown
# Quick Start
...
## Main process
...
## Renderer process
...
## Run your app
...
### Run as a distribution
...
### Manually downloaded Electron binary
...
```
For API references, there are exceptions to this rule.
## Markdown rules
* Use `bash` instead of `cmd` in code blocks (due to the syntax highlighter).
* Lines should be wrapped at 80 columns.
* No nesting lists more than 2 levels (due to the markdown renderer).
* All `js` and `javascript` code blocks are linted with
[standard-markdown](http://npm.im/standard-markdown).
## Picking words
* Use "will" over "would" when describing outcomes.
* Prefer "in the ___ process" over "on".
## API references
The following rules only apply to the documentation of APIs.
### Page title
Each page must use the actual object name returned by `require('electron')`
as the title, such as `BrowserWindow`, `autoUpdater`, and `session`.
Under the page tile must be a one-line description starting with `>`.
Using `session` as example:
```markdown
# session
> Manage browser sessions, cookies, cache, proxy settings, etc.
```
### Module methods and events
For modules that are not classes, their methods and events must be listed under
the `## Methods` and `## Events` chapters.
Using `autoUpdater` as an example:
```markdown
# autoUpdater
## Events
### Event: 'error'
## Methods
### `autoUpdater.setFeedURL(url[, requestHeaders])`
```
### Classes
* API classes or classes that are part of modules must be listed under a
`## Class: TheClassName` chapter.
* One page can have multiple classes.
* Constructors must be listed with `###`-level titles.
* [Static Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static) must be listed under a `### Static Methods` chapter.
* [Instance Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Prototype_methods) must be listed under an `### Instance Methods` chapter.
* All methods that have a return value must start their description with "Returns `[TYPE]` - Return description"
* If the method returns an `Object`, its structure can be specified using a colon followed by a newline then an unordered list of properties in the same style as function parameters.
* Instance Events must be listed under an `### Instance Events` chapter.
* Instance Properties must be listed under an `### Instance Properties` chapter.
* Instance properties must start with "A [Property Type] ..."
Using the `Session` and `Cookies` classes as an example:
```markdown
# session
## Methods
### session.fromPartition(partition)
## Properties
### session.defaultSession
## Class: Session
### Instance Events
#### Event: 'will-download'
### Instance Methods
#### `ses.getCacheSize(callback)`
### Instance Properties
#### `ses.cookies`
## Class: Cookies
### Instance Methods
#### `cookies.get(filter, callback)`
```
### Methods
The methods chapter must be in the following form:
```markdown
### `objectName.methodName(required[, optional]))`
* `required` String - A parameter description.
* `optional` Integer (optional) - Another parameter description.
...
```
The title can be `###` or `####`-levels depending on whether it is a method of
a module or a class.
For modules, the `objectName` is the module's name. For classes, it must be the
name of the instance of the class, and must not be the same as the module's
name.
For example, the methods of the `Session` class under the `session` module must
use `ses` as the `objectName`.
The optional arguments are notated by square brackets `[]` surrounding the optional argument
as well as the comma required if this optional argument follows another
argument:
```
required[, optional]
```
Below the method is more detailed information on each of the arguments. The type
of argument is notated by either the common types:
* [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
* [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
* [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
* [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
* [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
* Or a custom type like Electron's [`WebContent`](api/web-contents.md)
If an argument or a method is unique to certain platforms, those platforms are
denoted using a space-delimited italicized list following the datatype. Values
can be `macOS`, `Windows`, or `Linux`.
```markdown
* `animate` Boolean (optional) _macOS_ _Windows_ - Animate the thing.
```
`Array` type arguments must specify what elements the array may include in
the description below.
The description for `Function` type arguments should make it clear how it may be
called and list the types of the parameters that will be passed to it.
### Events
The events chapter must be in following form:
```markdown
### Event: 'wake-up'
Returns:
* `time` String
...
```
The title can be `###` or `####`-levels depending on whether it is an event of
a module or a class.
The arguments of an event follow the same rules as methods.
### Properties
The properties chapter must be in following form:
```markdown
### session.defaultSession
...
```
The title can be `###` or `####`-levels depending on whether it is a property of
a module or a class.
## Documentation Translations
Translations of the Electron docs are located within the `docs-translations`
directory.
To add another set (or partial set):
* Create a subdirectory named by language abbreviation.
* Translate the files.
* Update the `README.md` within your language directory to link to the files
you have translated.
* Add a link to your translation directory on the main Electron
[README](https://github.com/electron/electron#documentation-translations).
Note that the files under `docs-translations` must only include the translated
ones, the original English files should not be copied there.

View file

@ -0,0 +1,57 @@
# About Electron
[Electron](http://electron.atom.io) is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining [Chromium](https://www.chromium.org/Home) and [Node.js](https://nodejs.org) into a single runtime and apps can be packaged for Mac, Windows, and Linux.
Electron began in 2013 as the framework on which [Atom](https://atom.io), GitHub's hackable text editor, would be built. The two were open sourced in the Spring of 2014.
It has since become a popular tool used by open source developers, startups, and established companies. [See who is building on Electron](/apps).
Read on to learn more about the contributors and releases of Electron or get started building with Electron in the [Quick Start Guide](quick-start.md).
## Core Team and Contributors
Electron is maintained by a team at GitHub as well as a group of [active contributors](https://github.com/electron/electron/graphs/contributors) from the community. Some of the contributors are individuals and some work at larger companies who are developing on Electron. We're happy to add frequent contributors to the project as maintainers. Read more about [contributing to Electron](https://github.com/electron/electron/blob/master/CONTRIBUTING.md).
## Releases
[Electron releases](https://github.com/electron/electron/releases) frequently. We release when there are significant bug fixes, new APIs or are updating versions of Chromium or Node.js.
### Updating Dependencies
Electron's version of Chromium is usually updated within one or two weeks after a new stable Chromium version is released, depending on the effort involved in the upgrade.
When a new version of Node.js is released, Electron usually waits about a month before upgrading in order to bring in a more stable version.
In Electron, Node.js and Chromium share a single V8 instance—usually the version that Chromium is using. Most of the time this _just works_ but sometimes it means patching Node.js.
### Versioning
Due to the hard dependency on Node.js and Chromium, Electron is in a tricky versioning position and [does not follow `semver`](http://semver.org). You should therefore always reference a specific version of Electron. [Read more about Electron's versioning](http://electron.atom.io/docs/tutorial/electron-versioning/) or see the [versions currently in use](https://electron.atom.io/#electron-versions).
### LTS
Long term support of older versions of Electron does not currently exist. If your current version of Electron works for you, you can stay on it for as long as you'd like. If you want to make use of new features as they come in you should upgrade to a newer version.
A major update came with version `v1.0.0`. If you're not yet using this version, you should [read more about the `v1.0.0` changes](http://electron.atom.io/blog/2016/05/11/electron-1-0).
## Core Philosophy
In order to keep Electron small (file size) and sustainable (the spread of dependencies and APIs) the project limits the scope of the core project.
For instance, Electron uses just the rendering library from Chromium rather than all of Chromium. This makes it easier to upgrade Chromium but also means some browser features found in Google Chrome do not exist in Electron.
New features added to Electron should primarily be native APIs. If a feature can be its own Node.js module, it probably should be. See the [Electron tools built by the community](http://electron.atom.io/community).
## History
Below are milestones in Electron's history.
| :calendar: | :tada: |
| --- | --- |
| **April 2013**| [Atom Shell is started](https://github.com/electron/electron/commit/6ef8875b1e93787fa9759f602e7880f28e8e6b45).|
| **May 2014** | [Atom Shell is open sourced](http://blog.atom.io/2014/05/06/atom-is-now-open-source.html). |
| **April 2015** | [Atom Shell is re-named Electron](https://github.com/electron/electron/pull/1389). |
| **May 2016** | [Electron releases `v1.0.0`](http://electron.atom.io/blog/2016/05/11/electron-1-0).|
| **May 2016** | [Electron apps compatible with Mac App Store](http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide).|
| **August 2016** | [Windows Store support for Electron apps](http://electron.atom.io/docs/tutorial/windows-store-guide).|

View file

@ -0,0 +1,33 @@
# Accessibility
Making accessible applications is important and we're happy to introduce new functionality to [Devtron](http://electron.atom.io/devtron) and [Spectron](http://electron.atom.io/spectron) that gives developers the opportunity to make their apps better for everyone.
---
Accessibility concerns in Electron applications are similar to those of websites because they're both ultimately HTML. With Electron apps, however, you can't use the online resources for accessibility audits because your app doesn't have a URL to point the auditor to.
These new features bring those auditing tools to your Electron app. You can choose to add audits to your tests with Spectron or use them within DevTools with Devtron. Read on for a summary of the tools or checkout our [accessibility documentation](http://electron.atom.io/docs/tutorial/accessibility) for more information.
### Spectron
In the testing framework Spectron, you can now audit each window and `<webview>` tag in your application. For example:
```javascript
app.client.auditAccessibility().then(function (audit) {
if (audit.failed) {
console.error(audit.message)
}
})
```
You can read more about this feature in [Spectron's documentation](https://github.com/electron/spectron#accessibility-testing).
### Devtron
In Devtron, there is a new accessibility tab which will allow you to audit a page in your app, sort and filter the results.
![devtron screenshot](https://cloud.githubusercontent.com/assets/1305617/17156618/9f9bcd72-533f-11e6-880d-389115f40a2a.png)
Both of these tools are using the [Accessibility Developer Tools](https://github.com/GoogleChrome/accessibility-developer-tools) library built by Google for Chrome. You can learn more about the accessibility audit rules this library uses on that [repository's wiki](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules).
If you know of other great accessibility tools for Electron, add them to the [accessibility documentation](http://electron.atom.io/docs/tutorial/accessibility) with a pull request.

View file

@ -0,0 +1,176 @@
# Application Distribution
To distribute your app with Electron, you need to download Electron's [prebuilt
binaries](https://github.com/electron/electron/releases). Next, the folder
containing your app should be named `app` and placed in Electron's resources
directory as shown in the following examples. Note that the location of
Electron's prebuilt binaries is indicated with `electron/` in the examples
below.
On macOS:
```text
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
```
On Windows and Linux:
```text
electron/resources/app
├── package.json
├── main.js
└── index.html
```
Then execute `Electron.app` (or `electron` on Linux, `electron.exe` on Windows),
and Electron will start as your app. The `electron` directory will then be
your distribution to deliver to final users.
## Packaging Your App into a File
Apart from shipping your app by copying all of its source files, you can also
package your app into an [asar](https://github.com/electron/asar) archive to avoid
exposing your app's source code to users.
To use an `asar` archive to replace the `app` folder, you need to rename the
archive to `app.asar`, and put it under Electron's resources directory like
below, and Electron will then try to read the archive and start from it.
On macOS:
```text
electron/Electron.app/Contents/Resources/
└── app.asar
```
On Windows and Linux:
```text
electron/resources/
└── app.asar
```
More details can be found in [Application packaging](application-packaging.md).
## Rebranding with Downloaded Binaries
After bundling your app into Electron, you will want to rebrand Electron
before distributing it to users.
### Windows
You can rename `electron.exe` to any name you like, and edit its icon and other
information with tools like [rcedit](https://github.com/atom/rcedit).
### macOS
You can rename `Electron.app` to any name you want, and you also have to rename
the `CFBundleDisplayName`, `CFBundleIdentifier` and `CFBundleName` fields in the
following files:
* `Electron.app/Contents/Info.plist`
* `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist`
You can also rename the helper app to avoid showing `Electron Helper` in the
Activity Monitor, but make sure you have renamed the helper app's executable
file's name.
The structure of a renamed app would be like:
```
MyApp.app/Contents
├── Info.plist
├── MacOS/
│   └── MyApp
└── Frameworks/
├── MyApp Helper EH.app
| ├── Info.plist
| └── MacOS/
|    └── MyApp Helper EH
├── MyApp Helper NP.app
| ├── Info.plist
| └── MacOS/
|    └── MyApp Helper NP
└── MyApp Helper.app
├── Info.plist
└── MacOS/
   └── MyApp Helper
```
### Linux
You can rename the `electron` executable to any name you like.
## Packaging Tools
Apart from packaging your app manually, you can also choose to use third party
packaging tools to do the work for you:
* [electron-builder](https://github.com/electron-userland/electron-builder)
* [electron-packager](https://github.com/electron-userland/electron-packager)
## Rebranding by Rebuilding Electron from Source
It is also possible to rebrand Electron by changing the product name and
building it from source. To do this you need to modify the `atom.gyp` file and
have a clean rebuild.
### grunt-build-atom-shell
Manually checking out Electron's code and rebuilding could be complicated, so
a Grunt task has been created that will handle this automatically:
[grunt-build-atom-shell](https://github.com/paulcbetts/grunt-build-atom-shell).
This task will automatically handle editing the `.gyp` file, building from
source, then rebuilding your app's native Node modules to match the new
executable name.
### Creating a Custom Electron Fork
Creating a custom fork of Electron is almost certainly not something you will
need to do in order to build your app, even for "Production Level" applications.
Using a tool such as `electron-packager` or `electron-builder` will allow you to
"Rebrand" Electron without having to do these steps.
You need to fork Electron when you have custom C++ code that you have patched
directly into Electron, that either cannot be upstreamed, or has been rejected
from the official version. As maintainers of Electron, we very much would like
to make your scenario work, so please try as hard as you can to get your changes
into the official version of Electron, it will be much much easier on you, and
we appreciate your help.
#### Creating a Custom Release with surf-build
1. Install [Surf](https://github.com/surf-build/surf), via npm:
`npm install -g surf-build@latest`
2. Create a new S3 bucket and create the following empty directory structure:
```
- atom-shell/
- symbols/
- dist/
```
3. Set the following Environment Variables:
* `ELECTRON_GITHUB_TOKEN` - a token that can create releases on GitHub
* `ELECTRON_S3_ACCESS_KEY`, `ELECTRON_S3_BUCKET`, `ELECTRON_S3_SECRET_KEY` -
the place where you'll upload node.js headers as well as symbols
* `ELECTRON_RELEASE` - Set to `true` and the upload part will run, leave unset
and `surf-build` will just do CI-type checks, appropriate to run for every
pull request.
* `CI` - Set to `true` or else it will fail
* `GITHUB_TOKEN` - set it to the same as `ELECTRON_GITHUB_TOKEN`
* `SURF_TEMP` - set to `C:\Temp` on Windows to prevent path too long issues
* `TARGET_ARCH` - set to `ia32` or `x64`
4. In `script/upload.py`, you _must_ set `ELECTRON_REPO` to your fork (`MYORG/electron`),
especially if you are a contributor to Electron proper.
5. `surf-build -r https://github.com/MYORG/electron -s YOUR_COMMIT -n 'surf-PLATFORM-ARCH'`
6. Wait a very, very long time for the build to complete.

View file

@ -0,0 +1,185 @@
# Application Packaging
To mitigate [issues](https://github.com/joyent/node/issues/6960) around long
path names on Windows, slightly speed up `require` and conceal your source code
from cursory inspection, you can choose to package your app into an [asar][asar]
archive with little changes to your source code.
## Generating `asar` Archive
An [asar][asar] archive is a simple tar-like format that concatenates files
into a single file. Electron can read arbitrary files from it without unpacking
the whole file.
Steps to package your app into an `asar` archive:
### 1. Install the asar Utility
```bash
$ npm install -g asar
```
### 2. Package with `asar pack`
```bash
$ asar pack your-app app.asar
```
## Using `asar` Archives
In Electron there are two sets of APIs: Node APIs provided by Node.js and Web
APIs provided by Chromium. Both APIs support reading files from `asar` archives.
### Node API
With special patches in Electron, Node APIs like `fs.readFile` and `require`
treat `asar` archives as virtual directories, and the files in it as normal
files in the filesystem.
For example, suppose we have an `example.asar` archive under `/path/to`:
```bash
$ asar list /path/to/example.asar
/app.js
/file.txt
/dir/module.js
/static/index.html
/static/main.css
/static/jquery.min.js
```
Read a file in the `asar` archive:
```javascript
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')
```
List all files under the root of the archive:
```javascript
const fs = require('fs')
fs.readdirSync('/path/to/example.asar')
```
Use a module from the archive:
```javascript
require('/path/to/example.asar/dir/module.js')
```
You can also display a web page in an `asar` archive with `BrowserWindow`:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('file:///path/to/example.asar/static/index.html')
```
### Web API
In a web page, files in an archive can be requested with the `file:` protocol.
Like the Node API, `asar` archives are treated as directories.
For example, to get a file with `$.get`:
```html
<script>
let $ = require('./jquery.min.js')
$.get('file:///path/to/example.asar/file.txt', (data) => {
console.log(data)
})
</script>
```
### Treating an `asar` Archive as a Normal File
For some cases like verifying the `asar` archive's checksum, we need to read the
content of an `asar` archive as a file. For this purpose you can use the built-in
`original-fs` module which provides original `fs` APIs without `asar` support:
```javascript
const originalFs = require('original-fs')
originalFs.readFileSync('/path/to/example.asar')
```
You can also set `process.noAsar` to `true` to disable the support for `asar` in
the `fs` module:
```javascript
const fs = require('fs')
process.noAsar = true
fs.readFileSync('/path/to/example.asar')
```
## Limitations of the Node API
Even though we tried hard to make `asar` archives in the Node API work like
directories as much as possible, there are still limitations due to the
low-level nature of the Node API.
### Archives Are Read-only
The archives can not be modified so all Node APIs that can modify files will not
work with `asar` archives.
### Working Directory Can Not Be Set to Directories in Archive
Though `asar` archives are treated as directories, there are no actual
directories in the filesystem, so you can never set the working directory to
directories in `asar` archives. Passing them as the `cwd` option of some APIs
will also cause errors.
### Extra Unpacking on Some APIs
Most `fs` APIs can read a file or get a file's information from `asar` archives
without unpacking, but for some APIs that rely on passing the real file path to
underlying system calls, Electron will extract the needed file into a
temporary file and pass the path of the temporary file to the APIs to make them
work. This adds a little overhead for those APIs.
APIs that requires extra unpacking are:
* `child_process.execFile`
* `child_process.execFileSync`
* `fs.open`
* `fs.openSync`
* `process.dlopen` - Used by `require` on native modules
### Fake Stat Information of `fs.stat`
The `Stats` object returned by `fs.stat` and its friends on files in `asar`
archives is generated by guessing, because those files do not exist on the
filesystem. So you should not trust the `Stats` object except for getting file
size and checking file type.
### Executing Binaries Inside `asar` Archive
There are Node APIs that can execute binaries like `child_process.exec`,
`child_process.spawn` and `child_process.execFile`, but only `execFile` is
supported to execute binaries inside `asar` archive.
This is because `exec` and `spawn` accept `command` instead of `file` as input,
and `command`s are executed under shell. There is no reliable way to determine
whether a command uses a file in asar archive, and even if we do, we can not be
sure whether we can replace the path in command without side effects.
## Adding Unpacked Files in `asar` Archive
As stated above, some Node APIs will unpack the file to filesystem when
calling, apart from the performance issues, it could also lead to false alerts
of virus scanners.
To work around this, you can unpack some files creating archives by using the
`--unpack` option, an example of excluding shared libraries of native modules
is:
```bash
$ asar pack app app.asar --unpack *.node
```
After running the command, apart from the `app.asar`, there is also an
`app.asar.unpacked` folder generated which contains the unpacked files, you
should copy it together with `app.asar` when shipping it to users.
[asar]: https://github.com/electron/asar

View file

@ -0,0 +1,131 @@
# Debugging the Main Process in node-inspector
[`node-inspector`][node-inspector] provides a familiar DevTools GUI that can
be used in Chrome to debug Electron's main process, however, because
`node-inspector` relies on some native Node modules they must be rebuilt to
target the version of Electron you wish to debug. You can either rebuild
the `node-inspector` dependencies yourself, or let
[`electron-inspector`][electron-inspector] do it for you, both approaches are
covered in this document.
**Note**: At the time of writing the latest release of `node-inspector`
(0.12.8) can't be rebuilt to target Electron 1.3.0 or later without patching
one of its dependencies. If you use `electron-inspector` it will take care of
this for you.
## Use `electron-inspector` for Debugging
### 1. Install the [node-gyp required tools][node-gyp-required-tools]
### 2. Install [`electron-rebuild`][electron-rebuild], if you haven't done so already.
```shell
npm install electron-rebuild --save-dev
```
### 3. Install [`electron-inspector`][electron-inspector]
```shell
npm install electron-inspector --save-dev
```
### 4. Start Electron
Launch Electron with the `--debug` switch:
```shell
electron --debug=5858 your/app
```
or, to pause execution on the first line of JavaScript:
```shell
electron --debug-brk=5858 your/app
```
### 5. Start electron-inspector
On macOS / Linux:
```shell
node_modules/.bin/electron-inspector
```
On Windows:
```shell
node_modules\\.bin\\electron-inspector
```
`electron-inspector` will need to rebuild `node-inspector` dependencies on the
first run, and any time you change your Electron version. The rebuild process
may require an internet connection to download Node headers and libs, and may
take a few minutes.
### 6. Load the debugger UI
Open http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 in the Chrome
browser. You may have to click pause if starting with `--debug-brk` to force
the UI to update.
## Use `node-inspector` for Debugging
### 1. Install the [node-gyp required tools][node-gyp-required-tools]
### 2. Install [`node-inspector`][node-inspector]
```bash
$ npm install node-inspector
```
### 3. Install [`node-pre-gyp`][node-pre-gyp]
```bash
$ npm install node-pre-gyp
```
### 4. Recompile the `node-inspector` `v8` modules for Electron
**Note:** Update the target argument to be your Electron version number
```bash
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-debug/ --dist-url=https://atom.io/download/atom-shell reinstall
$ node_modules/.bin/node-pre-gyp --target=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall
```
See also [How to install native modules][how-to-install-native-modules].
### 5. Enable debug mode for Electron
You can either start Electron with a debug flag like:
```bash
$ electron --debug=5858 your/app
```
or, to pause your script on the first line:
```bash
$ electron --debug-brk=5858 your/app
```
### 6. Start the [`node-inspector`][node-inspector] server using Electron
```bash
$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js
```
### 7. Load the debugger UI
Open http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 in the Chrome
browser. You may have to click pause if starting with `--debug-brk` to see the
entry line.
[electron-inspector]: https://github.com/enlight/electron-inspector
[electron-rebuild]: https://github.com/electron/electron-rebuild
[node-inspector]: https://github.com/node-inspector/node-inspector
[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp
[node-gyp-required-tools]: https://github.com/nodejs/node-gyp#installation
[how-to-install-native-modules]: using-native-node-modules.md#how-to-install-native-modules

View file

@ -0,0 +1,34 @@
# Debugging the Main Process in VSCode
### 1. Open an Electron project in VSCode.
```bash
$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start
```
### 2. Add a file `.vscode/launch.json` with the following configuration:
```json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"program": "${workspaceRoot}/main.js"
}
]
}
```
**Note:** For Windows, use `"${workspaceRoot}/node_modules/.bin/electron.cmd"` for `runtimeExecutable`.
### 3. Debugging
Set some breakpoints in `main.js`, and start debugging in the [Debug View](https://code.visualstudio.com/docs/editor/debugging). You should be able to hit the breakpoints.
Here is a pre-configured project that you can download and directly debug in VSCode: https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

View file

@ -0,0 +1,33 @@
# Debugging the Main Process
The DevTools in an Electron browser window can only debug JavaScript that's
executed in that window (i.e. the web pages). To debug JavaScript that's
executed in the main process you will need to use an external debugger and
launch Electron with the `--debug` or `--debug-brk` switch.
## Command Line Switches
Use one of the following command line switches to enable debugging of the main
process:
### `--debug=[port]`
Electron will listen for V8 debugger protocol messages on the specified `port`,
an external debugger will need to connect on this port. The default `port` is
`5858`.
```shell
electron --debug=5858 your/app
```
### `--debug-brk=[port]`
Like `--debug` but pauses execution on the first line of JavaScript.
## External Debuggers
You will need to use a debugger that supports the V8 debugger protocol,
the following guides should help you to get started:
- [Debugging the Main Process in VSCode](debugging-main-process-vscode.md)
- [Debugging the Main Process in node-inspector](debugging-main-process-node-inspector.md)

View file

@ -0,0 +1,399 @@
# Desktop Environment Integration
Different operating systems provide different features for integrating desktop
applications into their desktop environments. For example, on Windows,
applications can put shortcuts in the JumpList of task bar, and on Mac,
applications can put a custom menu in the dock menu.
This guide explains how to integrate your application into those desktop
environments with Electron APIs.
## Notifications (Windows, Linux, macOS)
All three operating systems provide means for applications to send notifications
to the user. Electron conveniently allows developers to send notifications with
the [HTML5 Notification API](https://notifications.spec.whatwg.org/), using
the currently running operating system's native notification APIs to display it.
**Note:** Since this is an HTML5 API it is only available in the renderer process.
```javascript
let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
```
While code and user experience across operating systems are similar, there
are fine differences.
### Windows
* On Windows 10, notifications "just work".
* On Windows 8.1 and Windows 8, a shortcut to your app, with a [Application User
Model ID][app-user-model-id], must be installed to the Start screen. Note,
however, that it does not need to be pinned to the Start screen.
* On Windows 7, notifications are not supported. You can however send
"balloon notifications" using the [Tray API][tray-balloon].
Furthermore, the maximum length for the notification body is 250 characters,
with the Windows team recommending that notifications should be kept to 200
characters.
### Linux
Notifications are sent using `libnotify`, it can show notifications on any
desktop environment that follows [Desktop Notifications
Specification][notification-spec], including Cinnamon, Enlightenment, Unity,
GNOME, KDE.
### macOS
Notifications are straight-forward on macOS, you should however be aware of
[Apple's Human Interface guidelines regarding notifications](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/NotificationCenter.html).
Note that notifications are limited to 256 bytes in size - and will be truncated
if you exceed that limit.
## Recent documents (Windows & macOS)
Windows and macOS provide easy access to a list of recent documents opened by
the application via JumpList or dock menu, respectively.
__JumpList:__
![JumpList Recent Files](http://i.msdn.microsoft.com/dynimg/IC420538.png)
__Application dock menu:__
<img src="https://cloud.githubusercontent.com/assets/639601/5069610/2aa80758-6e97-11e4-8cfb-c1a414a10774.png" height="353" width="428" >
To add a file to recent documents, you can use the
[app.addRecentDocument][addrecentdocument] API:
```javascript
const {app} = require('electron')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')
```
And you can use [app.clearRecentDocuments][clearrecentdocuments] API to empty
the recent documents list:
```javascript
const {app} = require('electron')
app.clearRecentDocuments()
```
### Windows Notes
In order to be able to use this feature on Windows, your application has to be
registered as a handler of the file type of the document, otherwise the file
won't appear in JumpList even after you have added it. You can find everything
on registering your application in [Application Registration][app-registration].
When a user clicks a file from the JumpList, a new instance of your application
will be started with the path of the file added as a command line argument.
### macOS Notes
When a file is requested from the recent documents menu, the `open-file` event
of `app` module will be emitted for it.
## Custom Dock Menu (macOS)
macOS enables developers to specify a custom menu for the dock, which usually
contains some shortcuts for commonly used features of your application:
__Dock menu of Terminal.app:__
<img src="https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png" height="354" width="341" >
To set your custom dock menu, you can use the `app.dock.setMenu` API, which is
only available on macOS:
```javascript
const {app, Menu} = require('electron')
const dockMenu = Menu.buildFromTemplate([
{label: 'New Window', click () { console.log('New Window') }},
{label: 'New Window with Settings',
submenu: [
{label: 'Basic'},
{label: 'Pro'}
]
},
{label: 'New Command...'}
])
app.dock.setMenu(dockMenu)
```
## User Tasks (Windows)
On Windows you can specify custom actions in the `Tasks` category of JumpList,
as quoted from MSDN:
> Applications define tasks based on both the program's features and the key
> things a user is expected to do with them. Tasks should be context-free, in
> that the application does not need to be running for them to work. They
> should also be the statistically most common actions that a normal user would
> perform in an application, such as compose an email message or open the
> calendar in a mail program, create a new document in a word processor, launch
> an application in a certain mode, or launch one of its subcommands. An
> application should not clutter the menu with advanced features that standard
> users won't need or one-time actions such as registration. Do not use tasks
> for promotional items such as upgrades or special offers.
>
> It is strongly recommended that the task list be static. It should remain the
> same regardless of the state or status of the application. While it is
> possible to vary the list dynamically, you should consider that this could
> confuse the user who does not expect that portion of the destination list to
> change.
__Tasks of Internet Explorer:__
![IE](http://i.msdn.microsoft.com/dynimg/IC420539.png)
Unlike the dock menu in macOS which is a real menu, user tasks in Windows work
like application shortcuts such that when user clicks a task, a program will be
executed with specified arguments.
To set user tasks for your application, you can use
[app.setUserTasks][setusertaskstasks] API:
```javascript
const {app} = require('electron')
app.setUserTasks([
{
program: process.execPath,
arguments: '--new-window',
iconPath: process.execPath,
iconIndex: 0,
title: 'New Window',
description: 'Create a new window'
}
])
```
To clean your tasks list, just call `app.setUserTasks` with an empty array:
```javascript
const {app} = require('electron')
app.setUserTasks([])
```
The user tasks will still show even after your application closes, so the icon
and program path specified for a task should exist until your application is
uninstalled.
## Thumbnail Toolbars
On Windows you can add a thumbnail toolbar with specified buttons in a taskbar
layout of an application window. It provides users a way to access to a
particular window's command without restoring or activating the window.
From MSDN, it's illustrated:
> This toolbar is simply the familiar standard toolbar common control. It has a
> maximum of seven buttons. Each button's ID, image, tooltip, and state are defined
> in a structure, which is then passed to the taskbar. The application can show,
> enable, disable, or hide buttons from the thumbnail toolbar as required by its
> current state.
>
> For example, Windows Media Player might offer standard media transport controls
> such as play, pause, mute, and stop.
__Thumbnail toolbar of Windows Media Player:__
![player](https://i-msdn.sec.s-msft.com/dynimg/IC420540.png)
You can use [BrowserWindow.setThumbarButtons][setthumbarbuttons] to set
thumbnail toolbar in your application:
```javascript
const {BrowserWindow} = require('electron')
const path = require('path')
let win = new BrowserWindow({
width: 800,
height: 600
})
win.setThumbarButtons([
{
tooltip: 'button1',
icon: path.join(__dirname, 'button1.png'),
click () { console.log('button1 clicked') }
},
{
tooltip: 'button2',
icon: path.join(__dirname, 'button2.png'),
flags: ['enabled', 'dismissonclick'],
click () { console.log('button2 clicked.') }
}
])
```
To clean thumbnail toolbar buttons, just call `BrowserWindow.setThumbarButtons`
with an empty array:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setThumbarButtons([])
```
## Unity Launcher Shortcuts (Linux)
In Unity, you can add custom entries to its launcher via modifying the
`.desktop` file, see [Adding Shortcuts to a Launcher][unity-launcher].
__Launcher shortcuts of Audacious:__
![audacious](https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles?action=AttachFile&do=get&target=shortcuts.png)
## Progress Bar in Taskbar (Windows, macOS, Unity)
On Windows a taskbar button can be used to display a progress bar. This enables
a window to provide progress information to the user without the user having to
switch to the window itself.
On macOS the progress bar will be displayed as a part of the dock icon.
The Unity DE also has a similar feature that allows you to specify the progress
bar in the launcher.
__Progress bar in taskbar button:__
![Taskbar Progress Bar](https://cloud.githubusercontent.com/assets/639601/5081682/16691fda-6f0e-11e4-9676-49b6418f1264.png)
To set the progress bar for a Window, you can use the
[BrowserWindow.setProgressBar][setprogressbar] API:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setProgressBar(0.5)
```
## Icon Overlays in Taskbar (Windows)
On Windows a taskbar button can use a small overlay to display application
status, as quoted from MSDN:
> Icon overlays serve as a contextual notification of status, and are intended
> to negate the need for a separate notification area status icon to communicate
> that information to the user. For instance, the new mail status in Microsoft
> Outlook, currently shown in the notification area, can now be indicated
> through an overlay on the taskbar button. Again, you must decide during your
> development cycle which method is best for your application. Overlay icons are
> intended to supply important, long-standing status or notifications such as
> network status, messenger status, or new mail. The user should not be
> presented with constantly changing overlays or animations.
__Overlay on taskbar button:__
![Overlay on taskbar button](https://i-msdn.sec.s-msft.com/dynimg/IC420441.png)
To set the overlay icon for a window, you can use the
[BrowserWindow.setOverlayIcon][setoverlayicon] API:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')
```
## Flash Frame (Windows)
On Windows you can highlight the taskbar button to get the user's attention.
This is similar to bouncing the dock icon on macOS.
From the MSDN reference documentation:
> Typically, a window is flashed to inform the user that the window requires
> attention but that it does not currently have the keyboard focus.
To flash the BrowserWindow taskbar button, you can use the
[BrowserWindow.flashFrame][flashframe] API:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)
```
Don't forget to call the `flashFrame` method with `false` to turn off the flash. In
the above example, it is called when the window comes into focus, but you might
use a timeout or some other event to disable it.
## Represented File of Window (macOS)
On macOS a window can set its represented file, so the file's icon can show in
the title bar and when users Command-Click or Control-Click on the title a path
popup will show.
You can also set the edited state of a window so that the file icon can indicate
whether the document in this window has been modified.
__Represented file popup menu:__
<img src="https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png" height="232" width="663" >
To set the represented file of window, you can use the
[BrowserWindow.setRepresentedFilename][setrepresentedfilename] and
[BrowserWindow.setDocumentEdited][setdocumentedited] APIs:
```javascript
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setRepresentedFilename('/etc/passwd')
win.setDocumentEdited(true)
```
## Dragging files out of the window
For certain kinds of apps that manipulate on files, it is important to be able
to drag files from Electron to other apps. To implement this feature in your
app, you need to call `webContents.startDrag(item)` API on `ondragstart` event.
In web page:
```html
<a href="#" id="drag">item</a>
<script type="text/javascript" charset="utf-8">
document.getElementById('drag').ondragstart = (event) => {
event.preventDefault()
ipcRenderer.send('ondragstart', '/path/to/item')
}
</script>
```
In the main process:
```javascript
const {ipcMain} = require('electron')
ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({
file: filePath,
icon: '/path/to/icon.png'
})
})
```
[addrecentdocument]: ../api/app.md#appaddrecentdocumentpath-os-x-windows
[clearrecentdocuments]: ../api/app.md#appclearrecentdocuments-os-x-windows
[setusertaskstasks]: ../api/app.md#appsetusertaskstasks-windows
[setprogressbar]: ../api/browser-window.md#winsetprogressbarprogress
[setoverlayicon]: ../api/browser-window.md#winsetoverlayiconoverlay-description-windows-7
[setrepresentedfilename]: ../api/browser-window.md#winsetrepresentedfilenamefilename-os-x
[setdocumentedited]: ../api/browser-window.md#winsetdocumenteditededited-os-x
[app-registration]: http://msdn.microsoft.com/en-us/library/windows/desktop/ee872121(v=vs.85).aspx
[unity-launcher]: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles#Adding_shortcuts_to_a_launcher
[setthumbarbuttons]: ../api/browser-window.md#winsetthumbarbuttonsbuttons-windows-7
[tray-balloon]: ../api/tray.md#traydisplayballoonoptions-windows
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
[notification-spec]: https://developer.gnome.org/notification-spec/
[flashframe]: ../api/browser-window.md#winflashframeflag

View file

@ -0,0 +1,66 @@
# DevTools Extension
Electron supports the [Chrome DevTools Extension][devtools-extension], which can
be used to extend the ability of devtools for debugging popular web frameworks.
## How to load a DevTools Extension
This document outlines the process for manually loading an extension.
You may also try
[electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer),
a third-party tool that downloads extensions directly from the Chrome WebStore.
To load an extension in Electron, you need to download it in Chrome browser,
locate its filesystem path, and then load it by calling the
`BrowserWindow.addDevToolsExtension(extension)` API.
Using the [React Developer Tools][react-devtools] as example:
1. Install it in Chrome browser.
1. Navigate to `chrome://extensions`, and find its extension ID, which is a hash
string like `fmkadmapgofadopljbjfkapdkoienihi`.
1. Find out filesystem location used by Chrome for storing extensions:
* on Windows it is `%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions`;
* on Linux it could be:
* `~/.config/google-chrome/Default/Extensions/`
* `~/.config/google-chrome-beta/Default/Extensions/`
* `~/.config/google-chrome-canary/Default/Extensions/`
* `~/.config/chromium/Default/Extensions/`
* on macOS it is `~/Library/Application Support/Google/Chrome/Default/Extensions`.
1. Pass the location of the extension to `BrowserWindow.addDevToolsExtension`
API, for the React Developer Tools, it is something like:
`~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0`
**Note:** The `BrowserWindow.addDevToolsExtension` API cannot be called before the
ready event of the app module is emitted.
The name of the extension is returned by `BrowserWindow.addDevToolsExtension`,
and you can pass the name of the extension to the `BrowserWindow.removeDevToolsExtension`
API to unload it.
## Supported DevTools Extensions
Electron only supports a limited set of `chrome.*` APIs, so some extensions
using unsupported `chrome.*` APIs for chrome extension features may not work.
Following Devtools Extensions are tested and guaranteed to work in Electron:
* [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
* [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
* [Backbone Debugger](https://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd)
* [jQuery Debugger](https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi)
* [AngularJS Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk)
* [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
* [Cerebral Debugger](http://www.cerebraljs.com/documentation/the_debugger)
* [Redux DevTools Extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
### What should I do if a DevTools Extension is not working?
First please make sure the extension is still being maintained, some extensions
can not even work for recent versions of Chrome browser, and we are not able to
do anything for them.
Then file a bug at Electron's issues list, and describe which part of the
extension is not working as expected.
[devtools-extension]: https://developer.chrome.com/extensions/devtools
[react-devtools]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

View file

@ -0,0 +1,21 @@
# Electron Versioning
If you are a seasoned Node developer, you are surely aware of `semver` - and
might be used to giving your dependency management systems only rough guidelines
rather than fixed version numbers. Due to the hard dependency on Node and
Chromium, Electron is in a slightly more difficult position and does not follow
semver. You should therefore always reference a specific version of Electron.
Version numbers are bumped using the following rules:
* Major: For breaking changes in Electron's API - if you upgrade from `0.37.0`
to `1.0.0`, you will have to update your app.
* Minor: For major Chrome and minor Node upgrades; or significant Electron
changes - if you upgrade from `1.0.0` to `1.1.0`, your app is supposed to
still work, but you might have to work around small changes.
* Patch: For new features and bug fixes - if you upgrade from `1.0.0` to
`1.0.1`, your app will continue to work as-is.
If you are using `electron` or `electron-prebuilt`, we recommend that you set a fixed version
number (`1.1.0` instead of `^1.1.0`) to ensure that all upgrades of Electron are
a manual operation made by you, the developer.

View file

@ -0,0 +1,266 @@
# Mac App Store Submission Guide
Since v0.34.0, Electron allows submitting packaged apps to the Mac App Store
(MAS). This guide provides information on: how to submit your app and the
limitations of the MAS build.
**Note:** Submitting an app to Mac App Store requires enrolling [Apple Developer
Program][developer-program], which costs money.
## How to Submit Your App
The following steps introduce a simple way to submit your app to Mac App Store.
However, these steps do not ensure your app will be approved by Apple; you
still need to read Apple's [Submitting Your App][submitting-your-app] guide on
how to meet the Mac App Store requirements.
### Get Certificate
To submit your app to the Mac App Store, you first must get a certificate from
Apple. You can follow these [existing guides][nwjs-guide] on web.
### Get Team ID
Before signing your app, you need to know the Team ID of your account. To locate
your Team ID, Sign in to [Apple Developer Center](https://developer.apple.com/account/),
and click Membership in the sidebar. Your Team ID appears in the Membership
Information section under the team name.
### Sign Your App
After finishing the preparation work, you can package your app by following
[Application Distribution](application-distribution.md), and then proceed to
signing your app.
First, you have to add a `ElectronTeamID` key to your app's `Info.plist`, which
has your Team ID as value:
```xml
<plist version="1.0">
<dict>
...
<key>ElectronTeamID</key>
<string>TEAM_ID</string>
</dict>
</plist>
```
Then, you need to prepare two entitlements files.
`child.plist`:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.inherit</key>
<true/>
</dict>
</plist>
```
`parent.plist`:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.application-groups</key>
<string>TEAM_ID.your.bundle.id</string>
</dict>
</plist>
```
You have to replace `TEAM_ID` with your Team ID, and replace `your.bundle.id`
with the Bundle ID of your app.
And then sign your app with the following script:
```bash
#!/bin/bash
# Name of your app.
APP="YourApp"
# The path of your app to sign.
APP_PATH="/path/to/YourApp.app"
# The path to the location you want to put the signed package.
RESULT_PATH="~/Desktop/$APP.pkg"
# The name of certificates you requested.
APP_KEY="3rd Party Mac Developer Application: Company Name (APPIDENTITY)"
INSTALLER_KEY="3rd Party Mac Developer Installer: Company Name (APPIDENTITY)"
# The path of your plist files.
CHILD_PLIST="/path/to/child.plist"
PARENT_PLIST="/path/to/parent.plist"
FRAMEWORKS_PATH="$APP_PATH/Contents/Frameworks"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Electron Framework"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libffmpeg.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libnode.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/Contents/MacOS/$APP Helper"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper EH.app/Contents/MacOS/$APP Helper EH"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper EH.app/"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper NP.app/Contents/MacOS/$APP Helper NP"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper NP.app/"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$APP_PATH/Contents/MacOS/$APP"
codesign -s "$APP_KEY" -f --entitlements "$PARENT_PLIST" "$APP_PATH"
productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RESULT_PATH"
```
If you are new to app sandboxing under macOS, you should also read through
Apple's [Enabling App Sandbox][enable-app-sandbox] to have a basic idea, then
add keys for the permissions needed by your app to the entitlements files.
Apart from manually signing your app, you can also choose to use the
[electron-osx-sign][electron-osx-sign] module to do the job.
#### Sign Native Modules
Native modules used in your app also need to be signed. If using
electron-osx-sign, be sure to include the path to the built binaries in the
argument list:
```bash
electron-osx-sign YourApp.app YourApp.app/Contents/Resources/app/node_modules/nativemodule/build/release/nativemodule
```
Also note that native modules may have intermediate files produced which should
not be included (as they would also need to be signed). If you use
[electron-packager][electron-packager] before version 8.1.0, add
`--ignore=.+\.o$` to your build step to ignore these files. Versions 8.1.0 and
later ignores those files by default.
### Upload Your App
After signing your app, you can use Application Loader to upload it to iTunes
Connect for processing, making sure you have [created a record][create-record]
before uploading.
### Submit Your App for Review
After these steps, you can [submit your app for review][submit-for-review].
## Limitations of MAS Build
In order to satisfy all requirements for app sandboxing, the following modules
have been disabled in the MAS build:
* `crashReporter`
* `autoUpdater`
and the following behaviors have been changed:
* Video capture may not work for some machines.
* Certain accessibility features may not work.
* Apps will not be aware of DNS changes.
* APIs for launching apps at login are disabled. See
https://github.com/electron/electron/issues/7312#issuecomment-249479237
Also, due to the usage of app sandboxing, the resources which can be accessed by
the app are strictly limited; you can read [App Sandboxing][app-sandboxing] for
more information.
### Additional Entitlements
Depending on which Electron APIs your app uses, you may need to add additional
entitlements to your `parent.plist` file to be able to use these APIs from your
app's Mac App Store build.
#### Network Access
Enable outgoing network connections to allow your app to connect to a server:
```xml
<key>com.apple.security.network.client</key>
<true/>
```
Enable incoming network connections to allow your app to open a network
listening socket:
```xml
<key>com.apple.security.network.server</key>
<true/>
```
See the [Enabling Network Access documentation][network-access] for more
details.
#### dialog.showOpenDialog
```xml
<key>com.apple.security.files.user-selected.read-only</key>
<true/>
```
See the [Enabling User-Selected File Access documentation][user-selected] for
more details.
#### dialog.showSaveDialog
```xml
<key>com.apple.security.files.user-selected.read-write</key>
<true/>
```
See the [Enabling User-Selected File Access documentation][user-selected] for
more details.
## Cryptographic Algorithms Used by Electron
Depending on the country and region you are located, Mac App Store may require
documenting the cryptographic algorithms used in your app, and even ask you to
submit a copy of U.S. Encryption Registration (ERN) approval.
Electron uses following cryptographic algorithms:
* AES - [NIST SP 800-38A](http://csrc.nist.gov/publications/nistpubs/800-38a/sp800-38a.pdf), [NIST SP 800-38D](http://csrc.nist.gov/publications/nistpubs/800-38D/SP-800-38D.pdf), [RFC 3394](http://www.ietf.org/rfc/rfc3394.txt)
* HMAC - [FIPS 198-1](http://csrc.nist.gov/publications/fips/fips198-1/FIPS-198-1_final.pdf)
* ECDSA - ANS X9.622005
* ECDH - ANS X9.632001
* HKDF - [NIST SP 800-56C](http://csrc.nist.gov/publications/nistpubs/800-56C/SP-800-56C.pdf)
* PBKDF2 - [RFC 2898](https://tools.ietf.org/html/rfc2898)
* RSA - [RFC 3447](http://www.ietf.org/rfc/rfc3447)
* SHA - [FIPS 180-4](http://csrc.nist.gov/publications/fips/fips180-4/fips-180-4.pdf)
* Blowfish - https://www.schneier.com/cryptography/blowfish/
* CAST - [RFC 2144](https://tools.ietf.org/html/rfc2144), [RFC 2612](https://tools.ietf.org/html/rfc2612)
* DES - [FIPS 46-3](http://csrc.nist.gov/publications/fips/fips46-3/fips46-3.pdf)
* DH - [RFC 2631](https://tools.ietf.org/html/rfc2631)
* DSA - [ANSI X9.30](http://webstore.ansi.org/RecordDetail.aspx?sku=ANSI+X9.30-1%3A1997)
* EC - [SEC 1](http://www.secg.org/sec1-v2.pdf)
* IDEA - "On the Design and Security of Block Ciphers" book by X. Lai
* MD2 - [RFC 1319](http://tools.ietf.org/html/rfc1319)
* MD4 - [RFC 6150](https://tools.ietf.org/html/rfc6150)
* MD5 - [RFC 1321](https://tools.ietf.org/html/rfc1321)
* MDC2 - [ISO/IEC 10118-2](https://www.openssl.org/docs/manmaster/crypto/mdc2.html)
* RC2 - [RFC 2268](https://tools.ietf.org/html/rfc2268)
* RC4 - [RFC 4345](https://tools.ietf.org/html/rfc4345)
* RC5 - http://people.csail.mit.edu/rivest/Rivest-rc5rev.pdf
* RIPEMD - [ISO/IEC 10118-3](http://webstore.ansi.org/RecordDetail.aspx?sku=ISO%2FIEC%2010118-3:2004)
On how to get the ERN approval, you can reference the article: [How to legally
submit an app to Apples App Store when it uses encryption (or how to obtain an
ERN)][ern-tutorial].
[developer-program]: https://developer.apple.com/support/compare-memberships/
[submitting-your-app]: https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/AppDistributionGuide/SubmittingYourApp/SubmittingYourApp.html
[nwjs-guide]: https://github.com/nwjs/nw.js/wiki/Mac-App-Store-%28MAS%29-Submission-Guideline#first-steps
[enable-app-sandbox]: https://developer.apple.com/library/ios/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html
[create-record]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/CreatingiTunesConnectRecord.html
[electron-osx-sign]: https://github.com/electron-userland/electron-osx-sign
[electron-packager]: https://github.com/electron-userland/electron-packager
[submit-for-review]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/SubmittingTheApp.html
[app-sandboxing]: https://developer.apple.com/app-sandboxing/
[ern-tutorial]: https://carouselapps.com/2015/12/15/legally-submit-app-apples-app-store-uses-encryption-obtain-ern/
[temporary-exception]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/AppSandboxTemporaryExceptionEntitlements.html
[user-selected]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html#//apple_ref/doc/uid/TP40011195-CH4-SW6
[network-access]: https://developer.apple.com/library/ios/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html#//apple_ref/doc/uid/TP40011195-CH4-SW9

View file

@ -0,0 +1,57 @@
# Offscreen Rendering
Offscreen rendering lets you obtain the content of a browser window in a bitmap,
so it can be rendered anywhere, for example on a texture in a 3D scene. The
offscreen rendering in Electron uses a similar approach than the [Chromium
Embedded Framework](https://bitbucket.org/chromiumembedded/cef) project.
Two modes of rendering can be used and only the dirty area is passed in the
`'paint'` event to be more efficient. The rendering can be stopped, continued
and the frame rate can be set. The specified frame rate is a top limit value,
when there is nothing happening on a webpage, no frames are generated. The
maximum frame rate is 60, because above that there is no benefit, just
performance loss.
**Note:** An offscreen window is always created as a [Frameless Window](../api/frameless-window.md).
## Two modes of rendering
### 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 performance,
thus this mode is quite a bit slower than the other one. The benefit of this
mode that WebGL and 3D CSS animations are supported.
### Software output device
This mode uses a software output device for rendering in the CPU, so the frame
generation is much faster, thus this mode is preferred over the GPU accelerated
one.
To enable this mode GPU acceleration has to be disabled by calling the
[`app.disableHardwareAcceleration()`][disablehardwareacceleration] API.
## Usage
``` javascript
const {app, BrowserWindow} = require('electron')
app.disableHardwareAcceleration()
let win
app.once('ready', () => {
win = new BrowserWindow({
webPreferences: {
offscreen: true
}
})
win.loadURL('http://github.com')
win.webContents.on('paint', (event, dirty, image) => {
// updateBitmap(dirty, image.getBitmap())
})
win.webContents.setFrameRate(30)
})
```
[disablehardwareacceleration]: ../api/app.md#appdisablehardwareacceleration

View file

@ -0,0 +1,90 @@
# Online/Offline Event Detection
Online and offline event detection can be implemented in the renderer process
using standard HTML5 APIs, as shown in the following example.
_main.js_
```javascript
const {app, BrowserWindow} = require('electron')
let onlineStatusWindow
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
```
_online-status.html_
```html
<!DOCTYPE html>
<html>
<body>
<script>
const alertOnlineStatus = () => {
window.alert(navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
alertOnlineStatus()
</script>
</body>
</html>
```
There may be instances where you want to respond to these events in the
main process as well. The main process however does not have a
`navigator` object and thus cannot detect these events directly. Using
Electron's inter-process communication utilities, the events can be forwarded
to the main process and handled as needed, as shown in the following example.
_main.js_
```javascript
const {app, BrowserWindow, ipcMain} = require('electron')
let onlineStatusWindow
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
ipcMain.on('online-status-changed', (event, status) => {
console.log(status)
})
```
_online-status.html_
```html
<!DOCTYPE html>
<html>
<body>
<script>
const {ipcRenderer} = require('electron')
const updateOnlineStatus = () => {
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
updateOnlineStatus()
</script>
</body>
</html>
```
**NOTE:** If Electron is not able to connect to a local area network (LAN) or
a router, it is considered offline; all other conditions return `true`.
So while you can assume that Electron is offline when `navigator.onLine`
returns a `false` value, you cannot assume that a `true` value necessarily
means that Electron can access the internet. You could be getting false
positives, such as in cases where the computer is running a virtualization
software that has virtual ethernet adapters that are always "connected."
Therefore, if you really want to determine the internet access status of Electron,
you should develop additional means for checking.

View file

@ -0,0 +1,159 @@
# Planned Breaking API Changes
The following list includes the APIs that will be removed in Electron 2.0.
There is no timetable for when this release will occur but deprecation
warnings will be added at least 90 days beforehand.
## `BrowserWindow`
```js
// Deprecated
let optionsA = {webPreferences: {blinkFeatures: ''}}
let windowA = new BrowserWindow(optionsA)
// Replace with
let optionsB = {webPreferences: {enableBlinkFeatures: ''}}
let windowB = new BrowserWindow(optionsB)
```
## `clipboard`
```js
// Deprecated
clipboard.readRtf()
// Replace with
clipboard.readRTF()
// Deprecated
clipboard.writeRtf()
// Replace with
clipboard.writeRTF()
// Deprecated
clipboard.readHtml()
// Replace with
clipboard.readHTML()
// Deprecated
clipboard.writeHtml()
// Replace with
clipboard.writeHTML()
```
## `crashReporter`
```js
// Deprecated
crashReporter.start({
companyName: 'Crashly',
submitURL: 'https://crash.server.com',
autoSubmit: true
})
// Replace with
crashReporter.start({
companyName: 'Crashly',
submitURL: 'https://crash.server.com',
uploadToServer: true
})
```
## `nativeImage`
```js
// Deprecated
nativeImage.toPng()
// Replace with
nativeImage.toPNG()
// Deprecated
nativeImage.toJpeg()
// Replace with
nativeImage.toJPEG()
// Deprecated
nativeImage.createFromBuffer(buffer, 1.0)
// Replace with
nativeImage.createFromBuffer(buffer, {
scaleFactor: 1.0
})
```
## `process`
```js
// Deprecated
process.versions['atom-shell']
// Replace with
process.versions.electron
```
* `process.versions.electron` and `process.version.chrome` will be made
read-only properties for consistency with the other `process.versions`
properties set by Node.
## `Tray`
```js
// Deprecated
tray.setHighlightMode(true)
// Replace with
tray.setHighlightMode('on')
// Deprecated
tray.setHighlightMode(false)
// Replace with
tray.setHighlightMode('off')
```
## `webContents`
```js
// Deprecated
webContents.openDevTools({detach: true})
// Replace with
webContents.openDevTools({mode: 'detach'})
```
```js
// Deprecated
webContents.setZoomLevelLimits(1, 2)
// Replace with
webContents.setVisualZoomLevelLimits(1, 2)
```
## `webFrame`
```js
// Deprecated
webFrame.setZoomLevelLimits(1, 2)
// Replace with
webFrame.setVisualZoomLevelLimits(1, 2)
// Deprecated
webFrame.registerURLSchemeAsSecure('app')
// Replace with
protocol.registerStandardSchemes(['app'], {secure: true})
// Deprecated
webFrame.registerURLSchemeAsPrivileged('app', {secure: true})
// Replace with
protocol.registerStandardSchemes(['app'], {secure: true})
```
## `<webview>`
```js
// Deprecated
webview.setZoomLevelLimits(1, 2)
// Replace with
webview.setVisualZoomLevelLimits(1, 2)
```
## Node Headers URL
This is the URL specified as `disturl` in a `.npmrc` file or as the `--dist-url`
command line flag when building native Node modules.
Deprecated: https://atom.io/download/atom-shell
Replace with: https://atom.io/download/electron

View file

@ -0,0 +1,244 @@
# Quick Start
Electron enables you to create desktop applications with pure JavaScript by
providing a runtime with rich native (operating system) APIs. You could see it
as a variant of the Node.js runtime that is focused on desktop applications
instead of web servers.
This doesn't mean Electron is a JavaScript binding to graphical user interface
(GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also
see it as a minimal Chromium browser, controlled by JavaScript.
### Main Process
In Electron, the process that runs `package.json`'s `main` script is called
__the main process__. The script that runs in the main process can display a GUI
by creating web pages.
### Renderer Process
Since Electron uses Chromium for displaying web pages, Chromium's
multi-process architecture is also used. Each web page in Electron runs in
its own process, which is called __the renderer process__.
In normal browsers, web pages usually run in a sandboxed environment and are not
allowed access to native resources. Electron users, however, have the power to
use Node.js APIs in web pages allowing lower level operating system
interactions.
### Differences Between Main Process and Renderer Process
The main process creates web pages by creating `BrowserWindow` instances. Each
`BrowserWindow` instance runs the web page in its own renderer process. When a
`BrowserWindow` instance is destroyed, the corresponding renderer process
is also terminated.
The main process manages all web pages and their corresponding renderer
processes. Each renderer process is isolated and only cares about the web page
running in it.
In web pages, calling native GUI related APIs is not allowed because managing
native GUI resources in web pages is very dangerous and it is easy to leak
resources. If you want to perform GUI operations in a web page, the renderer
process of the web page must communicate with the main process to request that
the main process perform those operations.
In Electron, we have several ways to communicate between the main process and
renderer processes. Like [`ipcRenderer`](../api/ipc-renderer.md) and
[`ipcMain`](../api/ipc-main.md) modules for sending messages, and the
[remote](../api/remote.md) module for RPC style communication. There is also
an FAQ entry on [how to share data between web pages][share-data].
## Write your First Electron App
Generally, an Electron app is structured like this:
```text
your-app/
├── package.json
├── main.js
└── index.html
```
The format of `package.json` is exactly the same as that of Node's modules, and
the script specified by the `main` field is the startup script of your app,
which will run the main process. An example of your `package.json` might look
like this:
```json
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
```
__Note__: If the `main` field is not present in `package.json`, Electron will
attempt to load an `index.js`.
The `main.js` should create windows and handle system events, a typical
example being:
```javascript
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
```
Finally the `index.html` is the web page you want to show:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
```
## Run your app
Once you've created your initial `main.js`, `index.html`, and `package.json` files,
you'll probably want to try running your app locally to test it and make sure it's
working as expected.
### `electron`
[`electron`](https://github.com/electron-userland/electron-prebuilt) is
an `npm` module that contains pre-compiled versions of Electron.
If you've installed it globally with `npm`, then you will only need to run the
following in your app's source directory:
```bash
electron .
```
If you've installed it locally, then run:
#### macOS / Linux
```bash
$ ./node_modules/.bin/electron .
```
#### Windows
```bash
$ .\node_modules\.bin\electron .
```
### Manually Downloaded Electron Binary
If you downloaded Electron manually, you can also use the included
binary to execute your app directly.
#### Windows
```bash
$ .\electron\electron.exe your-app\
```
#### Linux
```bash
$ ./electron/electron your-app/
```
#### macOS
```bash
$ ./Electron.app/Contents/MacOS/Electron your-app/
```
`Electron.app` here is part of the Electron's release package, you can download
it from [here](https://github.com/electron/electron/releases).
### Run as a distribution
After you're done writing your app, you can create a distribution by
following the [Application Distribution](./application-distribution.md) guide
and then executing the packaged app.
### Try this Example
Clone and run the code in this tutorial by using the [`electron/electron-quick-start`](https://github.com/electron/electron-quick-start)
repository.
**Note**: Running this requires [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which includes [npm](https://npmjs.org)) on your system.
```bash
# Clone the repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies
$ npm install
# Run the app
$ npm start
```
For more example apps, see the
[list of boilerplates](http://electron.atom.io/community/#boilerplates)
created by the awesome electron community.
[share-data]: ../faq.md#how-to-share-data-between-web-pages

View file

@ -0,0 +1,26 @@
# REPL
Read-Eval-Print-Loop (REPL) is a simple, interactive computer programming
environment that takes single user inputs (i.e. single expressions), evaluates
them, and returns the result to the user.
The `repl` module provides a REPL implementation that can be accessed using:
* Assuming you have `electron` or `electron-prebuilt` installed as a local
project dependency:
```sh
./node_modules/.bin/electron --interactive
```
* Assuming you have `electron` or `electron-prebuilt` installed globally:
```sh
electron --interactive
```
This only creates a REPL for the main process. You can use the Console
tab of the Dev Tools to get a REPL for the renderer processes.
**Note:** `electron --interactive` is not available on Windows.
More information can be found in the [Node.js REPL docs](https://nodejs.org/dist/latest/docs/api/repl.html).

View file

@ -0,0 +1,96 @@
# Security, Native Capabilities, and Your Responsibility
As web developers, we usually enjoy the strong security net of the browser - the
risks associated with the code we write are relatively small. Our websites are
granted limited powers in a sandbox, and we trust that our users enjoy a browser
built by a large team of engineers that is able to quickly respond to newly
discovered security threats.
When working with Electron, it is important to understand that Electron is not
a web browser. It allows you to build feature-rich desktop applications with
familiar web technologies, but your code wields much greater power. JavaScript
can access the filesystem, user shell, and more. This allows you to build
high quality native applications, but the inherent security risks scale with the
additional powers granted to your code.
With that in mind, be aware that displaying arbitrary content from untrusted
sources poses a severe security risk that Electron is not intended to handle.
In fact, the most popular Electron apps (Atom, Slack, Visual Studio Code, etc)
display primarily local content (or trusted, secure remote content without Node
integration) if your application executes code from an online source, it is
your responsibility to ensure that the code is not malicious.
## Chromium Security Issues and Upgrades
While Electron strives to support new versions of Chromium as soon as possible,
developers should be aware that upgrading is a serious undertaking - involving
hand-editing dozens or even hundreds of files. Given the resources and
contributions available today, Electron will often not be on the very latest
version of Chromium, lagging behind by either days or weeks.
We feel that our current system of updating the Chromium component strikes an
appropriate balance between the resources we have available and the needs of the
majority of applications built on top of the framework. We definitely are
interested in hearing more about specific use cases from the people that build
things on top of Electron. Pull requests and contributions supporting this
effort are always very welcome.
## Ignoring Above Advice
A security issue exists whenever you receive code from a remote destination and
execute it locally. As an example, consider a remote website being displayed
inside a browser window. If an attacker somehow manages to change said content
(either by attacking the source directly, or by sitting between your app and
the actual destination), they will be able to execute native code on the user's
machine.
> :warning: Under no circumstances should you load and execute remote code with
Node integration enabled. Instead, use only local files (packaged together with
your application) to execute Node code. To display remote content, use the
`webview` tag and make sure to disable the `nodeIntegration`.
#### Checklist
This is not bulletproof, but at the least, you should attempt the following:
* Only display secure (https) content
* Disable the Node integration in all renderers that display remote content
(setting `nodeIntegration` to `false` in `webPreferences`)
* Enable context isolation in all rendererers that display remote content
(setting `contextIsolation` to `true` in `webPreferences`)
* Do not disable `webSecurity`. Disabling it will disable the same-origin policy.
* Define a [`Content-Security-Policy`](http://www.html5rocks.com/en/tutorials/security/content-security-policy/)
, and use restrictive rules (i.e. `script-src 'self'`)
* [Override and disable `eval`](https://github.com/nylas/N1/blob/0abc5d5defcdb057120d726b271933425b75b415/static/index.js#L6-L8)
, which allows strings to be executed as code.
* Do not set `allowDisplayingInsecureContent` to true.
* Do not set `allowRunningInsecureContent` to true.
* Do not enable `experimentalFeatures` or `experimentalCanvasFeatures` unless
you know what you're doing.
* Do not use `blinkFeatures` unless you know what you're doing.
* WebViews: Do not add the `nodeintegration` attribute.
* WebViews: Do not use `disablewebsecurity`
* WebViews: Do not use `allowpopups`
* WebViews: Do not use `insertCSS` or `executeJavaScript` with remote CSS/JS.
Again, this list merely minimizes the risk, it does not remove it. If your goal
is to display a website, a browser will be a more secure option.
## Buffer Global
Node's [Buffer](https://nodejs.org/api/buffer.html) class is currently available
as a global even when the `nodeintegration` attribute is not added. You can
delete this in your app by doing the following in your `preload` script:
```js
delete global.Buffer
```
Deleting it may break Node modules used in your preload script and app since
many libraries expect it to be a global instead of requiring it directly via:
```js
const {Buffer} = require('buffer')
```
The `Buffer` global may be removed in future major versions of Electron.

View file

@ -0,0 +1,31 @@
# Supported Platforms
Following platforms are supported by Electron:
### macOS
Only 64bit binaries are provided for macOS, and the minimum macOS version
supported is macOS 10.9.
### Windows
Windows 7 and later are supported, older operating systems are not supported
(and do not work).
Both `ia32` (`x86`) and `x64` (`amd64`) binaries are provided for Windows.
Please note, the `ARM` version of Windows is not supported for now.
### Linux
The prebuilt `ia32` (`i686`) and `x64` (`amd64`) binaries of Electron are built on
Ubuntu 12.04, the `arm` binary is built against ARM v7 with hard-float ABI and
NEON for Debian Wheezy.
Whether the prebuilt binary can run on a distribution depends on whether the
distribution includes the libraries that Electron is linked to on the building
platform, so only Ubuntu 12.04 is guaranteed to work, but following platforms
are also verified to be able to run the prebuilt binaries of Electron:
* Ubuntu 12.04 and later
* Fedora 21
* Debian 8

Some files were not shown because too many files have changed in this diff Show more