Questions tagged [electron]

Electron (formerly Atom Shell) is a framework created by GitHub that lets you write cross-platform desktop applications using HTML, CSS and JavaScript. Electron is based upon Node.js and Chromium.

Electron (formerly Atom Shell) project was originally started by Cheng Zhao, one of the authors of NW.js (formerly known as node-WebKit), another Node.js-based platform for building desktop applications using HTML, CSS, and JavaScript. Cheng Zhao was hired by GitHub and began work on the framework on or about April 11th, 2013. On the 17th of April, 2015, with the release of version 0.24 the framework was renamed from Atom Shell to Electron.

One of the differences between Electron and NW.js frameworks is that the entry point for the app is actual JavaScript instead of an HTML page. This makes Electron more suitable for testing with PhantomJS, for instance.

Another difference is that the build process is also simpler for Electron using electron-builder, electron-forge and electron-packager. Since Electron uses libchromiumcontent to access Chromium's Content API, it's no longer required to obtain a copy of the Chromium source code. On that same note, the integration with Chromium is much more loosely coupled than in case of NW.js (which requires Chromium to be patched and maintained separately by the NW.js developers).

Probably, the most popular application built on top of Electron is a hackable text editor called Atom (also from GitHub). But there are some other interesting projects like Vivaldi Web browser, Mapbox Studio, an email client from Nylas, Slack desktop application, Pixate, Fireball game editor, Visual Studio Code, an SQL editor called Wagon, Mac app that runs Docker containers called Kitematic.


Resources :

15116 questions
29
votes
9 answers

Support optional chaining in vuejs

I have created vue and electron app using @vue/cli-service 4.2 in that I am facing a issue of optional chaining. I can't use ? for validating the condition like (@babel/plugin-proposal-optional-chaining) eg. a?.b?.c its means it check weather a…
Hardik Kothari
  • 1,686
  • 1
  • 15
  • 29
29
votes
4 answers

Send sync message from IpcMain to IpcRenderer - Electron

In electron, It is possible to send sync message from IpcRenderer to IpcMain via ipcRenderer.sendSync('synchronous-message', 'ping'). Also possible to send async message from IpcMain to IpcRenderer using window.webContents.send('ping',…
GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
29
votes
7 answers

Prompt to save / quit before closing window

I am making a writing application. Users can open the app, write some text, save their work, etc. I am trying to make it so that clicking the window close button will prompt the user to (a) save their work (if necessary) or (b) just quit. I am…
Tees
  • 341
  • 1
  • 4
  • 8
29
votes
5 answers

How can I get the path that the application is running with typescript?

I am trying to create a desktop application with electron, angular2, typescript and neDB.In order to be able create a 'file' database with neDB I want the path to my project.How can I get this with typescript ?
geo
  • 2,283
  • 5
  • 28
  • 46
28
votes
2 answers

NPM run * doesn't do anything

I was running an Electron project, and everything worked just fine. But now when I run any of the scripts in my package.json (including npm start), it just escapes a line and doesn't do anything. My package.json: { "name": "interclip-desktop", …
Filip Troníček
  • 434
  • 1
  • 5
  • 14
28
votes
5 answers

Define CSP HTTP Header in Electron App

Following the API documentation, I don't understand how to define a Content-Security-Policy HTTP Header for the renderer of my Electron application. I always get a warning in the DevTools. I tried: 1) Copy/Paste the code in the API Doc,…
Anozer
  • 421
  • 1
  • 4
  • 12
28
votes
2 answers

Why does Electron need to be saved as a developer dependency?

As per the official website, the correct way to save electron files is: npm install electron --save-dev Electron is actually required for running the app (quite literally: require()) and this goes against the top voted answer here. So why do we…
Prithvish Baidya
  • 639
  • 1
  • 8
  • 19
28
votes
6 answers

Printing a PDF file with Electron JS

I am trying to create an Electron JS app that has the purpose to print letter size PDFs. This is my snippet of code for printing: win = new BrowserWindow({ width: 378, height: 566, show: true, webPreferences: { webSecurity: false, …
Grig Dodon
  • 313
  • 1
  • 3
  • 8
28
votes
2 answers

Open app and pass parameters with deep linking using Electron (macOS)

I want to open app and pass parameters with deep linking using Electron (macOS). Project 'electron-deep-linking-mac-win' is on GitHub. Edited package.json, following ‘electron-builder’ quick-setup-guide to produce mac installer: { "name":…
28
votes
5 answers

How to close electron app via javascript?

I am running an express app via electron. Below is the main.js const electron = require("electron"), app = electron.app, BrowserWindow = electron.BrowserWindow; let mainWindow; function createWindow () { …
code_legend
  • 3,547
  • 15
  • 51
  • 95
28
votes
2 answers

Replace 'Prompt' in on Electron

How to replace the function of javascript prompt in electron? Can someone give me an example? I tried to use the function prompt, but got an error: Uncaught Error: prompt() is and will not be supported.
Thales
  • 545
  • 1
  • 6
  • 17
28
votes
2 answers

How to make Electron tray click events working reliably?

In my OSX Electron app I have a tray icon that I would like to toggle between opening and closing the Electron app window. Similar to how clicking on the OSX Dropbox tray icon will open and close the Dropbox tray menu, no matter how fast you click…
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
28
votes
3 answers

How to customize the window title bar of an Electron app?

I'm getting started working with Electron to build a desktop app. How can I customize the window title bar (which contains the close, minimize, and full screen buttons) to add custom views? Safari is an example that I am thinking of:
Andrew
  • 227,796
  • 193
  • 515
  • 708
27
votes
2 answers

Karma unit testing error: Unexpected value imported by the module. Please add a @NgModule annotation

I've created a fresh new component via: ng g mytest1 Then I changed the constructor line to this: constructor(private dialogRef: MatDialogRef) { } , and added the required import: import { MatDialogRef } from…
MrProgrammer
  • 589
  • 1
  • 7
  • 17
27
votes
3 answers

How to display version of Electron environment in an Electron app?

I would like to find out which version of Electron an Electron desktop app like Signal Desktop or Visual Studio Code is using. Is there a simple way - like entering a command in the Development Console? Thanks! Johannes (Why? I would like to see if…
Johannes S.
  • 321
  • 1
  • 3
  • 3