Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: remove references to remote from docs #27715

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/api/app.md
Expand Up @@ -502,7 +502,7 @@ Returns:
Emitted when `desktopCapturer.getSources()` is called in the renderer process of `webContents`.
Calling `event.preventDefault()` will make it return empty sources.

### Event: 'remote-require'
### Event: 'remote-require' _Deprecated_

Returns:

Expand All @@ -514,7 +514,7 @@ Emitted when `remote.require()` is called in the renderer process of `webContent
Calling `event.preventDefault()` will prevent the module from being returned.
Custom value can be returned by setting `event.returnValue`.

### Event: 'remote-get-global'
### Event: 'remote-get-global' _Deprecated_

Returns:

Expand All @@ -526,7 +526,7 @@ Emitted when `remote.getGlobal()` is called in the renderer process of `webConte
Calling `event.preventDefault()` will prevent the global from being returned.
Custom value can be returned by setting `event.returnValue`.

### Event: 'remote-get-builtin'
### Event: 'remote-get-builtin' _Deprecated_

Returns:

Expand All @@ -538,7 +538,7 @@ Emitted when `remote.getBuiltin()` is called in the renderer process of `webCont
Calling `event.preventDefault()` will prevent the module from being returned.
Custom value can be returned by setting `event.returnValue`.

### Event: 'remote-get-current-window'
### Event: 'remote-get-current-window' _Deprecated_

Returns:

Expand All @@ -549,7 +549,7 @@ Emitted when `remote.getCurrentWindow()` is called in the renderer process of `w
Calling `event.preventDefault()` will prevent the object from being returned.
Custom value can be returned by setting `event.returnValue`.

### Event: 'remote-get-current-web-contents'
### Event: 'remote-get-current-web-contents' _Deprecated_

Returns:

