Electron is a popular choice for building desktop applications because it is:
Cross-platform: Electron apps can be built once & deployed to all major platforms.
Extensible: Electron apps can be extended with native code using Node.js modules.
Desktop versions of many popular apps like VS Code, GitHub, WhatsApp, Slack, Spotify, WordPress, Skype, Discord, etc are built using Electron.
To find an Electron app’s source code, go to its install location & look for a file called app.asar. Consider Lens for example, a Kubernetes IDE. In macOS, its app.asar is located in /Applications/Lens.app/Contents/Resources. In Windows, it should be in its install directory under C:\Program Files. Since apps in Linux can be installed in various locations, it’s best to search for it using find / -name app.asar.
app.asar is a compressed archive of the app’s source code & other project assets. When you launch an Electron app, it’ll look for app.asar & use the code inside it. If app.asar is not found, it’ll look for the equivalent uncompressed app directory, expected to contain the same contents as app.asar.
To start customizing the app’s CSS/JS, first uncompress app.asar:
npm install -g asar
asar extract app.asar app
mv app.asar original-app.asar
Since we renamed app.asar above, the app will now use the app directory instead.
However, if after customizing files in the app directory as described below, you notice your app is misbehaving in certain cases, try repacking the asar with your modifications:
asar pack app app.asar
You can also modify any of the app’s existing CSS/JS instead of adding your own, like lens.css & lens.js above. But when the app updates, your changes will be lost. So it’s best to keep your customizations in separate files like custom.css & custom.js above & keep a copy of these files outside the app. So when the app updates, you only need to add 2 lines to index.html & copy over your custom files inside the app again.
This blog post described how you can change the look & behavior of any Electron-based desktop app by first, getting access to its source code & then customizing it as you see fit. This brings the flexibility of the web to desktop apps & is very useful if your favorite Electron app doesn’t quite work as you want.
About the Author ✍🏻
Harish KM is a Principal DevOps Engineer at QloudX & a top-ranked AWS Ambassador since 2020. 👨🏻💻
With over a decade of industry experience as everything from a full-stack engineer to a cloud architect, Harish has built many world-class solutions for clients around the world! 👷🏻♂️
With over 20 certifications in cloud (AWS, Azure, GCP), containers (Kubernetes, Docker) & DevOps (Terraform, Ansible, Jenkins), Harish is an expert in a multitude of technologies. 📚
These days, his focus is on the fascinating world of DevOps & how it can transform the way we do things! 🚀
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.