A mini project to explore Electron
Over the past couple of days I’ve been exploring the world of Electron. Electron is a cross platform desktop app builder wrapped in a Chromium shell, allowing you to create a web app built natively for each different platform.
The reason why I decided to take a look into building an app this way was because I had a plan to build my own News app, similar to Apple News on the mac, which actually functioned well and was feature-rich instead of offering services and news articles that I have no interest in as the current app does. After researching into whether or not it would be possible to tap into an API and offer my own news and suggestions, I came to the conclusion that these API’s would be simply too expensive to get up and running, and too risky in case my app never ‘took off’. So I switched my attention to creating a wrapper application for my other favourite news source.
On iOS, my main news app is Google News, which attempts to collate different news sites into one story per topic. So for instance, if BBC News had a story along the lines of ‘Kid sells Jam business for £1 million,’ Google News will collate another story from a different news site, for instance The Guardian, which may have a headline of ‘50% share for boy who sells £1 million business’. Despite these two news headlines being vastly different, Google News will collate both and allow the user to read both article headlines and snippets together, giving them as much of a fair view on that given story as possible.
Despite the positives, the main negative of Google News is that there are no desktop apps to compete with Apple News on Mac or Microsoft News on Windows. This creates a kind of disconnect between their mobile apps which are really well maintained, and their desktop website which most people probably don’t know exist as it’s not advertised anywhere and can’t be installed on a users computer.
So to fix this issue, I decided to wrap the Google News website in an Electron app. I created a private repo on GitHub (since this is a rewrap, it is only for personal development and will not be released) and got to work figuring out where to start with Electron.
The entire process of creating your first web app with Electron is incredibly simple. I followed their getting started guide to start myself off, but the basics of it are to set up a folder where you want to create your app (for me it was inside my git repo folder), installed the electron package with Node Package Manager for Mac, and ran this basic starter app using the command: npm start.
After getting started, I moved the default URL onto Google News and got to work. My first step was to create a Menu for some of the things I wanted in the app: A link to get back to the main page, a share button to copy the URL of the web page you’re looking at, and an Exit button to be able to quit the app from the menu. After a bit of Googling, I got all of these features working relatively quickly.
My next step was to figure out how to get some basic level of extension support within the app. I found a dark theme for Google News that I especially wanted to include in my app as I always have dark mode on all my devices, so to match this with the iOS app would be good! To install an extension within the Electron app, you first need to download the extension zipped, then extract that to somewhere within your apps directory. Once this is complete, you can use the command:
session.defaultSession.loadExtension(__dirname + ‘folder/path/to/extension’)
… which loads your unpacked extension within electron. I also wrapped this dark mode extension around the nativeTheme.shouldUseDarkColor boolean which will therefore only pick dark mode if your main colour setting for your OS is dark mode. After figuring out how to use extensions, I also used cliqz adblocker npm package, which provides simple adblocking on all of the news sites cluttered with ads. Although I don’t fully agree with ad blocking as it is revenue-generating for most online businesses, most news sites are cluttered with ads to the point where you can barely read the article you’ve clicked..! The adblocking solution therefore only targets major content-blocking ads rather than all ads.
With these features in place, the app was essentially complete. After a few minor more tweaks like saving how the user resizes the program, adding an app icon, adding some keyboard shortcuts and reducing some of the packages used to save space, my app was complete. Time taken: 4-5 hours.
I’m extremely impressed by how relatively simple it was to take an existing website, add a few features and create a fully fledged Windows and Mac app out of it. Creating distributions for the app was also as simple as running two commands in the terminal; one for Windows and one for Mac. I could then copy these files to both my PC and Mac and have the app fully working on both. You can find screenshots of the app below. Incredibly helpful for someone like me who already uses Google News on my iOS devices, and I can only hope that one day Google releases their own apps with more features than mine that I can switch to. In the meantime, this’ll do nicely though!
