Learn Electron js by creating an Always On Top Browser

Ғылым және технология

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

Пікірлер: 25

  • @amazonrecommendations9933
    @amazonrecommendations99337 ай бұрын

    Golden level of content. Bring more like this. Thanks

  • @PikoCanFly

    @PikoCanFly

    7 ай бұрын

    Thank you!

  • @amazonrecommendations9933

    @amazonrecommendations9933

    7 ай бұрын

    @@PikoCanFly It's amazing to see the level of quality content in it and it is your first video. Truly unbelievable. I suggest you to make videos on that topics which normally not covered on KZread like some advanced topics these topics get low views but get you specific and targeted audience for your channel that belief on your content or try the path of some popular coding KZread channels like Josh tried coding or Theo t3gg and web dev cody. In these scenario you get more views but less targeted audience. But, if you create this type of channel then it might get viral fast because you are girl an there are almost very few tech and coding related channels girls running. Take this from me and tell me how's the advice and what's your plan for the future of the channel.

  • @PikoCanFly

    @PikoCanFly

    7 ай бұрын

    @@amazonrecommendations9933 Thank you for the kind words and your advice. Your advice sounds quite sound; Concerning my plans for the channel, I plan to keep creating quality content with original projects for the most part. However, we'll see, there is so much to try out and explore.

  • @kaiparado
    @kaiparado22 күн бұрын

    Nice project, thank you

  • @collinsk8754
    @collinsk87546 ай бұрын

    Great video 👏👏!

  • @seifghost8619
    @seifghost86194 ай бұрын

    video was absolutely fantastic! 🌟 Your creativity and dedication really shine through. Thank you for sharing such valuable content with us. I learned new things thanks to u, and I can't wait to see more from you in the future. Keep up the amazing work! 👏👍

  • @PikoCanFly

    @PikoCanFly

    4 ай бұрын

    Thank you so much for your kind words! They mean so much to me. I am very happy to know I was able to help in some way! Best regards!

  • @karskk9300
    @karskk93004 ай бұрын

    thank you so much i love you :)

  • @ishaansinghal2428
    @ishaansinghal24285 ай бұрын

    Amazing Tutorial literally amazing

  • @PikoCanFly

    @PikoCanFly

    5 ай бұрын

    Thanks a lot!

  • @viniciusacacio3147
    @viniciusacacio31474 ай бұрын

    amazing!!!

  • @sahil.lalani
    @sahil.lalani3 күн бұрын

    great video, learned a lot. is the code on github?

  • @clueloss5373
    @clueloss53734 ай бұрын

    hello could you create more electron js video? really liked this one and I am a beginner :)

  • @PikoCanFly

    @PikoCanFly

    4 ай бұрын

    Yes! I am planning on making an electron video soon.

  • @codery01
    @codery015 ай бұрын

    Good day! Nicely done ! Amazing. Just want to ask also if this will work if using react components and postgreSQL. thank you so much

  • @PikoCanFly

    @PikoCanFly

    4 ай бұрын

    Yes, it would work provided that you adjust the code accordingly. Good luck!

  • @codery01

    @codery01

    4 ай бұрын

    @@PikoCanFly are you gonna make a video or do you have already a tutorials for that? Thank you so much

  • @PikoCanFly

    @PikoCanFly

    4 ай бұрын

    @@codery01Honestly, since I mostly make tutorials based on personal projects and I have not had a project idea that justifies using Reactjs + postgreSQL + Electron yet. If you have a fun/useful project idea that would justify using Reactjs + PostgreSQL,+ Electron, I would consider creating it and turning it into a tutorial.

  • 6 ай бұрын

    Ładnie. Tylko proponuje zamiast słowa equals przy przypisaniu używać słowa set . Equals jest raczej zarezerwowane dla logicznych warunków. A poza tym szacunek, fajny naprawdę kawałek,

  • @PikoCanFly

    @PikoCanFly

    6 ай бұрын

    Dziękuję bardzo

  • @RahulShinde-xs9rl
    @RahulShinde-xs9rl7 ай бұрын

    Nice Tutorial ❤ . can you help me with my work how focus on same main window even if shortcut is clicked many times. If click shortcut it's opening multiple main windows as I click instead it should focus on main window.

  • @PikoCanFly

    @PikoCanFly

    7 ай бұрын

    No problem. If I understand correctly, the issue you are facing is that every time you click the shortcut, a new main window is being created instead of focusing on the existing one and you want to change this behavior so that when the shortcut is clicked multiple times, it doesn't create new main windows but rather focuses on the existing one; You can achieve this by checking whether the main window is already open and focus on it if it is, or create a new main window if it's not. Try adding this code to main.js: app.on('activate', () => { if (mainWindow === null) { createMainWindow(); } else { // If the main window exists, just focus on it mainWindow.focus(); } }); I hope that helps.

  • @purplegappleyt
    @purplegappleyt27 күн бұрын

    The video was great, But I got 1 question, how do I open the links that open in a new tab?

  • @PikoCanFly

    @PikoCanFly

    25 күн бұрын

    Hello, glad you enjoyed the video. If you want the option to open links in a new tab then you would have to code this functionality.

Келесі