Expand Down
3 changes: 0 additions & 3 deletions docs/api/browser-window.md
Expand Up @@ -8,9 +8,6 @@ Process: [Main](../glossary.md#main-process)
// In the main process.
const { BrowserWindow } = require('electron')

// Or use `remote` from the renderer process.
// const { BrowserWindow } = require('electron').remote

const win = new BrowserWindow({ width: 800, height: 600 })

// Load a remote URL
Expand Down
8 changes: 0 additions & 8 deletions docs/api/dialog.md
Expand Up @@ -11,14 +11,6 @@ const { dialog } = require('electron')
console.log(dialog.showOpenDialog({ properties: ['openFile', '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:
Expand Down
12 changes: 9 additions & 3 deletions docs/api/frameless-window.md
Expand Up @@ -112,13 +112,19 @@ optional parameter can be used to forward mouse move messages to the web page,
allowing events such as `mouseleave` to be emitted:

```javascript
const win = require('electron').remote.getCurrentWindow()
const { ipcRenderer } = require('electron')
const el = document.getElementById('clickThroughElement')
el.addEventListener('mouseenter', () => {
win.setIgnoreMouseEvents(true, { forward: true })
ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
})
el.addEventListener('mouseleave', () => {
win.setIgnoreMouseEvents(false)
ipcRenderer.send('set-ignore-mouse-events', false)
})

// Main process
const { ipcMain } = require('electron')
ipcMain.on('set-ignore-mouse-events', (event, ...args) => {
BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args)
})
```

Expand Down
30 changes: 8 additions & 22 deletions docs/api/sandbox-option.md
Expand Up @@ -88,35 +88,24 @@ and preload.js:

```js
// This file is loaded whenever a javascript context is created. It runs in a
// private scope that can access a subset of Electron renderer APIs. We must be
// careful to not leak any objects into the global scope!
const { ipcRenderer, remote } = require('electron')
const fs = remote.require('fs')

// read a configuration file using the `fs` module
const buf = fs.readFileSync('allowed-popup-urls.json')
const allowedUrls = JSON.parse(buf.toString('utf8'))
// private scope that can access a subset of Electron renderer APIs. Without
// contextIsolation enabled, it's possible to accidentally leak privileged
// globals like ipcRenderer to web content.
const { ipcRenderer } = require('electron')

const defaultWindowOpen = window.open

function customWindowOpen (url, ...args) {
if (allowedUrls.indexOf(url) === -1) {
ipcRenderer.sendSync('blocked-popup-notification', location.origin, url)
return null
}
return defaultWindowOpen(url, ...args)
window.open = function customWindowOpen (url, ...args) {
ipcRenderer.send('report-window-open', location.origin, url, args)
return defaultWindowOpen(url + '?from_electron=1', ...args)
}

window.open = customWindowOpen
```

Important things to notice in the preload script:

- Even though the sandboxed renderer doesn't have Node.js running, it still has
access to a limited node-like environment: `Buffer`, `process`, `setImmediate`,
`clearImmediate` and `require` are available.
- The preload script can indirectly access all APIs from the main process through the
`remote` and `ipcRenderer` modules.
- The preload script must be contained in a single script, but it is possible to have
complex preload code composed with multiple modules by using a tool like
webpack or browserify. An example of using browserify is below.
Expand Down Expand Up @@ -144,15 +133,12 @@ following modules:
- `desktopCapturer`
- `ipcRenderer`
- `nativeImage`
- `remote`
- `webFrame`
- `events`
- `timers`
- `url`

More may be added as needed to expose more Electron APIs in the sandbox, but any
module in the main process can already be used through
`electron.remote.require`.
More may be added as needed to expose more Electron APIs in the sandbox.

## Rendering untrusted content

Expand Down
8 changes: 4 additions & 4 deletions docs/api/synopsis.md
Expand Up @@ -9,7 +9,7 @@ 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.
either process type.

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
Expand All @@ -29,15 +29,15 @@ app.whenReady().then(() => {
```

The renderer process is no different than a normal web page, except for the
extra ability to use node modules:
extra ability to use node modules if `nodeIntegration` is enabled:

```html
<!DOCTYPE html>
<html>
<body>
<script>
const { app } = require('electron').remote
console.log(app.getVersion())
const fs = require('fs')
console.log(fs.readFileSync(__filename, 'utf8'))
</script>
</body>
</html>
Expand Down
30 changes: 20 additions & 10 deletions docs/api/web-contents.md
Expand Up @@ -785,7 +785,7 @@ Returns:
Emitted when `desktopCapturer.getSources()` is called in the renderer process.
Calling `event.preventDefault()` will make it return empty sources.

#### Event: 'remote-require'
#### Event: 'remote-require' _Deprecated_

Returns:

Expand All @@ -796,7 +796,7 @@ Emitted when `remote.require()` is called in the renderer process.
Calling `event.preventDefault()` will prevent the module from being returned.
Custom value can be returned by setting `event.returnValue`.

#### Event: 'remote-get-global'
#### Event: 'remote-get-global' _Deprecated_

Returns:

Expand All @@ -807,7 +807,7 @@ Emitted when `remote.getGlobal()` is called in the renderer process.
Calling `event.preventDefault()` will prevent the global from being returned.
Custom value can be returned by setting `event.returnValue`.

#### Event: 'remote-get-builtin'
#### Event: 'remote-get-builtin' _Deprecated_

Returns:

Expand All @@ -818,7 +818,7 @@ Emitted when `remote.getBuiltin()` is called in the renderer process.
Calling `event.preventDefault()` will prevent the module from being returned.
Custom value can be returned by setting `event.returnValue`.

#### Event: 'remote-get-current-window'
#### Event: 'remote-get-current-window' _Deprecated_

Returns:

Expand All @@ -828,7 +828,7 @@ Emitted when `remote.getCurrentWindow()` is called in the renderer process.
Calling `event.preventDefault()` will prevent the object from being returned.
Custom value can be returned by setting `event.returnValue`.

#### Event: 'remote-get-current-web-contents'
#### Event: 'remote-get-current-web-contents' _Deprecated_

Returns:

Expand Down Expand Up @@ -1482,7 +1482,7 @@ An example of showing devtools in a `<webview>` tag:
<webview id="browser" src="https://github.com"></webview>
<webview id="devtools" src="about:blank"></webview>
<script>
const { webContents } = require('electron').remote
const { ipcRenderer } = require('electron')
const emittedOnce = (element, eventName) => new Promise(resolve => {
element.addEventListener(eventName, event => resolve(event), { once: true })
})
Expand All @@ -1491,16 +1491,26 @@ An example of showing devtools in a `<webview>` tag:
const browserReady = emittedOnce(browserView, 'dom-ready')
const devtoolsReady = emittedOnce(devtoolsView, 'dom-ready')
Promise.all([browserReady, devtoolsReady]).then(() => {
const browser = webContents.fromId(browserView.getWebContentsId())
const devtools = webContents.fromId(devtoolsView.getWebContentsId())
browser.setDevToolsWebContents(devtools)
browser.openDevTools()
const targetId = browserView.getWebContentsId()
const devtoolsId = devtoolsView.getWebContentsId()
ipcRenderer.send('open-devtools', targetId, devtoolsId)
})
</script>
</body>
</html>
```

```js
// Main process
const { ipcMain, webContents } = require('electron')
ipcMain.on('open-devtools', (event, targetContentsId, devtoolsContentsId) => {
const target = webContents.fromId(targetContentsId)
const devtools = webContents.fromId(devtoolsContentsId)
target.setDevToolsWebContents(devtools)
target.openDevTools()
})
```

An example of showing devtools in a `BrowserWindow`:

```js
Expand Down
2 changes: 1 addition & 1 deletion docs/api/webview-tag.md
Expand Up @@ -137,7 +137,7 @@ This option is disabled by default in the guest page.
```

A `Boolean`. When this attribute is `false` the guest page in `webview` will not have access
to the [`remote`](remote.md) module. The remote module is available by default.
to the [`remote`](remote.md) module. The remote module is unavailable by default.

### `plugins`

Expand Down
3 changes: 1 addition & 2 deletions docs/development/debug-instructions-windows.md
Expand Up @@ -69,8 +69,7 @@ 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
by your main JavaScript file) 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
Expand Down
6 changes: 5 additions & 1 deletion docs/fiddles/media/screenshot/take-screenshot/main.js
@@ -1,7 +1,11 @@
const { BrowserWindow, app } = require('electron')
const { BrowserWindow, app, screen, ipcMain } = require('electron')

let mainWindow = null

ipcMain.handle('get-screen-size', () => {
return screen.getPrimaryDisplay().workAreaSize
})

function createWindow () {
const windowOptions = {
width: 600,
Expand Down
11 changes: 5 additions & 6 deletions docs/fiddles/media/screenshot/take-screenshot/renderer.js
@@ -1,5 +1,4 @@
const { desktopCapturer } = require('electron')
const { screen, shell } = require('electron').remote
const { desktopCapturer, shell, ipcRenderer } = require('electron')

const fs = require('fs')
const os = require('os')
Expand All @@ -8,9 +7,9 @@ const path = require('path')
const screenshot = document.getElementById('screen-shot')
const screenshotMsg = document.getElementById('screenshot-path')

screenshot.addEventListener('click', (event) => {
screenshot.addEventListener('click', async (event) => {
screenshotMsg.textContent = 'Gathering screens...'
const thumbSize = determineScreenShotSize()
const thumbSize = await determineScreenShotSize()
const options = { types: ['screen'], thumbnailSize: thumbSize }

desktopCapturer.getSources(options, (error, sources) => {
Expand All @@ -33,8 +32,8 @@ screenshot.addEventListener('click', (event) => {
})
})

function determineScreenShotSize () {
const screenSize = screen.getPrimaryDisplay().workAreaSize
async function determineScreenShotSize () {
const screenSize = await ipcRenderer.invoke('get-screen-size')
const maxDimension = Math.max(screenSize.width, screenSize.height)
return {
width: maxDimension * window.devicePixelRatio,
Expand Down
@@ -1,23 +1,20 @@
const { app, BrowserWindow } = require('electron')
const { app, BrowserWindow, ipcMain } = require('electron')

let mainWindow = null
ipcMain.on('create-frameless-window', (event, {url}) => {
const win = new BrowserWindow({ frame: false })
win.loadURL(url)
})

function createWindow () {
const windowOptions = {
const mainWindow = new BrowserWindow({
width: 600,
height: 400,
title: 'Create a frameless window',
webPreferences: {
nodeIntegration: true
}
}

mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadFile('index.html')

mainWindow.on('closed', () => {
mainWindow = null
})
mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
Expand Down
@@ -1,12 +1,8 @@
const { BrowserWindow } = require('electron').remote
const { ipcRenderer } = require('electron')

const newWindowBtn = document.getElementById('frameless-window')

newWindowBtn.addEventListener('click', (event) => {
let win = new BrowserWindow({ frame: false })

win.on('close', () => { win = null })

win.loadURL('data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>')
win.show()
newWindowBtn.addEventListener('click', () => {
const url = 'data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>'
ipcRenderer.send('create-frameless-window', { url })
})