2016-01-05 11:52:57 +00:00
# Electron FAQ
2017-07-18 20:23:03 +00:00
## Why am I having trouble installing Electron?
2017-11-20 06:18:24 +00:00
When running `npm install electron` , some users occasionally encounter
2017-07-18 20:23:03 +00:00
installation errors.
2017-11-20 06:18:24 +00:00
In almost all cases, these errors are the result of network problems and not
actual issues with the `electron` npm package. Errors like `ELIFECYCLE` ,
`EAI_AGAIN` , `ECONNRESET` , and `ETIMEDOUT` are all indications of such
2017-11-29 10:58:24 +00:00
network problems. The best resolution is to try switching networks, or
2018-05-08 05:16:09 +00:00
wait a bit and try installing again.
2017-07-18 20:23:03 +00:00
2017-11-20 06:18:24 +00:00
You can also attempt to download Electron directly from
[electron/electron/releases ](https://github.com/electron/electron/releases )
2017-07-18 20:23:03 +00:00
if installing via `npm` is failing.
2016-01-05 11:52:57 +00:00
## When will Electron upgrade to latest Chrome?
The Chrome version of Electron is usually bumped within one or two weeks after
2016-05-06 10:23:18 +00:00
a new stable Chrome version gets released. This estimate is not guaranteed and
depends on the amount of work involved with upgrading.
2016-01-05 11:52:57 +00:00
2016-05-06 10:23:18 +00:00
Only the stable channel of Chrome is used. If an important fix is in beta or dev
2016-01-05 11:52:57 +00:00
channel, we will back-port it.
2016-07-17 01:22:53 +00:00
For more information, please see the [security introduction ](tutorial/security.md ).
2016-05-06 10:23:18 +00:00
2016-01-05 11:52:57 +00:00
## When will Electron upgrade to latest Node.js?
When a new version of Node.js gets released, we usually wait for about a month
before upgrading the one in Electron. So we can avoid getting affected by bugs
introduced in new Node.js versions, which happens very often.
New features of Node.js are usually brought by V8 upgrades, since Electron is
using the V8 shipped by Chrome browser, the shiny new JavaScript feature of a
new Node.js version is usually already in Electron.
2016-02-16 03:52:47 +00:00
## How to share data between web pages?
To share data between web pages (the renderer processes) the simplest way is to
use HTML5 APIs which are already available in browsers. Good candidates are
[Storage API][storage], [`localStorage`][local-storage],
[`sessionStorage`][session-storage], and [IndexedDB][indexed-db].
2020-08-04 19:08:44 +00:00
Alternatively, you can use the IPC primitives that are provided by Electron. To
share data between the main and renderer processes, you can use the
[`ipcMain` ](api/ipc-main.md ) and [`ipcRenderer` ](api/ipc-renderer.md ) modules.
To communicate directly between web pages, you can send a
[`MessagePort`][message-port] from one to the other, possibly via the main process
using [`ipcRenderer.postMessage()` ](api/ipc-renderer.md#ipcrendererpostmessagechannel-message-transfer ).
Subsequent communication over message ports is direct and does not detour through
the main process.
2016-02-06 18:57:21 +00:00
2020-01-30 22:15:35 +00:00
## My app's tray disappeared after a few minutes.
2016-01-05 11:52:57 +00:00
2020-01-30 22:15:35 +00:00
This happens when the variable which is used to store the tray gets
2016-01-05 11:52:57 +00:00
garbage collected.
2016-03-16 16:37:04 +00:00
If you encounter this problem, the following articles may prove helpful:
2016-01-05 11:52:57 +00:00
* [Memory Management][memory-management]
* [Variable Scope][variable-scope]
If you want a quick fix, you can make the variables global by changing your
code from this:
```javascript
2018-09-13 16:10:51 +00:00
const { app, Tray } = require('electron')
2020-02-03 22:43:22 +00:00
app.whenReady().then(() => {
2016-07-26 01:39:25 +00:00
const tray = new Tray('/path/to/icon.png')
tray.setTitle('hello world')
})
2016-01-05 11:52:57 +00:00
```
to this:
```javascript
2018-09-13 16:10:51 +00:00
const { app, Tray } = require('electron')
2016-07-26 01:39:25 +00:00
let tray = null
2020-02-03 22:43:22 +00:00
app.whenReady().then(() => {
2016-07-26 01:39:25 +00:00
tray = new Tray('/path/to/icon.png')
tray.setTitle('hello world')
})
2016-01-05 11:52:57 +00:00
```
## I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
Due to the Node.js integration of Electron, there are some extra symbols
2016-04-22 13:53:26 +00:00
inserted into the DOM like `module` , `exports` , `require` . This causes problems
for some libraries since they want to insert the symbols with the same names.
2016-01-05 11:52:57 +00:00
To solve this, you can turn off node integration in Electron:
```javascript
// In the main process.
2018-09-13 16:10:51 +00:00
const { BrowserWindow } = require('electron')
2020-07-09 17:18:49 +00:00
const win = new BrowserWindow({
2016-01-05 11:52:57 +00:00
webPreferences: {
nodeIntegration: false
}
2016-07-26 01:39:25 +00:00
})
win.show()
2016-01-05 11:52:57 +00:00
```
But if you want to keep the abilities of using Node.js and Electron APIs, you
have to rename the symbols in the page before including other libraries:
```html
< head >
< script >
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
< / script >
< script type = "text/javascript" src = "jquery.js" > < / script >
< / head >
```
2016-01-25 10:41:34 +00:00
## `require('electron').xxx` is undefined.
When using Electron's built-in module you might encounter an error like this:
2017-11-20 06:18:24 +00:00
```sh
2016-07-26 01:39:25 +00:00
> require('electron').webFrame.setZoomFactor(1.0)
2016-01-25 10:41:34 +00:00
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined
```
2020-04-13 21:32:29 +00:00
It is very likely you are using the module in the wrong process. For example
2016-01-26 09:00:12 +00:00
`electron.app` can only be used in the main process, while `electron.webFrame`
is only available in renderer processes.
2016-01-25 10:41:34 +00:00
2019-06-21 21:19:21 +00:00
## The font looks blurry, what is this and what can I do?
2019-05-07 19:49:09 +00:00
2020-11-02 09:58:14 +00:00
If [sub-pixel anti-aliasing ](https://alienryderflex.com/sub_pixel/ ) is deactivated, then fonts on LCD screens can look blurry. Example:
2019-05-07 19:49:09 +00:00
2022-09-12 23:09:12 +00:00
2019-05-07 19:49:09 +00:00
Sub-pixel anti-aliasing needs a non-transparent background of the layer containing the font glyphs. (See [this issue ](https://github.com/electron/electron/issues/6344#issuecomment-420371918 ) for more info).
To achieve this goal, set the background in the constructor for [BrowserWindow][browser-window]:
```javascript
const { BrowserWindow } = require('electron')
2020-07-09 17:18:49 +00:00
const win = new BrowserWindow({
2019-05-07 19:49:09 +00:00
backgroundColor: '#fff'
})
```
2019-06-21 21:19:21 +00:00
The effect is visible only on (some?) LCD screens. Even if you don't see a difference, some of your users may. It is best to always set the background this way, unless you have reasons not to do so.
2019-05-07 19:49:09 +00:00
Notice that just setting the background in the CSS does not have the desired effect.
2016-01-05 11:52:57 +00:00
[memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
[variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
2016-01-26 09:00:12 +00:00
[electron-module]: https://www.npmjs.com/package/electron
2016-02-16 03:52:47 +00:00
[storage]: https://developer.mozilla.org/en-US/docs/Web/API/Storage
[local-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
[session-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
[indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
2020-08-04 19:08:44 +00:00
[message-port]: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort
2019-05-07 19:49:09 +00:00
[browser-window]: api/browser-window.md
