Electron is pretty cool. The way i use it lately is rather for building small and simple tools. I need my ui to be also small and smart.
Methods below are mostly copied from official electoron documentation, but it is worth to remeber that you can do stuff like this.

Click-through window

To create a click-through window, i.e. making the window ignore all mouse events, you can call the win.setIgnoreMouseEvents(ignore) API:

const { BrowserWindow } = require("electron");
let win = new BrowserWindow();


Ignoring mouse messages makes the web page oblivious to mouse movement, meaning that mouse movement events will not be emitted. On Windows operating systems an optional parameter can be used to forward mouse move messages to the web page, allowing events such as mouseleave to be emitted:

let win = require("electron").remote.getCurrentWindow();
let el = document.getElementById("clickThroughElement");
el.addEventListener("mouseenter", () => {
win.setIgnoreMouseEvents(true, { forward: true });
el.addEventListener("mouseleave", () => {

This makes the web page click-through when over el, and returns to normal outside it.

Transparent window

By setting the transparent option to true, you can also make the frameless window transparent:

const { BrowserWindow } = require("electron");
let win = new BrowserWindow({ transparent: true, frame: false });

Be aware though that this way you have no UI to move or minimize / maximize your window anymore. This is why you have to use below methods to make window usable again.

Draggable region

By default, the frameless window is non-draggable. Apps need to specify -webkit-app-region: drag in CSS to tell Electron which regions are draggable (like the OS's standard title bar), and apps can also use -webkit-app-region: no-drag to exclude the non-draggable area from the draggable region. Note that only rectangular shapes are currently supported.

Note: -webkit-app-region: drag is known to have problems while the developer tools are open. See this GitHub issue for more information including a workaround.

To make the whole window draggable, you can add -webkit-app-region: drag as body's style:

<body style="-webkit-app-region: drag">

And note that if you have made the whole window draggable, you must also mark buttons as non-draggable, otherwise it would be impossible for users to click on them:

button {
-webkit-app-region: no-drag;

If you're setting just a custom title bar as draggable, you also need to make all buttons in title bar non-draggable.

Text selection

In a frameless window the dragging behavior may conflict with selecting text. For example, when you drag the title bar you may accidentally select the text on the title bar. To prevent this, you need to disable text selection within a draggable area like this:

.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;

Sometimes you need to expose additional port on running container without rebuilding it from image.

Here are steps which worked for me:

  1. stop the container
  2. stop docker service (can skip - restart later is enough)
  3. change the files
"Config": {
"ExposedPorts": {
"80/tcp": {},
"8888/tcp": {}
"NetworkSettings": {
"Ports": {
"80/tcp": [
"HostIp": "",
"HostPort": "80"
"PortBindings": {
"80/tcp": [
"HostIp": "",
"HostPort": "80"
"8888/tcp": [
"HostIp": "",
"HostPort": "8888"

restart your docker engine (to flush/clear config caches)

systemctl restart docker	
  1. start the container

It is rather test post then anything else :)

CreateElement, Create Element

var btn = document.createElement("BUTTON"); // Create a <button> element
btn.innerHTML = "CLICK ME"; // Insert text


new Promise((resolve, reject) => { ... });
new Promise(function (resolve, reject) { ... });

Es6 class sample

1: Creating a new class (declaration-form)

"use strict";

// A base class is defined using the new reserved 'class' keyword
class Polygon {
// ..and an (optional) custom class constructor. If one is
// not supplied, a default constructor is used instead:
// constructor() { }
constructor(height, width) {
this.name = "Polygon";
this.height = height;
this.width = width;

// Simple class instance methods using short-hand method
// declaration
sayName() {
ChromeSamples.log("Hi, I am a ", this.name + ".");

sayHistory() {
'"Polygon" is derived from the Greek polus (many) ' + "and gonia (angle)."

// We will look at static and subclassed methods shortly

// Classes are used just like ES5 constructor functions:
let p = new Polygon(300, 400);
ChromeSamples.log("The width of this polygon is " + p.width);

Example 2: Creating a new class (expression-form)

// Our Polygon class above is an example of a Class declaration.
// ES6 classes also support Class expressions - just another way
// of defining a new class. For example:
const MyPoly = class Poly {
getPolyName() {
"Hi. I was created with a Class expression. My name is " + Poly.name

let inst = new MyPoly();

3: Extending an existing class

// Classes support extending other classes, but can also extend
// other objects. Whatever you extend must be a constructor.
// Let's extend the Polygon class to create a new derived class
// called Square.
class Square extends Polygon {
constructor(length) {
// The reserved 'super' keyword is for making super-constructor
// calls and allows access to parent methods.
// Here, it will call the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = "Square";

// Getter/setter methods are supported in classes,
// similar to their ES5 equivalents
get area() {
return this.height * this.width;

set area(value) {
this.area = value;

let s = new Square(5);

ChromeSamples.log("The area of this square is " + s.area);

4: Subclassing methods of a parent class

class Rectangle extends Polygon {
constructor(height, width) {
super(height, width);
this.name = "Rectangle";
// Here, sayName() is a subclassed method which
// overrides their superclass method of the same name.
sayName() {
ChromeSamples.log("Sup! My name is ", this.name + ".");

let r = new Rectangle(50, 60);

5: Defining static methods

// Classes support static members which can be accessed without an
// instance being present.
class Triple {
// Using the 'static' keyword creates a method which is associated
// with a class, but not with an instance of the class.
static triple(n) {
n = n || 1;
return n * 3;

// super.prop in this example is used for accessing super-properties from
// a parent class. This works fine in static methods too:
class BiggerTriple extends Triple {
static triple(n) {
return super.triple(n) * super.triple(n);

// var tp = new Triple();
// ChromeSamples.log(tp.triple()); tp.triple is not a function

6: Subclassing built-in classes and DOM

// Extend Date built-in
class MyDate extends Date {
constructor() {

getFormattedDate() {
var months = [
return (
this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear()

var aDate = new MyDate();

// Extend Uint8Array
class ExtendedUint8Array extends Uint8Array {
constructor() {
this[0] = 255;
this[1] = 0xffa;

var eua = new ExtendedUint8Array();

// Extend DOM Audio element
class MyAudio extends Audio {
constructor() {
this._lyrics = "";

get lyrics() {
return this._lyrics;

set lyrics(str) {
this._lyrics = str;

var player = new MyAudio();
player.controls = true;
player.lyrics = "Never gonna give you up";

// Note: The V8 in Chrome 42 supports subclassing built-ins but Arrays.
// Subclassing arrays supported in Chrome 43.

class Stack extends Array {
constructor() {

top() {
return this[this.length - 1];

var stack = new Stack();