|
| 1 | +# @electron/remote |
| 2 | + |
| 3 | +`@electron/remote` is an [Electron](https://electronjs.org) module that bridges |
| 4 | +JavaScript objects from the main process to the renderer process. This lets you |
| 5 | +access main-process-only objects as if they were available in the renderer |
| 6 | +process. |
| 7 | + |
| 8 | +> ⚠️ **Warning!** This module has [many subtle |
| 9 | +> pitfalls][remote-considered-harmful]. There is almost always a better way to |
| 10 | +> accomplish your task than using this module. For example, [`ipcRenderer.invoke`](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args) can serve many common use cases. |
| 11 | +
|
| 12 | +`@electron/remote` is a replacement for the built-in `remote` module in |
| 13 | +Electron, which is deprecated and will eventually be removed. |
| 14 | + |
| 15 | +## Migrating from `remote` |
| 16 | + |
| 17 | +> **NOTE:** `@electron/remote` requires Electron 10 or higher. |
| 18 | +
|
| 19 | +There are three things you need to do to migrate from the built-in `remote` |
| 20 | +module to `@electron/remote`. |
| 21 | + |
| 22 | +First, you need to install it from NPM: |
| 23 | + |
| 24 | +```shell |
| 25 | +$ npm install --save @electron/remote |
| 26 | +``` |
| 27 | + |
| 28 | +Second, `@electron/remote/main` must be initialized in the main |
| 29 | +process before it can be used from the renderer: |
| 30 | + |
| 31 | +```javascript |
| 32 | +// in the main process: |
| 33 | +require('@electron/remote/main').initialize() |
| 34 | +``` |
| 35 | + |
| 36 | +Third, `require('electron').remote` in the renderer process must be |
| 37 | +replaced with `require('@electron/remote')`. |
| 38 | + |
| 39 | +```javascript |
| 40 | +// in the renderer process: |
| 41 | + |
| 42 | +// Before |
| 43 | +const { BrowserWindow } = require('electron').remote |
| 44 | + |
| 45 | +// After |
| 46 | +const { BrowserWindow } = require('@electron/remote') |
| 47 | +``` |
| 48 | + |
| 49 | +**Note:** Since this is requiring a module through npm rather than a built-in |
| 50 | +module, if you're using `remote` from a sandboxed process, you'll need to |
| 51 | +configure your bundler appropriately to package the code of `@electron/remote` |
| 52 | +in the preload script. Of course, [using `@electron/remote` makes the sandbox |
| 53 | +much less effective][remote-considered-harmful]. |
| 54 | + |
| 55 | +**Note:** `@electron/remote` respects the `enableRemoteModule` WebPreferences |
| 56 | +value. You must pass `{ webPreferences: { enableRemoteModule: true } }` to |
| 57 | +the constructor of `BrowserWindow`s that should be granted permission to use |
| 58 | +`@electron/remote`. |
| 59 | + |
| 60 | + |
| 61 | +# API Reference |
| 62 | + |
| 63 | +The `remote` module provides a simple way to do inter-process communication |
| 64 | +(IPC) between the renderer process (web page) and the main process. |
| 65 | + |
| 66 | +In Electron, GUI-related modules (such as `dialog`, `menu` etc.) are only |
| 67 | +available in the main process, not in the renderer process. In order to use them |
| 68 | +from the renderer process, the `ipc` module is necessary to send inter-process |
| 69 | +messages to the main process. With the `remote` module, you can invoke methods |
| 70 | +of the main process object without explicitly sending inter-process messages, |
| 71 | +similar to Java's [RMI][rmi]. An example of creating a browser window from a |
| 72 | +renderer process: |
| 73 | + |
| 74 | +```javascript |
| 75 | +const { BrowserWindow } = require('@electron/remote') |
| 76 | +let win = new BrowserWindow({ width: 800, height: 600 }) |
| 77 | +win.loadURL('https://github.com') |
| 78 | +``` |
| 79 | + |
| 80 | +In order for this to work, you first need to initialize the main-process side |
| 81 | +of the remote module: |
| 82 | + |
| 83 | +```javascript |
| 84 | +// in the main process: |
| 85 | +require('@electron/remote/main').initialize() |
| 86 | +``` |
| 87 | + |
| 88 | +**Note:** The remote module can be disabled for security reasons in the following contexts: |
| 89 | +- [`BrowserWindow`](browser-window.md) - by setting the `enableRemoteModule` option to `false`. |
| 90 | +- [`<webview>`](webview-tag.md) - by setting the `enableremotemodule` attribute to `false`. |
| 91 | + |
| 92 | +## Remote Objects |
| 93 | + |
| 94 | +Each object (including functions) returned by the `remote` module represents an |
| 95 | +object in the main process (we call it a remote object or remote function). |
| 96 | +When you invoke methods of a remote object, call a remote function, or create |
| 97 | +a new object with the remote constructor (function), you are actually sending |
| 98 | +synchronous inter-process messages. |
| 99 | + |
| 100 | +In the example above, both `BrowserWindow` and `win` were remote objects and |
| 101 | +`new BrowserWindow` didn't create a `BrowserWindow` object in the renderer |
| 102 | +process. Instead, it created a `BrowserWindow` object in the main process and |
| 103 | +returned the corresponding remote object in the renderer process, namely the |
| 104 | +`win` object. |
| 105 | + |
| 106 | +**Note:** Only [enumerable properties][enumerable-properties] which are present |
| 107 | +when the remote object is first referenced are accessible via remote. |
| 108 | + |
| 109 | +**Note:** Arrays and Buffers are copied over IPC when accessed via the `remote` |
| 110 | +module. Modifying them in the renderer process does not modify them in the main |
| 111 | +process and vice versa. |
| 112 | + |
| 113 | +## Lifetime of Remote Objects |
| 114 | + |
| 115 | +Electron makes sure that as long as the remote object in the renderer process |
| 116 | +lives (in other words, has not been garbage collected), the corresponding object |
| 117 | +in the main process will not be released. When the remote object has been |
| 118 | +garbage collected, the corresponding object in the main process will be |
| 119 | +dereferenced. |
| 120 | + |
| 121 | +If the remote object is leaked in the renderer process (e.g. stored in a map but |
| 122 | +never freed), the corresponding object in the main process will also be leaked, |
| 123 | +so you should be very careful not to leak remote objects. |
| 124 | + |
| 125 | +Primary value types like strings and numbers, however, are sent by copy. |
| 126 | + |
| 127 | +## Passing callbacks to the main process |
| 128 | + |
| 129 | +Code in the main process can accept callbacks from the renderer - for instance |
| 130 | +the `remote` module - but you should be extremely careful when using this |
| 131 | +feature. |
| 132 | + |
| 133 | +First, in order to avoid deadlocks, the callbacks passed to the main process |
| 134 | +are called asynchronously. You should not expect the main process to |
| 135 | +get the return value of the passed callbacks. |
| 136 | + |
| 137 | +For instance you can't use a function from the renderer process in an |
| 138 | +`Array.map` called in the main process: |
| 139 | + |
| 140 | +```javascript |
| 141 | +// main process mapNumbers.js |
| 142 | +exports.withRendererCallback = (mapper) => { |
| 143 | + return [1, 2, 3].map(mapper) |
| 144 | +} |
| 145 | + |
| 146 | +exports.withLocalCallback = () => { |
| 147 | + return [1, 2, 3].map(x => x + 1) |
| 148 | +} |
| 149 | +``` |
| 150 | + |
| 151 | +```javascript |
| 152 | +// renderer process |
| 153 | +const mapNumbers = require('@electron/remote').require('./mapNumbers') |
| 154 | +const withRendererCb = mapNumbers.withRendererCallback(x => x + 1) |
| 155 | +const withLocalCb = mapNumbers.withLocalCallback() |
| 156 | + |
| 157 | +console.log(withRendererCb, withLocalCb) |
| 158 | +// [undefined, undefined, undefined], [2, 3, 4] |
| 159 | +``` |
| 160 | + |
| 161 | +As you can see, the renderer callback's synchronous return value was not as |
| 162 | +expected, and didn't match the return value of an identical callback that lives |
| 163 | +in the main process. |
| 164 | + |
| 165 | +Second, the callbacks passed to the main process will persist until the |
| 166 | +main process garbage-collects them. |
| 167 | + |
| 168 | +For example, the following code seems innocent at first glance. It installs a |
| 169 | +callback for the `close` event on a remote object: |
| 170 | + |
| 171 | +```javascript |
| 172 | +require('@electron/remote').getCurrentWindow().on('close', () => { |
| 173 | + // window was closed... |
| 174 | +}) |
| 175 | +``` |
| 176 | + |
| 177 | +But remember the callback is referenced by the main process until you |
| 178 | +explicitly uninstall it. If you do not, each time you reload your window the |
| 179 | +callback will be installed again, leaking one callback for each restart. |
| 180 | + |
| 181 | +To make things worse, since the context of previously installed callbacks has |
| 182 | +been released, exceptions will be raised in the main process when the `close` |
| 183 | +event is emitted. |
| 184 | + |
| 185 | +To avoid this problem, ensure you clean up any references to renderer callbacks |
| 186 | +passed to the main process. This involves cleaning up event handlers, or |
| 187 | +ensuring the main process is explicitly told to dereference callbacks that came |
| 188 | +from a renderer process that is exiting. |
| 189 | + |
| 190 | +## Accessing built-in modules in the main process |
| 191 | + |
| 192 | +The built-in modules in the main process are added as getters in the `remote` |
| 193 | +module, so you can use them directly like the `electron` module. |
| 194 | + |
| 195 | +```javascript |
| 196 | +const app = require('@electron/remote').app |
| 197 | +console.log(app) |
| 198 | +``` |
| 199 | + |
| 200 | +## Methods |
| 201 | + |
| 202 | +The `remote` module has the following methods: |
| 203 | + |
| 204 | +### `remote.require(module)` |
| 205 | + |
| 206 | +* `module` String |
| 207 | + |
| 208 | +Returns `any` - The object returned by `require(module)` in the main process. |
| 209 | +Modules specified by their relative path will resolve relative to the entrypoint |
| 210 | +of the main process. |
| 211 | + |
| 212 | +e.g. |
| 213 | + |
| 214 | +```sh |
| 215 | +project/ |
| 216 | +├── main |
| 217 | +│ ├── foo.js |
| 218 | +│ └── index.js |
| 219 | +├── package.json |
| 220 | +└── renderer |
| 221 | + └── index.js |
| 222 | +``` |
| 223 | + |
| 224 | +```js |
| 225 | +// main process: main/index.js |
| 226 | +const { app } = require('@electron/remote') |
| 227 | +app.whenReady().then(() => { /* ... */ }) |
| 228 | +``` |
| 229 | + |
| 230 | +```js |
| 231 | +// some relative module: main/foo.js |
| 232 | +module.exports = 'bar' |
| 233 | +``` |
| 234 | + |
| 235 | +```js |
| 236 | +// renderer process: renderer/index.js |
| 237 | +const foo = require('@electron/remote').require('./foo') // bar |
| 238 | +``` |
| 239 | + |
| 240 | +### `remote.getCurrentWindow()` |
| 241 | + |
| 242 | +Returns `BrowserWindow` - The window to which this web page belongs. |
| 243 | + |
| 244 | +**Note:** Do not use `removeAllListeners` on `BrowserWindow`. Use of this can |
| 245 | +remove all [`blur`](https://developer.mozilla.org/en-US/docs/Web/Events/blur) |
| 246 | +listeners, disable click events on touch bar buttons, and other unintended |
| 247 | +consequences. |
| 248 | + |
| 249 | +### `remote.getCurrentWebContents()` |
| 250 | + |
| 251 | +Returns `WebContents` - The web contents of this web page. |
| 252 | + |
| 253 | +### `remote.getGlobal(name)` |
| 254 | + |
| 255 | +* `name` String |
| 256 | + |
| 257 | +Returns `any` - The global variable of `name` (e.g. `global[name]`) in the main |
| 258 | +process. |
| 259 | + |
| 260 | +## Properties |
| 261 | + |
| 262 | +### `remote.process` _Readonly_ |
| 263 | + |
| 264 | +A `NodeJS.Process` object. The `process` object in the main process. This is the same as |
| 265 | +`remote.getGlobal('process')` but is cached. |
| 266 | + |
| 267 | +# Overriding exposed objects |
| 268 | + |
| 269 | +Without filtering, `@electron/remote` will provide access to any JavaScript |
| 270 | +object that any renderer requests. In order to control what can be accessed, |
| 271 | +`@electron/remote` provides an opportunity to the app to return a custom result |
| 272 | +for any of `getGlobal`, `require`, `getCurrentWindow`, `getCurrentWebContents`, |
| 273 | +or any of the builtin module properties. |
| 274 | + |
| 275 | +The following events will be emitted first on the `app` Electron module, and |
| 276 | +then on the specific `WebContents` which requested the object. When emitted on |
| 277 | +the `app` module, the first parameter after the `Event` object will be the |
| 278 | +`WebContents` which originated the request. If any handler calls |
| 279 | +`preventDefault`, the request will be denied. If a `returnValue` parameter is |
| 280 | +set on the result, then that value will be returned to the renderer instead of |
| 281 | +the default. |
| 282 | + |
| 283 | +## Events |
| 284 | + |
| 285 | +### Event: 'remote-require' |
| 286 | + |
| 287 | +Returns: |
| 288 | + |
| 289 | +* `event` Event |
| 290 | +* `moduleName` String |
| 291 | + |
| 292 | +Emitted when `remote.require()` is called in the renderer process of `webContents`. |
| 293 | +Calling `event.preventDefault()` will prevent the module from being returned. |
| 294 | +Custom value can be returned by setting `event.returnValue`. |
| 295 | + |
| 296 | +### Event: 'remote-get-global' |
| 297 | + |
| 298 | +Returns: |
| 299 | + |
| 300 | +* `event` Event |
| 301 | +* `globalName` String |
| 302 | + |
| 303 | +Emitted when `remote.getGlobal()` is called in the renderer process of `webContents`. |
| 304 | +Calling `event.preventDefault()` will prevent the global from being returned. |
| 305 | +Custom value can be returned by setting `event.returnValue`. |
| 306 | + |
| 307 | +### Event: 'remote-get-builtin' |
| 308 | + |
| 309 | +Returns: |
| 310 | + |
| 311 | +* `event` Event |
| 312 | +* `moduleName` String |
| 313 | + |
| 314 | +Emitted when `remote.getBuiltin()` is called in the renderer process of |
| 315 | +`webContents`, including when a builtin module is accessed as a property (e.g. |
| 316 | +`require("@electron/remote").BrowserWindow`). |
| 317 | +Calling `event.preventDefault()` will prevent the module from being returned. |
| 318 | +Custom value can be returned by setting `event.returnValue`. |
| 319 | + |
| 320 | +### Event: 'remote-get-current-window' |
| 321 | + |
| 322 | +Returns: |
| 323 | + |
| 324 | +* `event` Event |
| 325 | + |
| 326 | +Emitted when `remote.getCurrentWindow()` is called in the renderer process of `webContents`. |
| 327 | +Calling `event.preventDefault()` will prevent the object from being returned. |
| 328 | +Custom value can be returned by setting `event.returnValue`. |
| 329 | + |
| 330 | +### Event: 'remote-get-current-web-contents' |
| 331 | + |
| 332 | +Returns: |
| 333 | + |
| 334 | +* `event` Event |
| 335 | + |
| 336 | +Emitted when `remote.getCurrentWebContents()` is called in the renderer process of `webContents`. |
| 337 | +Calling `event.preventDefault()` will prevent the object from being returned. |
| 338 | +Custom value can be returned by setting `event.returnValue`. |
| 339 | + |
| 340 | +[rmi]: https://en.wikipedia.org/wiki/Java_remote_method_invocation |
| 341 | +[enumerable-properties]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties |
| 342 | +[remote-considered-harmful]: https://medium.com/@nornagon/electrons-remote-module-considered-harmful-70d69500f31 |
0 commit comments