This beginner-friendly tutorial provides a step-by-step guide on creating a browser that always remains on top of the screen using Electron.js, an open-source framework for building cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript.
Chapters:
0:00 - introduction
0:25 - prerequisites
0:35 - check to see if node.js is installed
1:40 - check to see if npm is installed
2:05 - create application with Electron Forge with Vite Plugin
3:28 - Make sure window always stays on top [setAlwaysInTop]
4:05 - remove toolbar/menu bar [autoHideMenuBar]
5:19 - start creating UI
16:11 - enable webview tag, and add it to HTML file
17:28 - start adding interactivity with Javascript in Renderer.js
22:31 - show webpage associated with inputted URL [webview.src]
25:30 - format URL
27:38 - add functionality to search button
29:15 - get URL input field to change on navigation [addEventListener(“did-navigate”)]
30:58 - add functionality to back, forward and reload button using webview methods.
32:52 - add functionality to add window button
33:24 - contextBridge and ipcRenderer in preload.js
35:07 - ipcmain [ipcMain.on(“new-window”, createWindow)
35:50 - hide dev-tools
36:20 - get new windows to open to Google.com
37:48 - set custom icon
40:05 - edit forge.config.js
41:18 - package application with squirrel[npm run make]
42:02 - installing app
42:19 - testing final application
#Electron #JS #javascript #HTML #CSS
1 июн 2024
