diff --git a/docs/api/app.md b/docs/api/app.md index 114ac8c5e09b..1220f36c9f8c 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -6,10 +6,10 @@ The following example shows how to quit the application when the last window is closed: ```javascript -const {app} = require('electron'); +const {app} = require('electron') app.on('window-all-closed', () => { - app.quit(); -}); + app.quit() +}) ``` ## Events @@ -192,15 +192,17 @@ 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); + event.preventDefault() + callback(true) } else { - callback(false); + callback(false) } -}); +}) ``` ### Event: 'select-client-certificate' @@ -228,10 +230,12 @@ and `callback` needs to be called with an entry filtered from the list. Using 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.preventDefault() + callback(list[0]) +}) ``` ### Event: 'login' @@ -259,10 +263,12 @@ 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.preventDefault() + callback('username', 'secret') +}) ``` ### Event: 'gpu-process-crashed' @@ -331,6 +337,8 @@ 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) + ['--relaunch']}) app.exit(0) ``` @@ -537,24 +545,24 @@ An example of activating the window of primary instance when a second instance starts: ```javascript -let myWindow = null; +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 (myWindow.isMinimized()) myWindow.restore() + myWindow.focus() } -}); +}) if (shouldQuit) { - app.quit(); - return; + app.quit() } // Create myWindow, load the rest of the app, etc... app.on('ready', () => { -}); +}) ``` ### `app.releaseSingleInstance()` diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index 73d53ed875c3..e53ec013de6f 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -6,8 +6,8 @@ // In the main process. const {BrowserWindow} = require('electron') -// Or in the renderer process. -const {BrowserWindow} = require('electron').remote +// Or use `remote` from the renderer process. +// const {BrowserWindow} = require('electron').remote let win = new BrowserWindow({width: 800, height: 600}) win.on('closed', () => { @@ -35,6 +35,7 @@ process has done drawing for the first time, showing window after this event will have no visual flash: ```javascript +const {BrowserWindow} = require('electron') let win = new BrowserWindow({show: false}) win.once('ready-to-show', () => { win.show() @@ -52,6 +53,8 @@ the app feel slow. In this case, it is recommended to show the window immediately, and use a `backgroundColor` close to your app's background: ```javascript +const {BrowserWindow} = require('electron') + let win = new BrowserWindow({backgroundColor: '#2e2c29'}) win.loadURL('https://github.com') ``` @@ -64,8 +67,12 @@ to set `backgroundColor` to make app feel more native. By using `parent` option, you can create child windows: ```javascript +const {BrowserWindow} = require('electron') + let top = new BrowserWindow() let child = new BrowserWindow({parent: top}) +child.show() +top.show() ``` The `child` window will always show on top of the `top` window. @@ -76,6 +83,8 @@ A modal window is a child window that disables parent window, to create a modal window, you have to set both `parent` and `modal` options: ```javascript +const {BrowserWindow} = require('electron') + let child = new BrowserWindow({parent: top, modal: true, show: false}) child.loadURL('https://github.com') child.once('ready-to-show', () => { @@ -308,14 +317,14 @@ close. For example: ```javascript window.onbeforeunload = (e) => { - console.log('I do not want to be closed'); + console.log('I do not want to be closed') // Unlike usual browsers that a message box will be prompted to users, returning // a non-void value will silently cancel the close. // It is recommended to use the dialog API to let the user confirm closing the // application. - e.returnValue = false; -}; + e.returnValue = false +} ``` #### Event: 'closed' @@ -414,12 +423,14 @@ Commands are lowercased, underscores are replaced with hyphens, and the e.g. `APPCOMMAND_BROWSER_BACKWARD` is emitted as `browser-backward`. ```javascript -someWindow.on('app-command', (e, cmd) => { +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() +win.on('app-command', (e, cmd) => { // Navigate the window back when the user hits their mouse back button - if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) { - someWindow.webContents.goBack(); + if (cmd === 'browser-backward' && win.webContents.canGoBack()) { + win.webContents.goBack() } -}); +}) ``` #### Event: 'scroll-touch-begin' _macOS_ @@ -496,7 +507,10 @@ an Object containing `name` and `version` properties. To check if a DevTools extension is installed you can run the following: ```javascript +const {BrowserWindow} = require('electron') + let installed = BrowserWindow.getDevToolsExtensions().hasOwnProperty('devtron') +console.log(installed) ``` **Note:** This API cannot be called before the `ready` event of the `app` module @@ -507,8 +521,10 @@ is emitted. Objects created with `new BrowserWindow` have the following properties: ```javascript +const {BrowserWindow} = require('electron') // In this example `win` is our instance -let win = new BrowserWindow({width: 800, height: 600}); +let win = new BrowserWindow({width: 800, height: 600}) +win.loadURL('https://github.com') ``` #### `win.webContents` @@ -809,8 +825,11 @@ attached just below the window frame, but you may want to display them beneath a HTML-rendered toolbar. For example: ```javascript -let toolbarRect = document.getElementById('toolbar').getBoundingClientRect(); -win.setSheetOffset(toolbarRect.height); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() + +let toolbarRect = document.getElementById('toolbar').getBoundingClientRect() +win.setSheetOffset(toolbarRect.height) ``` #### `win.flashFrame(flag)` diff --git a/docs/api/chrome-command-line-switches.md b/docs/api/chrome-command-line-switches.md index 4fe6d136da2b..7d840f1a3e23 100644 --- a/docs/api/chrome-command-line-switches.md +++ b/docs/api/chrome-command-line-switches.md @@ -7,13 +7,13 @@ 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'); +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` @@ -57,6 +57,7 @@ list of hosts. This flag has an effect only if used in tandem with For example: ```javascript +const {app} = require('electron') app.commandLine.appendSwitch('proxy-bypass-list', ';*.google.com;*foo.com;1.2.3.4:5678') ``` diff --git a/docs/api/clipboard.md b/docs/api/clipboard.md index 85712bc651d9..bc7e15ee09b0 100644 --- a/docs/api/clipboard.md +++ b/docs/api/clipboard.md @@ -5,16 +5,17 @@ The following example shows how to write a string to the clipboard: ```javascript -const {clipboard} = require('electron'); -clipboard.writeText('Example String'); +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 -clipboard.writeText('Example String', 'selection'); -console.log(clipboard.readText('selection')); +const {clipboard} = require('electron') +clipboard.writeText('Example String', 'selection') +console.log(clipboard.readText('selection')) ``` ## Methods @@ -109,7 +110,8 @@ Returns an array of supported formats for the clipboard `type`. Returns whether the clipboard supports the format of specified `data`. ```javascript -console.log(clipboard.has('

