Draggable window in electron

src/main/node/app.js

@@ -10,6 +10,7 @@ function createWindow() {
         height: height,
         transparent: true,
         frame: false,
+        backgroundColor: '#00000000',
         alwaysOnTop: false,
         webPreferences: {
             backgroundThrottling: false
@@ -17,6 +18,57 @@ function createWindow() {
     });
 
     win.loadURL(url);
+
+    win.webContents.on('did-finish-load', () => {
+        win.webContents.insertCSS(`
+            html, body {
+                -webkit-app-region: drag;
+                user-select: none;
+            }
+
+            a, button, input, select, textarea, option, [role="button"], [role="textbox"] {
+                -webkit-app-region: no-drag;
+                user-select: auto;
+            }
+        `);
+
+        win.webContents.executeJavaScript(`(() => {
+            const overlayId = 'imgfloat-drag-overlay';
+            if (!document.getElementById(overlayId)) {
+                const overlay = document.createElement('div');
+                overlay.id = overlayId;
+                Object.assign(overlay.style, {
+                    position: 'fixed',
+                    inset: '0',
+                    background: 'rgba(0, 0, 0, 0)',
+                    transition: 'background 120ms ease',
+                    pointerEvents: 'none',
+                    zIndex: '2147483647',
+                    webkitAppRegion: 'drag'
+                });
+                document.documentElement.appendChild(overlay);
+            }
+
+            const overlay = document.getElementById(overlayId);
+            let timeout;
+
+            window.__imgfloatShowDragOverlay = () => {
+                if (!overlay) {
+                    return;
+                }
+
+                overlay.style.background = 'rgba(0, 0, 0, 0.35)';
+                clearTimeout(timeout);
+                timeout = setTimeout(() => {
+                    overlay.style.background = 'rgba(0, 0, 0, 0)';
+                }, 150);
+            };
+        })();`);
+    });
+
+    win.on('move', () => {
+        win.webContents.executeJavaScript('window.__imgfloatShowDragOverlay && window.__imgfloatShowDragOverlay();');
+    });
 }
 
 app.whenReady().then(() => {

src/main/node/package.json

@@ -1,13 +1,8 @@
 {
   "name": "imgfloat-electron",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Electron wrapper for the Imgfloat overlay",
   "main": "app.js",
-  "scripts": {
-    "dist:linux": "electron-builder --linux AppImage",
-    "dist:win": "electron-builder --win nsis",
-    "dist:mac": "electron-builder --mac"
-  },
   "build": {
     "appId": "dev.kruhlmann.imgfloat.overlay",
     "productName": "Imgfloat",