What is Electron
Electron Webview is the component we use to build this web browser. Electron webview is similar to Chromium webview which can do rendering, navigation and even event routing.
If you are new to Electron, I strongly recommend you to read this Getting Started guide.
Start Building the Browser
Clone or download the project from GitHub.
You can see there are two folders in the project “Starter” and “Completed”. “Completed” folder contains the completed browser project while “Starter” folder contain the basic browser template where you can add code by yourself referring this tutorial. So you will be able to understand how the browser work and how to use Electron to build a cross platform desktop application.
Now go to “Starter” folder. You can see “index.html”, “main.js” and “package.json” files. You may know this files when you go through the Electron Getting Started guide.
Open command line and change your directory to “Starter” folder and run “npm install” to install the required dependencies. Then launch the app using ‘electron .‘ command, you can see the browser template which loads Google home page. All other buttons doesn’t work at the moment. From this point, we are going to add functions to these buttons to get the basic functionality of a web browser.
This browser project is influenced by this blog post and is continued to develop adding more features.