selection

')); +const {clipboard} = require('electron') +console.log(clipboard.has('

selection

')) ``` ### `clipboard.read(data[, type])` _Experimental_ @@ -130,6 +132,7 @@ Reads `data` from the clipboard. * `type` String (optional) ```javascript -clipboard.write({text: 'test', html: "test"}); +const {clipboard} = require('electron') +clipboard.write({text: 'test', html: 'test'}) ``` Writes `data` to the clipboard. diff --git a/docs/api/content-tracing.md b/docs/api/content-tracing.md index d269d602ef59..8cfc7670c6a6 100644 --- a/docs/api/content-tracing.md +++ b/docs/api/content-tracing.md @@ -8,22 +8,22 @@ This module does not include a web interface so you need to open result. ```javascript -const {contentTracing} = require('electron'); +const {contentTracing} = require('electron') const options = { categoryFilter: '*', traceOptions: 'record-until-full,enable-sampling' -}; +} contentTracing.startRecording(options, () => { - console.log('Tracing started'); + console.log('Tracing started') setTimeout(() => { contentTracing.stopRecording('', (path) => { - console.log('Tracing data recorded to ' + path); - }); - }, 5000); -}); + console.log('Tracing data recorded to ' + path) + }) + }, 5000) +}) ``` ## Methods diff --git a/docs/api/crash-reporter.md b/docs/api/crash-reporter.md index bd323de88394..5c84cb4cb113 100644 --- a/docs/api/crash-reporter.md +++ b/docs/api/crash-reporter.md @@ -6,14 +6,14 @@ The following is an example of automatically submitting a crash report to a remote server: ```javascript -const {crashReporter} = require('electron'); +const {crashReporter} = require('electron') crashReporter.start({ productName: 'YourName', companyName: 'YourCompany', submitURL: 'https://your-domain.com/url-to-submit', autoSubmit: true -}); +}) ``` For setting up a server to accept and process crash reports, you can use diff --git a/docs/api/desktop-capturer.md b/docs/api/desktop-capturer.md index 0e092b9e983b..a636c7be03d3 100644 --- a/docs/api/desktop-capturer.md +++ b/docs/api/desktop-capturer.md @@ -8,10 +8,10 @@ title is `Electron`: ```javascript // In the renderer process. -const {desktopCapturer} = require('electron'); +const {desktopCapturer} = require('electron') desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => { - if (error) throw error; + if (error) throw error for (let i = 0; i < sources.length; ++i) { if (sources[i].name === 'Electron') { navigator.webkitGetUserMedia({ @@ -26,18 +26,18 @@ desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => { maxHeight: 720 } } - }, handleStream, handleError); - return; + }, handleStream, handleError) + return } } -}); +}) function handleStream(stream) { - document.querySelector('video').src = URL.createObjectURL(stream); + document.querySelector('video').src = URL.createObjectURL(stream) } function handleError(e) { - console.log(e); + console.log(e) } ``` diff --git a/docs/api/dialog.md b/docs/api/dialog.md index d71109e9dfdc..f6bf0fdc19fd 100644 --- a/docs/api/dialog.md +++ b/docs/api/dialog.md @@ -5,17 +5,16 @@ An example of showing a dialog to select multiple files and directories: ```javascript -let win = ...; // BrowserWindow in which to show the dialog -const {dialog} = require('electron'); - -console.log(dialog.showOpenDialog({properties: ['openFile', 'openDirectory', 'multiSelections']})); +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; +const {dialog} = require('electron').remote +console.log(dialog) ``` ## Methods @@ -42,7 +41,7 @@ otherwise it returns `undefined`. 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']}, diff --git a/docs/api/download-item.md b/docs/api/download-item.md index 778f68b7bc36..e0416d8ef265 100644 --- a/docs/api/download-item.md +++ b/docs/api/download-item.md @@ -8,6 +8,8 @@ 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') diff --git a/docs/api/file-object.md b/docs/api/file-object.md index b1e643c74080..c39a0cf715e6 100644 --- a/docs/api/file-object.md +++ b/docs/api/file-object.md @@ -15,19 +15,19 @@ Example on getting a real path from a dragged-onto-the-app file: ``` diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index b6b5926beef1..1ca64a456f28 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -16,6 +16,7 @@ To create a frameless window, you need to set `frame` to `false` in ```javascript const {BrowserWindow} = require('electron') let win = new BrowserWindow({width: 800, height: 600, frame: false}) +win.show() ``` ### Alternatives on macOS @@ -28,7 +29,9 @@ the window controls ("traffic lights") for standard window actions. You can do so by specifying the new `titleBarStyle` option: ```javascript +const {BrowserWindow} = require('electron') let win = new BrowserWindow({titleBarStyle: 'hidden'}) +win.show() ``` ## Transparent window @@ -37,7 +40,9 @@ 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 @@ -66,6 +71,8 @@ events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events] API: ```javascript +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() win.setIgnoreMouseEvents(true) ``` diff --git a/docs/api/global-shortcut.md b/docs/api/global-shortcut.md index d9488a7b7fd9..5a2f819ac368 100644 --- a/docs/api/global-shortcut.md +++ b/docs/api/global-shortcut.md @@ -11,29 +11,29 @@ 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'); +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'); - }); + console.log('CommandOrControl+X is pressed') + }) if (!ret) { - console.log('registration failed'); + console.log('registration failed') } // Check whether a shortcut is registered. - console.log(globalShortcut.isRegistered('CommandOrControl+X')); -}); + console.log(globalShortcut.isRegistered('CommandOrControl+X')) +}) app.on('will-quit', () => { // Unregister a shortcut. - globalShortcut.unregister('CommandOrControl+X'); + globalShortcut.unregister('CommandOrControl+X') // Unregister all shortcuts. - globalShortcut.unregisterAll(); -}); + globalShortcut.unregisterAll() +}) ``` ## Methods diff --git a/docs/api/ipc-main.md b/docs/api/ipc-main.md index 0b7acbfefa0c..6ba9c2656403 100644 --- a/docs/api/ipc-main.md +++ b/docs/api/ipc-main.md @@ -23,27 +23,27 @@ processes: ```javascript // In main process. -const {ipcMain} = require('electron'); +const {ipcMain} = require('electron') ipcMain.on('asynchronous-message', (event, arg) => { - console.log(arg); // prints "ping" - event.sender.send('asynchronous-reply', 'pong'); -}); + 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'; -}); + 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" +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'); + console.log(arg) // prints "pong" +}) +ipcRenderer.send('asynchronous-message', 'ping') ``` ## Listening for Messages diff --git a/docs/api/menu.md b/docs/api/menu.md index c60cbbac7ffe..760942df2491 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -15,18 +15,18 @@ the user right clicks the page: ```html ``` @@ -34,6 +34,8 @@ An example of creating the application menu in the render process with the simple template API: ```javascript +const {Menu} = require('electron') + const template = [ { label: 'Edit', @@ -64,7 +66,7 @@ const template = [ }, { role: 'selectall' - }, + } ] }, { @@ -73,8 +75,8 @@ const template = [ { label: 'Reload', accelerator: 'CmdOrCtrl+R', - click(item, focusedWindow) { - if (focusedWindow) focusedWindow.reload(); + click (item, focusedWindow) { + if (focusedWindow) focusedWindow.reload() } }, { @@ -83,11 +85,10 @@ const template = [ { label: 'Toggle Developer Tools', accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I', - click(item, focusedWindow) { - if (focusedWindow) - focusedWindow.webContents.toggleDevTools(); + click (item, focusedWindow) { + if (focusedWindow) focusedWindow.webContents.toggleDevTools() } - }, + } ] }, { @@ -98,7 +99,7 @@ const template = [ }, { role: 'close' - }, + } ] }, { @@ -106,14 +107,14 @@ const template = [ submenu: [ { label: 'Learn More', - click() { require('electron').shell.openExternal('http://electron.atom.io'); } - }, + click () { require('electron').shell.openExternal('http://electron.atom.io') } + } ] - }, -]; + } +] if (process.platform === 'darwin') { - const name = require('electron').remote.app.getName(); + const name = require('electron').remote.app.getName() template.unshift({ label: name, submenu: [ @@ -144,9 +145,9 @@ if (process.platform === 'darwin') { }, { role: 'quit' - }, + } ] - }); + }) // Window menu. template[3].submenu = [ { @@ -170,11 +171,11 @@ if (process.platform === 'darwin') { label: 'Bring All to Front', role: 'front' } - ]; + ] } -const menu = Menu.buildFromTemplate(template); -Menu.setApplicationMenu(menu); +const menu = Menu.buildFromTemplate(template) +Menu.setApplicationMenu(menu) ``` ## Class: Menu @@ -320,7 +321,7 @@ the first item. Template: -```javascript +``` [ {label: '4', id: '4'}, {label: '5', id: '5'}, @@ -342,7 +343,7 @@ Menu: Template: -```javascript +``` [ {label: 'a', position: 'endof=letters'}, {label: '1', position: 'endof=numbers'}, diff --git a/docs/api/native-image.md b/docs/api/native-image.md index 4bf12413f21e..6db5822a2e86 100644 --- a/docs/api/native-image.md +++ b/docs/api/native-image.md @@ -9,15 +9,20 @@ 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 @@ -55,7 +60,9 @@ images/ ```javascript +const {Tray} = require('electron') let appIcon = new Tray('/Users/somebody/images/icon.png') +console.log(appIcon) ``` Following suffixes for DPI are also supported: @@ -105,8 +112,10 @@ Creates an empty `NativeImage` instance. Creates a new `NativeImage` instance from a file located at `path`. ```javascript -const {nativeImage} = require('electron') +const nativeImage = require('electron').nativeImage + let image = nativeImage.createFromPath('/Users/somebody/images/icon.png') +console.log(image) ``` ### `nativeImage.createFromBuffer(buffer[, scaleFactor])` diff --git a/docs/api/power-monitor.md b/docs/api/power-monitor.md index 12c27578e67e..57e9d030be92 100644 --- a/docs/api/power-monitor.md +++ b/docs/api/power-monitor.md @@ -8,11 +8,13 @@ event of the `app` module is emitted. For example: ```javascript +const {app} = require('electron') + app.on('ready', () => { require('electron').powerMonitor.on('suspend', () => { - console.log('The system is going to sleep'); - }); -}); + console.log('The system is going to sleep') + }) +}) ``` ## Events diff --git a/docs/api/power-save-blocker.md b/docs/api/power-save-blocker.md index f9e350867a3e..4ad17df53bd2 100644 --- a/docs/api/power-save-blocker.md +++ b/docs/api/power-save-blocker.md @@ -5,12 +5,12 @@ For example: ```javascript -const {powerSaveBlocker} = require('electron'); +const {powerSaveBlocker} = require('electron') -const id = powerSaveBlocker.start('prevent-display-sleep'); -console.log(powerSaveBlocker.isStarted(id)); +const id = powerSaveBlocker.start('prevent-display-sleep') +console.log(powerSaveBlocker.isStarted(id)) -powerSaveBlocker.stop(id); +powerSaveBlocker.stop(id) ``` ## Methods diff --git a/docs/api/process.md b/docs/api/process.md index 2f618f240da3..e467f2fc2cdb 100644 --- a/docs/api/process.md +++ b/docs/api/process.md @@ -16,12 +16,12 @@ the global scope when node integration is turned off: ```javascript // preload.js -const _setImmediate = setImmediate; -const _clearImmediate = clearImmediate; +const _setImmediate = setImmediate +const _clearImmediate = clearImmediate process.once('loaded', () => { - global.setImmediate = _setImmediate; - global.clearImmediate = _clearImmediate; -}); + global.setImmediate = _setImmediate + global.clearImmediate = _clearImmediate +}) ``` ## Properties diff --git a/docs/api/protocol.md b/docs/api/protocol.md index bcea37bd224c..97e37d3c4ba2 100644 --- a/docs/api/protocol.md +++ b/docs/api/protocol.md @@ -6,19 +6,19 @@ 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'); +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)}); + const url = request.url.substr(7) + callback({path: path.normalize(`${__dirname}/${url}`)}) }, (error) => { - if (error) - console.error('Failed to register protocol'); - }); -}); + 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. @@ -52,10 +52,12 @@ So if you want to register a custom protocol to replace the `http` protocol, you have to register it as standard scheme: ```javascript -protocol.registerStandardSchemes(['atom']); +const {app, protocol} = require('electron') + +protocol.registerStandardSchemes(['atom']) app.on('ready', () => { - protocol.registerHttpProtocol('atom', ...); -}); + protocol.registerHttpProtocol('atom', '...') +}) ``` **Note:** This method can only be used before the `ready` event of the `app` @@ -119,12 +121,13 @@ should be called with either a `Buffer` object or an object that has the `data`, Example: ```javascript +const {protocol} = require('electron') + protocol.registerBufferProtocol('atom', (request, callback) => { - callback({mimeType: 'text/html', data: new Buffer('
Response
')}); + callback({mimeType: 'text/html', data: new Buffer('
Response
')}) }, (error) => { - if (error) - console.error('Failed to register protocol'); -}); + if (error) console.error('Failed to register protocol') +}) ``` ### `protocol.registerStringProtocol(scheme, handler[, completion])` diff --git a/docs/api/remote.md b/docs/api/remote.md index aa1b8082bb08..455e7f58a6a5 100644 --- a/docs/api/remote.md +++ b/docs/api/remote.md @@ -14,10 +14,9 @@ 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'); +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), @@ -70,23 +69,22 @@ For instance you can't use a function from the renderer process in an ```javascript // main process mapNumbers.js exports.withRendererCallback = (mapper) => { - return [1,2,3].map(mapper); -}; + return [1, 2, 3].map(mapper) +} exports.withLocalCallback = () => { - return [1,2,3].map(x => x + 1); -}; + return [1, 2, 3].map(x => x + 1) +} ``` ```javascript // renderer process -const mapNumbers = require('electron').remote.require('./mapNumbers'); +const mapNumbers = require('electron').remote.require('./mapNumbers') +const withRendererCb = mapNumbers.withRendererCallback(x => x + 1) +const withLocalCb = mapNumbers.withLocalCallback() -const withRendererCb = mapNumbers.withRendererCallback(x => x + 1); - -const withLocalCb = mapNumbers.withLocalCallback(); - -console.log(withRendererCb, withLocalCb); // [undefined, undefined, undefined], [2, 3, 4] +console.log(withRendererCb, withLocalCb) +// [undefined, undefined, undefined], [2, 3, 4] ``` As you can see, the renderer callback's synchronous return value was not as @@ -100,9 +98,9 @@ For example, the following code seems innocent at first glance. It installs a callback for the `close` event on a remote object: ```javascript -remote.getCurrentWindow().on('close', () => { - // blabla... -}); +require('electron').remote.getCurrentWindow().on('close', () => { + // window was closed... +}) ``` But remember the callback is referenced by the main process until you @@ -124,7 +122,8 @@ 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 = remote.app; +const app = require('electron').remote.app +console.log(app) ``` ## Methods diff --git a/docs/api/screen.md b/docs/api/screen.md index d5318d8fc02c..191688afd5db 100644 --- a/docs/api/screen.md +++ b/docs/api/screen.md @@ -21,7 +21,8 @@ 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: @@ -43,6 +44,7 @@ app.on('ready', () => { x: externalDisplay.bounds.x + 50, y: externalDisplay.bounds.y + 50 }) + win.loadURL('https://github.com') } }) ``` diff --git a/docs/api/session.md b/docs/api/session.md index 527effc4d0b6..3ec443f884fd 100644 --- a/docs/api/session.md +++ b/docs/api/session.md @@ -1,4 +1,4 @@ -# session + # session > Manage browser sessions, cookies, cache, proxy settings, etc. @@ -8,12 +8,13 @@ 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 {session, BrowserWindow} = require('electron') +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 @@ -52,9 +53,9 @@ Returns the default session object of the app. You can create a `Session` object in the `session` module: ```javascript -const session = require('electron').session; - -const ses = session.fromPartition('persist:name'); +const {session} = require('electron') +const ses = session.fromPartition('persist:name') +console.log(ses.getUserAgent()) ``` ### Instance Events @@ -73,12 +74,13 @@ 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(); + event.preventDefault() require('request')(item.getURL(), (data) => { - require('fs').writeFileSync('/somewhere', data); - }); -}); + require('fs').writeFileSync('/somewhere', data) + }) +}) ``` ### Instance Methods @@ -220,13 +222,13 @@ 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 -}); + latency: 500, + downloadThroughput: 6400, + uploadThroughput: 6400 +}) // To emulate a network outage. -window.webContents.session.enableNetworkEmulation({offline: true}); +window.webContents.session.enableNetworkEmulation({offline: true}) ``` #### `ses.disableNetworkEmulation()` @@ -247,12 +249,12 @@ Calling `setCertificateVerifyProc(null)` will revert back to default certificate verify proc. ```javascript -myWindow.webContents.session.setCertificateVerifyProc((hostname, cert, callback) => { - if (hostname === 'github.com') - callback(true); - else - callback(false); -}); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() + +win.webContents.session.setCertificateVerifyProc((hostname, cert, callback) => { + callback(hostname === 'github.com') +}) ``` #### `ses.setPermissionRequestHandler(handler)` @@ -267,16 +269,14 @@ Sets the handler which can be used to respond to permission requests for the `se Calling `callback(true)` will allow the permission and `callback(false)` will reject it. ```javascript -session.fromPartition(partition).setPermissionRequestHandler((webContents, permission, callback) => { - if (webContents.getURL() === host) { - if (permission === 'notifications') { - callback(false); // denied. - return; - } +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); -}); + callback(true) +}) ``` #### `ses.clearHostResolverCache([callback])` @@ -294,6 +294,7 @@ 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') @@ -340,13 +341,12 @@ const {app, session} = require('electron') const path = require('path') app.on('ready', function () { - const protocol = session.fromPartition(partitionName).protocol + 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)}) + callback({path: path.normalize(`${__dirname}/${url}`)}) }, function (error) { - if (error) - console.error('Failed to register protocol') + if (error) console.error('Failed to register protocol') }) }) ``` @@ -359,22 +359,23 @@ The `Cookies` class gives you ability to query and modify cookies. Instances of For example: ```javascript +const {session} = require('electron') + // Query all cookies. session.defaultSession.cookies.get({}, (error, cookies) => { - console.log(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(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) + if (error) console.error(error) }) ``` @@ -464,13 +465,15 @@ called with an `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" + details.requestHeaders['User-Agent'] = 'MyAgent' callback({cancel: false, requestHeaders: details.requestHeaders}) }) ``` diff --git a/docs/api/shell.md b/docs/api/shell.md index a1c01f0fbc77..5963246caf2c 100644 --- a/docs/api/shell.md +++ b/docs/api/shell.md @@ -7,9 +7,9 @@ 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'); +const {shell} = require('electron') -shell.openExternal('https://github.com'); +shell.openExternal('https://github.com') ``` ## Methods diff --git a/docs/api/synopsis.md b/docs/api/synopsis.md index a83ffc41f7b9..8a7fca71b77d 100644 --- a/docs/api/synopsis.md +++ b/docs/api/synopsis.md @@ -19,14 +19,13 @@ 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; +const {app, BrowserWindow} = require('electron') +let win = null app.on('ready', () => { - win = new BrowserWindow({width: 800, height: 600}); - win.loadURL('https://github.com'); -}); + 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 @@ -37,8 +36,8 @@ extra ability to use node modules: @@ -53,23 +52,43 @@ As of 0.37, you can use built-in modules. ```javascript -const {app, BrowserWindow} = require('electron'); +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; +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; +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 diff --git a/docs/api/system-preferences.md b/docs/api/system-preferences.md index 586422e56654..8a2af28a295d 100644 --- a/docs/api/system-preferences.md +++ b/docs/api/system-preferences.md @@ -3,8 +3,8 @@ > Get system preferences. ```javascript -const {systemPreferences} = require('electron'); -console.log(systemPreferences.isDarkMode()); +const {systemPreferences} = require('electron') +console.log(systemPreferences.isDarkMode()) ``` ## Methods @@ -79,23 +79,24 @@ 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 -let browserOptions = {width: 1000, height: 800}; +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; + browserOptions.transparent = true + browserOptions.frame = false } // Create the window. -let win = new BrowserWindow(browserOptions); +let win = new BrowserWindow(browserOptions) // Navigate. if (browserOptions.transparent) { - win.loadURL('file://' + __dirname + '/index.html'); + win.loadURL(`file://${__dirname}/index.html`) } else { // No transparency, so we load a fallback that uses basic styles. - win.loadURL('file://' + __dirname + '/fallback.html'); + win.loadURL(`file://${__dirname}/fallback.html`) } ``` diff --git a/docs/api/tray.md b/docs/api/tray.md index 5ab68c5e9445..5e2536e95eac 100644 --- a/docs/api/tray.md +++ b/docs/api/tray.md @@ -13,7 +13,7 @@ app.on('ready', () => { {label: 'Item2', type: 'radio'}, {label: 'Item3', type: 'radio', checked: true}, {label: 'Item4', type: 'radio'} - ]); + ]) tray.setToolTip('This is my application.') tray.setContextMenu(contextMenu) }) @@ -31,8 +31,18 @@ __Platform limitations:__ you have to call `setContextMenu` again. For example: ```javascript -contextMenu.items[2].checked = false; -appIcon.setContextMenu(contextMenu); +const {Menu, Tray} = require('electron') +const 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[2].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. diff --git a/docs/api/web-contents.md b/docs/api/web-contents.md index 714d61eced95..5cff48af9738 100644 --- a/docs/api/web-contents.md +++ b/docs/api/web-contents.md @@ -9,12 +9,13 @@ the [`BrowserWindow`](browser-window.md) object. An example of accessing the `webContents` object: ```javascript -const {BrowserWindow} = require('electron'); +const {BrowserWindow} = require('electron') -let win = new BrowserWindow({width: 800, height: 1500}); -win.loadURL('http://github.com'); +let win = new BrowserWindow({width: 800, height: 1500}) +win.loadURL('http://github.com') -let contents = win.webContents; +let contents = win.webContents +console.log(contents) ``` ## Methods @@ -22,7 +23,8 @@ let contents = win.webContents; These methods can be accessed from the `webContents` module: ```js -const {webContents} = require('electron'); +const {webContents} = require('electron') +console.log(webContents) ``` ### `webContents.getAllWebContents()` @@ -431,6 +433,7 @@ first available device will be selected. `callback` should be called with cancel the request. ```javascript +const {app, webContents} = require('electron') app.commandLine.appendSwitch('enable-web-bluetooth') app.on('ready', () => { @@ -467,8 +470,9 @@ e.g. the `http://` or `file://`. If the load should bypass http cache then use the `pragma` header to achieve it. ```javascript -const options = {extraHeaders: 'pragma: no-cache\n'}; -webContents.loadURL(url, options); +const {webContents} = require('electron') +const options = {extraHeaders: 'pragma: no-cache\n'} +webContents.loadURL('https://github.com', options) ``` #### `contents.downloadURL(url)` @@ -483,10 +487,12 @@ Initiates a download of the resource at `url` without navigating. The Returns URL of the current web page. ```javascript -let win = new BrowserWindow({width: 800, height: 600}); -win.loadURL('http://github.com'); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow({width: 800, height: 600}) +win.loadURL('http://github.com') -let currentURL = win.webContents.getURL(); +let currentURL = win.webContents.getURL() +console.log(currentURL) ``` #### `contents.getTitle()` @@ -690,12 +696,13 @@ the request can be obtained by subscribing to Stops any `findInPage` request for the `webContents` with the provided `action`. ```javascript +const {webContents} = require('electron') webContents.on('found-in-page', (event, result) => { - if (result.finalUpdate) - webContents.stopFindInPage('clearSelection'); -}); + if (result.finalUpdate) webContents.stopFindInPage('clearSelection') +}) -const requestId = webContents.findInPage('api'); +const requestId = webContents.findInPage('api') +console.log(requestId) ``` #### `contents.capturePage([rect, ]callback)` @@ -761,7 +768,7 @@ The `callback` will be called with `callback(error, data)` on completion. The By default, an empty `options` will be regarded as: -```javascript +``` { marginsType: 0, printBackground: false, @@ -773,23 +780,22 @@ By default, an empty `options` will be regarded as: An example of `webContents.printToPDF`: ```javascript -const {BrowserWindow} = require('electron'); -const fs = require('fs'); +const {BrowserWindow} = require('electron') +const fs = require('fs') -let win = new BrowserWindow({width: 800, height: 600}); -win.loadURL('http://github.com'); +let win = new BrowserWindow({width: 800, height: 600}) +win.loadURL('http://github.com') win.webContents.on('did-finish-load', () => { // Use default printing options win.webContents.printToPDF({}, (error, data) => { - if (error) throw error; + if (error) throw error fs.writeFile('/tmp/print.pdf', data, (error) => { - if (error) - throw error; - console.log('Write PDF successfully.'); - }); - }); -}); + if (error) throw error + console.log('Write PDF successfully.') + }) + }) +}) ``` #### `contents.addWorkSpace(path)` @@ -800,9 +806,11 @@ Adds the specified path to DevTools workspace. Must be used after DevTools creation: ```javascript +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() win.webContents.on('devtools-opened', () => { - win.webContents.addWorkSpace(__dirname); -}); + win.webContents.addWorkSpace(__dirname) +}) ``` #### `contents.removeWorkSpace(path)` @@ -863,15 +871,16 @@ An example of sending messages from the main process to the renderer process: ```javascript // In the main process. -let win = null; +const {app, BrowserWindow} = require('electron') +let win = null app.on('ready', () => { - win = new BrowserWindow({width: 800, height: 600}); - win.loadURL(`file://${__dirname}/index.html`); + win = new BrowserWindow({width: 800, height: 600}) + win.loadURL(`file://${__dirname}/index.html`) win.webContents.on('did-finish-load', () => { - win.webContents.send('ping', 'whoooooooh!'); - }); -}); + win.webContents.send('ping', 'whoooooooh!') + }) +}) ``` ```html @@ -880,8 +889,8 @@ app.on('ready', () => { @@ -1010,14 +1019,16 @@ the cursor when dragging. Returns true if the process of saving page has been initiated successfully. ```javascript -win.loadURL('https://github.com'); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() + +win.loadURL('https://github.com') win.webContents.on('did-finish-load', () => { win.webContents.savePage('/tmp/test.html', 'HTMLComplete', (error) => { - if (!error) - console.log('Save page successfully'); - }); -}); + if (!error) console.log('Save page successfully') + }) +}) ``` #### `contents.showDefinitionForSelection()` _macOS_ @@ -1054,24 +1065,28 @@ Get the debugger instance for this webContents. Debugger API serves as an alternate transport for [remote debugging protocol][rdp]. ```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.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); -}); + 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(); + if (params.request.url === 'https://www.github.com') { + win.webContents.debugger.detach() + } } -}); +}) -win.webContents.debugger.sendCommand('Network.enable'); +win.webContents.debugger.sendCommand('Network.enable') ``` ### Instance Methods diff --git a/docs/api/web-frame.md b/docs/api/web-frame.md index 1ad5589bfb4e..31ec91f93f9d 100644 --- a/docs/api/web-frame.md +++ b/docs/api/web-frame.md @@ -5,9 +5,9 @@ An example of zooming current page to 200%. ```javascript -const {webFrame} = require('electron'); +const {webFrame} = require('electron') -webFrame.setZoomFactor(2); +webFrame.setZoomFactor(2) ``` ## Methods @@ -58,11 +58,12 @@ 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)); + spellCheck (text) { + return !(require('spellchecker').isMisspelled(text)) } -}); +}) ``` ### `webFrame.registerURLSchemeAsSecure(scheme)` @@ -112,12 +113,13 @@ 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, @@ -130,8 +132,8 @@ This will generate: cssStyleSheets: { /* same with "images" */ }, xslStyleSheets: { /* same with "images" */ }, fonts: { /* same with "images" */ }, - other: { /* same with "images" */ }, -} + other: { /* same with "images" */ } +}) ``` ### `webFrame.clearCache()` diff --git a/docs/api/web-view-tag.md b/docs/api/web-view-tag.md index e5f6df811d47..8c93bf9fbb8e 100644 --- a/docs/api/web-view-tag.md +++ b/docs/api/web-view-tag.md @@ -12,7 +12,7 @@ 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 purpose, `webview` can only be used in `BrowserWindow`s that have +For security purposes, `webview` can only be used in `BrowserWindow`s that have `nodeIntegration` enabled. ## Example @@ -35,20 +35,20 @@ and displays a "loading..." message during the load time: ```html ``` @@ -223,9 +223,10 @@ The `webview` tag has the following methods: **Example** ```javascript +const webview = document.getElementById('foo') webview.addEventListener('dom-ready', () => { - webview.openDevTools(); -}); + webview.openDevTools() +}) ``` ### `.loadURL(url[, options])` @@ -618,9 +619,10 @@ 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); -}); + console.log('Guest page logged a message:', e.message) +}) ``` ### Event: 'found-in-page' @@ -638,12 +640,13 @@ Fired when a result is available for [`webview.findInPage`](web-view-tag.md#webviewtagfindinpage) request. ```javascript +const webview = document.getElementById('foo') webview.addEventListener('found-in-page', (e) => { - if (e.result.finalUpdate) - webview.stopFindInPage('keepSelection'); -}); + if (e.result.finalUpdate) webview.stopFindInPage('keepSelection') +}) -const requestId = webview.findInPage('test'); +const requestId = webview.findInPage('test') +console.log(requestId) ``` ### Event: 'new-window' @@ -662,14 +665,15 @@ 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 {shell} = require('electron') +const webview = document.getElementById('foo') webview.addEventListener('new-window', (e) => { - const protocol = require('url').parse(e.url).protocol; + const protocol = require('url').parse(e.url).protocol if (protocol === 'http:' || protocol === 'https:') { - shell.openExternal(e.url); + shell.openExternal(e.url) } -}); +}) ``` ### Event: 'will-navigate' @@ -722,9 +726,10 @@ 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'; -}); + webview.src = 'about:blank' +}) ``` ### Event: 'ipc-message' @@ -741,19 +746,20 @@ between guest page and embedder page: ```javascript // In embedder page. +const webview = document.getElementById('foo') webview.addEventListener('ipc-message', (event) => { - console.log(event.channel); + console.log(event.channel) // Prints "pong" -}); -webview.send('ping'); +}) +webview.send('ping') ``` ```javascript // In guest page. -const {ipcRenderer} = require('electron'); +const {ipcRenderer} = require('electron') ipcRenderer.on('ping', () => { - ipcRenderer.sendToHost('pong'); -}); + ipcRenderer.sendToHost('pong') +}) ``` ### Event: 'crashed' diff --git a/docs/faq.md b/docs/faq.md index 51ebf687a41c..0079d43f4e26 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -36,17 +36,17 @@ renderers through the `remote` property of `electron` module: // In the main process. global.sharedObject = { someProperty: 'default value' -}; +} ``` ```javascript // In page 1. -require('electron').remote.getGlobal('sharedObject').someProperty = 'new value'; +require('electron').remote.getGlobal('sharedObject').someProperty = 'new value' ``` ```javascript // In page 2. -console.log(require('electron').remote.getGlobal('sharedObject').someProperty); +console.log(require('electron').remote.getGlobal('sharedObject').someProperty) ``` ## My app's window/tray disappeared after a few minutes. @@ -63,18 +63,22 @@ If you want a quick fix, you can make the variables global by changing your code from this: ```javascript +const {app, Tray} = require('electron') app.on('ready', () => { - const tray = new Tray('/path/to/icon.png'); -}); + const tray = new Tray('/path/to/icon.png') + tray.setTitle('hello world') +}) ``` to this: ```javascript -let tray = null; +const {app, Tray} = require('electron') +let tray = null app.on('ready', () => { - tray = new Tray('/path/to/icon.png'); -}); + tray = new Tray('/path/to/icon.png') + tray.setTitle('hello world') +}) ``` ## I can not use jQuery/RequireJS/Meteor/AngularJS in Electron. @@ -87,11 +91,13 @@ To solve this, you can turn off node integration in Electron: ```javascript // In the main process. +const {BrowserWindow} = require('electron') let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } -}); +}) +win.show() ``` But if you want to keep the abilities of using Node.js and Electron APIs, you @@ -114,7 +120,7 @@ delete window.module; When using Electron's built-in module you might encounter an error like this: ``` -> require('electron').webFrame.setZoomFactor(1.0); +> require('electron').webFrame.setZoomFactor(1.0) Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined ``` @@ -125,7 +131,7 @@ To verify whether you are using the correct built-in module, you can print the path of the `electron` module: ```javascript -console.log(require.resolve('electron')); +console.log(require.resolve('electron')) ``` and then check if it is in the following form: diff --git a/docs/tutorial/application-packaging.md b/docs/tutorial/application-packaging.md index 07caa681102a..819720122502 100644 --- a/docs/tutorial/application-packaging.md +++ b/docs/tutorial/application-packaging.md @@ -51,29 +51,29 @@ $ asar list /path/to/example.asar Read a file in the `asar` archive: ```javascript -const fs = require('fs'); -fs.readFileSync('/path/to/example.asar/file.txt'); +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'); +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'); +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'); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow({width: 800, height: 600}) +win.loadURL('file:///path/to/example.asar/static/index.html') ``` ### Web API @@ -85,10 +85,10 @@ For example, to get a file with `$.get`: ```html ``` @@ -99,16 +99,17 @@ content of an `asar` archive as a file. For this purpose you can use the built-i `original-fs` module which provides original `fs` APIs without `asar` support: ```javascript -const originalFs = require('original-fs'); -originalFs.readFileSync('/path/to/example.asar'); +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 -process.noAsar = true; -fs.readFileSync('/path/to/example.asar'); +const fs = require('fs') +process.noAsar = true +fs.readFileSync('/path/to/example.asar') ``` ## Limitations of the Node API diff --git a/docs/tutorial/desktop-environment-integration.md b/docs/tutorial/desktop-environment-integration.md index 413106bb6357..343657092660 100644 --- a/docs/tutorial/desktop-environment-integration.md +++ b/docs/tutorial/desktop-environment-integration.md @@ -20,11 +20,11 @@ the currently running operating system's native notification APIs to display it. ```javascript let myNotification = new Notification('Title', { body: 'Lorem Ipsum Dolor Sit Amet' -}); +}) myNotification.onclick = () => { - console.log('Notification clicked'); -}; + console.log('Notification clicked') +} ``` While code and user experience across operating systems are similar, there @@ -75,14 +75,16 @@ To add a file to recent documents, you can use the [app.addRecentDocument][addrecentdocument] API: ```javascript -app.addRecentDocument('/Users/USERNAME/Desktop/work.type'); +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 -app.clearRecentDocuments(); +const {app} = require('electron') +app.clearRecentDocuments() ``` ### Windows Notes @@ -113,19 +115,17 @@ To set your custom dock menu, you can use the `app.dock.setMenu` API, which is only available on macOS: ```javascript -const electron = require('electron'); -const app = electron.app; -const Menu = electron.Menu; +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 Window', click () { console.log('New Window') }}, + {label: 'New Window with Settings', submenu: [ + {label: 'Basic'}, + {label: 'Pro'} ]}, - { label: 'New Command...'} -]); -app.dock.setMenu(dockMenu); + {label: 'New Command...'} +]) +app.dock.setMenu(dockMenu) ``` ## User Tasks (Windows) @@ -162,6 +162,7 @@ To set user tasks for your application, you can use [app.setUserTasks][setusertaskstasks] API: ```javascript +const {app} = require('electron') app.setUserTasks([ { program: process.execPath, @@ -171,13 +172,14 @@ app.setUserTasks([ title: 'New Window', description: 'Create a new window' } -]); +]) ``` To clean your tasks list, just call `app.setUserTasks` with an empty array: ```javascript -app.setUserTasks([]); +const {app} = require('electron') +app.setUserTasks([]) ``` The user tasks will still show even after your application closes, so the icon @@ -209,34 +211,36 @@ You can use [BrowserWindow.setThumbarButtons][setthumbarbuttons] to set thumbnail toolbar in your application: ```javascript -const {BrowserWindow} = require('electron'); -const path = require('path'); +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'); } + click () { console.log('button1 clicked') } }, { tooltip: 'button2', icon: path.join(__dirname, 'button2.png'), flags: ['enabled', 'dismissonclick'], - click() { console.log('button2 clicked.'); } + click () { console.log('button2 clicked.') } } -]); +]) ``` To clean thumbnail toolbar buttons, just call `BrowserWindow.setThumbarButtons` with an empty array: ```javascript -win.setThumbarButtons([]); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() +win.setThumbarButtons([]) ``` ## Unity Launcher Shortcuts (Linux) @@ -267,8 +271,9 @@ To set the progress bar for a Window, you can use the [BrowserWindow.setProgressBar][setprogressbar] API: ```javascript -let win = new BrowserWindow({...}); -win.setProgressBar(0.5); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() +win.setProgressBar(0.5) ``` ## Icon Overlays in Taskbar (Windows) @@ -294,8 +299,9 @@ To set the overlay icon for a window, you can use the [BrowserWindow.setOverlayIcon][setoverlayicon] API: ```javascript -let win = new BrowserWindow({...}); -win.setOverlayIcon('path/to/overlay.png', 'Description for overlay'); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() +win.setOverlayIcon('path/to/overlay.png', 'Description for overlay') ``` ## Represented File of Window (macOS) @@ -316,9 +322,10 @@ To set the represented file of window, you can use the [BrowserWindow.setDocumentEdited][setdocumentedited] APIs: ```javascript -let win = new BrowserWindow({...}); -win.setRepresentedFilename('/etc/passwd'); -win.setDocumentEdited(true); +const {BrowserWindow} = require('electron') +let win = new BrowserWindow() +win.setRepresentedFilename('/etc/passwd') +win.setDocumentEdited(true) ``` ## Dragging files out of the window @@ -342,6 +349,7 @@ In web page: In the main process: ```javascript +const {ipcMain} = require('electron') ipcMain.on('ondragstart', (event, filePath) => { event.sender.startDrag({ file: filePath, diff --git a/docs/tutorial/online-offline-events.md b/docs/tutorial/online-offline-events.md index 2b7a6d7edc6a..f89e7fad78e4 100644 --- a/docs/tutorial/online-offline-events.md +++ b/docs/tutorial/online-offline-events.md @@ -6,16 +6,14 @@ using standard HTML5 APIs, as shown in the following example. _main.js_ ```javascript -const electron = require('electron'); -const app = electron.app; -const BrowserWindow = electron.BrowserWindow; +const {app, BrowserWindow} = require('electron') -let onlineStatusWindow; +let onlineStatusWindow app.on('ready', () => { - onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); - onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`); -}); + onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }) + onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`) +}) ``` _online-status.html_ @@ -26,13 +24,13 @@ _online-status.html_ @@ -47,21 +45,17 @@ to the main process and handled as needed, as shown in the following example. _main.js_ ```javascript -const electron = require('electron'); -const app = electron.app; -const ipcMain = electron.ipcMain; -const BrowserWindow = electron.BrowserWindow; - -let onlineStatusWindow; +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`); -}); + 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); -}); + console.log(status) +}) ``` _online-status.html_ @@ -71,15 +65,15 @@ _online-status.html_ diff --git a/docs/tutorial/quick-start.md b/docs/tutorial/quick-start.md index 6abfd9133e8c..5ae2e81c8b49 100644 --- a/docs/tutorial/quick-start.md +++ b/docs/tutorial/quick-start.md @@ -80,56 +80,52 @@ The `main.js` should create windows and handle system events, a typical example being: ```javascript -const electron = require('electron'); -// Module to control application life. -const {app} = electron; -// Module to create native browser window. -const {BrowserWindow} = electron; +const {app, BrowserWindow} = require('electron') // 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; +let win -function createWindow() { +function createWindow () { // Create the browser window. - win = new BrowserWindow({width: 800, height: 600}); + win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. - win.loadURL(`file://${__dirname}/index.html`); + win.loadURL(`file://${__dirname}/index.html`) // Open the DevTools. - win.webContents.openDevTools(); + 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; - }); + 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); +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.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(); + 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. diff --git a/docs/tutorial/using-pepper-flash-plugin.md b/docs/tutorial/using-pepper-flash-plugin.md index 349d7c0e9f63..4b4fab5867a1 100644 --- a/docs/tutorial/using-pepper-flash-plugin.md +++ b/docs/tutorial/using-pepper-flash-plugin.md @@ -20,6 +20,9 @@ before the app ready event. Also, turn on `plugins` option of `BrowserWindow`. For example: ```javascript +const {app, BrowserWindow} = require('electron') +const path = require('path') + // Specify flash path, supposing it is placed in the same directory with main.js. let pluginName switch (process.platform) { @@ -39,7 +42,7 @@ app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169') app.on('ready', () => { - win = new BrowserWindow({ + let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { @@ -48,7 +51,7 @@ app.on('ready', () => { }) win.loadURL(`file://${__dirname}/index.html`) // Something else -}); +}) ``` You can also try loading the system wide Pepper Flash plugin instead of shipping diff --git a/docs/tutorial/using-selenium-and-webdriver.md b/docs/tutorial/using-selenium-and-webdriver.md index 50727c7169f4..8e6961697764 100644 --- a/docs/tutorial/using-selenium-and-webdriver.md +++ b/docs/tutorial/using-selenium-and-webdriver.md @@ -79,7 +79,7 @@ upstream, except that you have to manually specify how to connect chrome driver and where to find Electron's binary: ```javascript -const webdriver = require('selenium-webdriver'); +const webdriver = require('selenium-webdriver') const driver = new webdriver.Builder() // The "9515" is the port opened by chrome driver. @@ -87,22 +87,22 @@ const driver = new webdriver.Builder() .withCapabilities({ chromeOptions: { // Here is the path to your Electron binary. - binary: '/Path-to-Your-App.app/Contents/MacOS/Electron', + binary: '/Path-to-Your-App.app/Contents/MacOS/Electron' } }) .forBrowser('electron') - .build(); + .build() -driver.get('http://www.google.com'); -driver.findElement(webdriver.By.name('q')).sendKeys('webdriver'); -driver.findElement(webdriver.By.name('btnG')).click(); +driver.get('http://www.google.com') +driver.findElement(webdriver.By.name('q')).sendKeys('webdriver') +driver.findElement(webdriver.By.name('btnG')).click() driver.wait(() => { - return driver.getTitle().then((title) => { - return title === 'webdriver - Google Search'; - }); -}, 1000); + return driver.getTitle().then((title) => { + return title === 'webdriver - Google Search' + }) +}, 1000) -driver.quit(); +driver.quit() ``` ## Setting up with WebdriverIO @@ -132,7 +132,7 @@ $ npm install webdriverio ### 3. Connect to chrome driver ```javascript -const webdriverio = require('webdriverio'); +const webdriverio = require('webdriverio') const options = { host: 'localhost', // Use localhost as chrome driver server port: 9515, // "9515" is the port opened by chrome driver. @@ -143,9 +143,9 @@ const options = { args: [/* cli arguments */] // Optional, perhaps 'app=' + /path/to/your/app/ } } -}; +} -let client = webdriverio.remote(options); +let client = webdriverio.remote(options) client .init() @@ -153,9 +153,9 @@ client .setValue('#q', 'webdriverio') .click('#btnG') .getTitle().then((title) => { - console.log('Title was: ' + title); + console.log('Title was: ' + title) }) - .end(); + .end() ``` ## Workflow diff --git a/docs/tutorial/using-widevine-cdm-plugin.md b/docs/tutorial/using-widevine-cdm-plugin.md index b7b37c58a991..512da7a041a1 100644 --- a/docs/tutorial/using-widevine-cdm-plugin.md +++ b/docs/tutorial/using-widevine-cdm-plugin.md @@ -51,23 +51,26 @@ enabled. Example code: ```javascript +const {app, BrowserWindow} = require('electron') + // You have to pass the filename of `widevinecdmadapter` here, it is // * `widevinecdmadapter.plugin` on macOS, // * `libwidevinecdmadapter.so` on Linux, // * `widevinecdmadapter.dll` on Windows. -app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.plugin'); +app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.plugin') // The version of plugin can be got from `chrome://plugins` page in Chrome. -app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866'); +app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866') -let win = null; +let win = null app.on('ready', () => { win = new BrowserWindow({ webPreferences: { // The `plugins` have to be enabled. plugins: true } - }); -}); + }) + win.show() +}) ``` ## Verifying the plugin