✨ Fade out on hover if clickthrough is active

childPreload.js

@@ -0,0 +1,11 @@
+const { ipcRenderer } = require("electron");
+
+window.addEventListener("DOMContentLoaded", () => {
+  document.body.style.transition = "opacity 0.2s ease-in";
+  ipcRenderer.on("mouseenter", () => {
+    document.body.style.opacity = 0.1;
+  });
+  ipcRenderer.on("mouseleave", () => {
+    document.body.style.opacity = 1;
+  });
+});

main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require("electron");
+const { app, BrowserWindow, screen } = require("electron");
 const path = require("path");
 
 const createWindow = () => {
@@ -7,7 +7,6 @@ const createWindow = () => {
     height: 640,
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
-      webgl: true,
     },
     frame: true,
     resizable: false,
@@ -33,26 +32,58 @@ const createWindow = () => {
         autoHideMenuBar: true,
         maximizable: website.frame,
         fullscreenable: website.frame,
+        webPreferences: {
+          preload: path.join(__dirname, "childPreload.js"),
+        },
       },
     };
   });
 
+  const windowOptions = {};
+
   win.webContents.on("did-create-window", (childWindow, props) => {
     const website = JSON.parse(decodeURIComponent(props.options.website));
     if (website.clickThrough) {
-      childWindow.setIgnoreMouseEvents(true, { forward: true });
+      childWindow.setIgnoreMouseEvents(true);
 
       childWindow.on("focus", () => {
         childWindow.setIgnoreMouseEvents(false);
       });
 
       childWindow.on("blur", () => {
-        childWindow.setIgnoreMouseEvents(true, { forward: true });
+        childWindow.setIgnoreMouseEvents(true);
       });
     }
+    windowOptions[childWindow.id] = website;
   });
-};
 
+  let prevMousePos = screen.getCursorScreenPoint();
+  setInterval(() => {
+    const mousePos = screen.getCursorScreenPoint();
+    if (mousePos.x === prevMousePos.x && mousePos.y === prevMousePos.y) {
+      return;
+    }
+    prevMousePos = mousePos;
+    const allWindows = BrowserWindow.getAllWindows();
+    const clickThroughWindows = allWindows.filter(
+      (singleWindow) => windowOptions[singleWindow.id]?.clickThrough
+    );
+    clickThroughWindows.forEach((singleWindow) => {
+      const bounds = singleWindow.getBounds();
+      const xInBounds =
+        mousePos.x <= bounds.x + bounds.width && mousePos.x >= bounds.x;
+      const yInBounds =
+        mousePos.y <= bounds.y + bounds.height && mousePos.y >= bounds.y;
+      const inBounds = xInBounds && yInBounds;
+      if (inBounds && !singleWindow.inBounds) {
+        singleWindow.webContents.send("mouseenter");
+      } else if (!inBounds && singleWindow.inBounds) {
+        singleWindow.webContents.send("mouseleave");
+      }
+      singleWindow.inBounds = inBounds;
+    });
+  }, 10);
+};
 app.whenReady().then(() => {
   createWindow();
 

preload.js

@@ -1,7 +1,6 @@
 const { createFormModalElement } = require("./lib/formModalElement");
 const { getWebsites, addWebsite } = require("./lib/storage");
 const { createWebsiteElement } = require("./lib/websiteElement");
-const { remote } = require("electron");
 
 window.addEventListener("DOMContentLoaded", () => {
   const websitesElement = document.querySelector(".websites");