Renderer process modules in Electron API
Renderer process modules include: contextBridge, ipcRenderer, and webFrame.
api/renderer-process
19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
jQuery/RequireJS/Meteor/AngularJS incompatibility with Electron
Due to Node.js integration in Electron, extra symbols are inserted into the DOM like module, exports, and require. This causes problems for libraries that want to insert symbols with the same names. To solve this, turn off node integration by setting nodeIntegration: false in BrowserWindow webPreferences. Alternatively, rename the conflicting symbols before including other libraries by reassigning them to different names like window.nodeRequire = require and deleting window.require, window.exports, and window.module.
Rename Node.js symbols before including libraries
To use libraries like jQuery that conflict with Node.js symbols, rename the symbols before including the libraries: <head><script>window.nodeRequire = require;delete window.require;delete window.exports;delete window.module;</script><script type="text/javascript" src="jquery.js"></script></head>
Renderer process definition
The renderer process is a browser window in an Electron app. Unlike the main process, there can be multiple renderer processes and each is run in a separate process. They can also be hidden.
Webview tag for embedding guest content
Webview tags are used to embed guest content (such as external web pages) in an Electron app. They are similar to iframes but differ in that each webview runs in a separate process. A webview doesn't have the same permissions as the web page and all interactions between the app and embedded content are asynchronous. This keeps the app safe from the embedded content.
contextBridge exposeInMainWorld method signature
contextBridge.exposeInMainWorld(apiKey, api) exposes an API to the renderer from an isolated preload script. The apiKey parameter is a string that specifies the key to inject the API onto window with; the API will be accessible on window[apiKey]. The api parameter is the API object being exposed.
contextBridge exposeInIsolatedWorld method signature
contextBridge.exposeInIsolatedWorld(worldId, apiKey, api) exposes an API to a specific isolated world. The worldId is an integer; 0 is the default world, 999 is the world used by Electron's contextIsolation feature. Using 999 would expose the object for preload context. Recommendation is to use 1000+ when creating isolated worlds. The apiKey is a string for the window property key. The api is the API object being exposed.
contextBridge executeInMainWorld experimental method
contextBridge.executeInMainWorld(executionScript) is an experimental method that executes a function in the main world. The executionScript parameter is an object with func (a JavaScript function to execute; this function will be serialized so bound parameters and execution context will be lost) and optional args (an array of arguments to pass to the function; these arguments will be copied between worlds according to supported types). Returns a copy of the resulting value from executing the function in the main world.
ipcRenderer module is an EventEmitter
The ipcRenderer module is an EventEmitter that provides methods to send synchronous and asynchronous messages from the renderer process to the main process, and to receive replies from the main process.
ipcRenderer.on method signature
ipcRenderer.on(channel, listener) listens to channel; when a new message arrives, listener is called with listener(event, args...). Channel is a string, and listener is a Function that receives IpcRendererEvent and any number of additional arguments.
ipcRenderer.off method signature
ipcRenderer.off(channel, listener) removes the specified listener from the listener array for the specified channel. Channel is a string, and listener is a Function that receives IpcRendererEvent and any number of additional arguments.
ipcRenderer.once method signature
ipcRenderer.once(channel, listener) adds a one-time listener function for the event. The listener is invoked only the next time a message is sent to channel, after which it is removed. Channel is a string, and listener is a Function that receives IpcRendererEvent and any number of additional arguments.
ipcRenderer.addListener is alias for ipcRenderer.on
ipcRenderer.addListener(channel, listener) is an alias for ipcRenderer.on(channel, listener).
ipcRenderer.removeListener is alias for ipcRenderer.off
ipcRenderer.removeListener(channel, listener) is an alias for ipcRenderer.off(channel, listener).
ipcRenderer.removeAllListeners method signature
ipcRenderer.removeAllListeners([channel]) removes all listeners from the specified channel. If no channel is specified, removes all listeners from all channels. The channel parameter is optional and of type string.
ipcRenderer.sendToHost method signature
ipcRenderer.sendToHost(channel, ...args) sends a message to the webview element in the host page instead of the main process. Like ipcRenderer.send, it takes channel as a string and any number of additional arguments.
process.isMainFrame property
process.isMainFrame is a readonly boolean that is true when the current renderer context is the main renderer frame. To get the ID of the current frame, use webFrame.routingId.
process.contextId property
process.contextId is an optional readonly string representing a globally unique ID of the current JavaScript context. Each frame has its own JavaScript context. When contextIsolation is enabled, the isolated world also has a separate JavaScript context. This property is only available in the renderer process.
clipboard API access from renderer process deprecated
Using the clipboard API directly in the renderer process is deprecated as of electron/electron pull request 48877.