In the previous tutorial we added navigation capabilities to our Electron Web Browser. If you missed that tutorial, you can read it here.
In this tutorial, we are going to add bookmark function to our Electron Web Browser. Open the electronbrowser.js file and go to "//Initializing the components" and add these variables below;
Then click below comment "//Add a bookmark" and add the following code. In this code we collect the URL, title and the favicon of the web page we are going to bookmark and then save it to a JSON array in the JSON file called "bookmarks.json" (which is already located in the Starter folder). If you open it, you can see there three bookmarks already stored as an example.
And then go to "//Event Listeners" and add the following code below.
Now we need to see the bookmarks we stored and visit them. For that we are going to create a HTML page with a HTML table which will show the bookmarks we've stored. That means we are going to populate the HTML table with JSON data.
First create a HTML file in the "Starter" folder and name it "bookmarks.html" and insert this code in to that file;
Then create a JavaScript file named "loadbookmarks.js" in the "Starter" folder and insert the following code;
Again go back to electronbrowser.js file and click under the comment "//Go to Bookmarks page" to add the following code;
And don't forget to add this code in the "//Event Listeners" section;
Now you can run the application and navigate to a web page, and bookmark it. To view your stored bookmarks click the "More" icon at the top right corner of the browser to find "Bookmarks" menu item and click on it. You will be directed to the "bookmarks.html" page displaying the stored bookmarks.
