The Context Bridge class in electronjs
In order to create some kind of example that exercises the use of the context bridge as well as the various other classes in electron.js that are closely related to the use of the context bridge class I will need to have some kind of basic project idea. The main class that I have come to find that I need to use with the contextBride class is to also use the ipcRenderer class, this is what I will want to use to define what to do when I make calls of the send method of the webContext object in main.js. Speaking of the main.js file there are also a wide range of other classes that I am going to want to use there also such as the dialog class which is what I need to use in order to create native dialog windows for opening and saving a file.
What to know first before reading more on the context Bridge
The full source code for this example is on Github
The full source code of this example can be found in my examples electronjs repository on Github. This is also where I am going to be parking the source code for all my other electronjs examples that I will be writing about in many of not all of these posts moving forward.
1 - The contextBridge class, and the preload.js file
The content bridge class is what I am going to want to use when making a preload.js file for an over all electron application, that is unless for some reason I choose to go with an alternative such as node integration. Depending on what I am doing when it comes to an over all project, in some cases I might just need to require in the context bridge class and that is it, however typically I am going to want to also require in the ipcRenderer class also which is another class that I should write a post or two on at some point as I keep working out some simple examples of electron.
On top of the electron modules that I am using I am also using one built in nodejs module which is of course the file system module. There are a lot of methods to use in this module for reading and writing files, but for this simple example of the context bride I just went with the easy to use fs.readFile, and fs.writeFile methods. That I am using in my save text and on menu open file methods.
2 - The main.js file
So one new class that I starting working with in this example is the dialog class that can be used to create native menus for getting a file, or saving a file. For my open file menu option I am using the Show Open Dialog method, and for my save as option in the file menu I am using the Show Save Dialog method. These methods return promises so I call them, then call the then method off of the promise object, and pass a function that I want to call when the action is complete. There is also doing something for the catch call of the promise object that I should do at some point, if not now when it comes to handle ding anything that might go wrong with this.
Another major thing that I learned that was new for me at this point is how to emit events from the main process to the render process, and it would seem that one way to do so would be to call the send method of the web contents object of the browser window. For the open and save as options in the file menu of my menu I am using the send method to emit and event to which I have append handers in the preload.js file my way of the ipcRenderer class.
3 - Now the client system
Now that I have a custom API to use in a client side system that is created using the contextBride class, and my main.js file that calls the send method for various events for opening and saving a file, I will now want to have a client system that works with all of this. For this simple contextBride example I wanted to keep the client system fairly simple, so it just consists of a single client.js file, a single html file, and I have went with an external css file as well.
3.1 - client.js file
I can potentially add additional features that would also call the save text method when it comes to making a real text editor project when it comes to things like a save option rather than juts save as, as well as other actions that would case a save such as a keyboard shortcut.
3.2 - style.css
I have just a little external css for this example, nothing fancy with this I just wanted to pull it out of the html file.
3.3 - The main window html file
In the body of the html file I have a single main wrap div, and then the text area element that will contain the loaded text of a file, or can be used to create and save a new text file. I then have just one script tag in which I am linking to my front end code that makes use of the API that I defined in peload.js
4 - Conclusion
The general idea that I had in mind when making this example is set and done all ready at this point. All I wanted to do is have a basic example of the contextBrige class and how to use it to create a custom API in which I am not exposing everything to the front end system which is often the case with alternatives to that of the contextBride class when. A simple text editor type program just strikes me as a good idea when it comes to getting started with this sort of thing, also it is a good starting point for a wide range of additional applications some of which I might actually want to use to get work done.
With that said when it comes to any future revisions of this that I might get to at one point or another I am not sure that I would want to go nuts with features. What I wanted this example to be was just a simple starting point not a read project. I have a few prototypes in mind that I might base this off of though, and when I get to making them I will be sure to write a post on them as I usually do. So any fure revisions might have more to do with just improving what this all ready is, rather than adding features.