Integrating Metamask with Electron — A simple, secure, and non-intrusive approach
Written by Ícaro Harry (D’App Developer at Swapy Network)
Since the beginning of the development of Swapy Exchange it became clear that we needed a desktop app. When it comes to decentralized apps, the more the users don’t have to rely on third parties in order to use the application, the more trust they can put in.
Serving our frontend through cloud servers is great because anyone using a browser with MetaMask can access it, but we’re still depending on third-parties to host the code. This means that if the servers are down, e.g. maintenance or a DDoS attack, the users won’t be able to use the application. Other than that, with a desktop version, it’s much easier for the user to verify its integrity against the source code increasing, even more, the trust in the network. At the same time, we realized that the app being available on the web is a very easy way for the users to use it, making it more accessible.
So, our idea was to be flexible, making Swapy Exchange available on the web through the cloud but also releasing desktop versions compatible with the most used Operational Systems.
With decentralization in mind, we decided to focus on the desktop version first and we released Swapy Exchange Alpha v0.0.1 — a desktop app built on top of Electron. To make it work we built a wallet manager to create, encrypt and store private keys using Electron Store.
The problem began when we tried to deploy this version in the browser. Since we don’t have access to OS capabilities through the browser, we weren’t able to use our previous wallet manager. This means that we’d have to implement 2 different ways to manage wallets: one for the browser and other for the desktop. Not only this could become a mess in our code, but also, it could be very confusing for the users to use the application in one way through the browser and have a totally different experience using the desktop app.
So we decided to go to the other way around and release a browser version integrated with MetaMask, which is the most used wallet manager nowadays, because of its easy-to-use approach to communicate with the Ethereum blockchain. Then, again, we bumped in some issues regarding the implementation: it was not possible to easily integrate MetaMask in our desktop app because Electron doesn’t fully support the Chrome Extensions’ API. So we released Swapy Exchange Alpha v0.0.2 only in the browser.
At this point we had a big challenge in front of us:
1. We didn’t want to have 2 different codebases: one for the web and the other for Electron.
2. We needed to provide wallet management for the desktop in the most secure & easy-to-use way, preferably using MetaMask itself within our Electron App.
3. Security! We didn’t want anyone to steal user’s private keys or take control of the user’s OS.
— — —
Aragon’s solution
We then discovered that Aragon’s team was struggling with the same issue to create their desktop version. They wanted to integrate MetaMask into their Electron application and we came across their solution.
Basically, they had to implement what was missing in Electron to support extensions + some specific requirements of MetaMask. According to their post, some of the things they had to were:
- Implement a lot of dummy APIs faking Chrome’s.
- Replace MetaMask’s default communication method between the extension and the webapp (using Ports) with an isolated, inter-origin communication using postMessage.
Also, since they removed nodeIntegration from Electron, they had to implement their own way to communicate between the browser renderer and the main app, so they created Intertron.
They did a great job on that and in the beginning, we thought in going to the same path, using their open source code as a reference. But we realized that it was not that simple. They were not using the actual codebase of MetaMask, instead, they created their own fork, thus making it too hard to keep MetaMask up-to-date. Also, MetaMask UI is built with React, so as Aragon, but Swapy Exchange uses Angular, nonetheless injecting the UI in our frontend was not so straightforward as for them.
Therefore we wanted a way that we could inject MetaMask’s actual code straightforward in our app and don’t worry with integrating any React code and don’t have to worry at all to modify the way MetaMask works thus making a desktop app compatible with MetaMask latest versions of course, without sacrificing any security.
Sounds impossible, but we did it!
Our solution
That’s when we bumped into Muon: an Electron fork maintained by Brave. According to Muon’s documentation, some of the goals of the framework are:
- add support for Chrome extensions
- add security-focused features for the renderer:
— remove node completely (from the renderer process)
— full sandbox
Muon seemed perfect for us: because not only we would have full support for extensions but also we would have increased security and a framework supported by a great company also in the Ethereum ecosystem.
The biggest difference between Electron and Muon is that Muon fully support Chromium’s features and at the same time implements a secure way to do IPC communication, without Node (similar as Aragon’s Intertron, mentioned above). The problem is that it’s still in a very early stage, so they don’t have a good documentation yet, other than the browser-laptop code.
But the result couldn’t be better. After we figure out how Muon works and integrates with extensions, we were able to wrap our frontend code within Muon and inject MetaMask with minimum effort, downloading it directly from Chrome Store.
How we did it
1. We created a wrapper for the frontend code where the Muon code resides
2. We downloaded MetaMask from the Chrome Store using chrome-ext-downloader
3. We injected the extension using [Muon’s extension API]
4. We implemented the functions to open and close the MetaMask’s popups
5. We created in our frontend the isElectron variable to decide whether to open the extension through Electron/Muon or use MetaMask’s default communication with the browser
6. We packed our code with Electron Builder and generated installers for Windows, Mac and Linux.
— — —
Now, we’re releasing Swapy Exchange Alpha v0.0.3 with both browser and desktop versions using the same codebase integrated with MetaMask in a simple but secure way!
We want more!
We think that this solution can be useful for other companies/developers willing to release desktop versions of their dApps, that’s why we created electron-metamask-boilerplate, which can be used to easily wrap a d’App and generate a desktop version using MetaMask, just like we did!
Conclusion
It was a big challenge to come up with this solution, but we learned a lot in the process. We’re willing to keep evolving our code always looking for decentralization, transparency and creating value for our users.
It wouldn’t be possible to develop anything without the great open source community around the world, so we’d like to thank all developers behind the software that makes Swapy Network possible. In this post we’d like to specifically thank:
- The MetaMask team and contributors on the great solution for the Web 3.0
- The Electron team and contributors on the simplest solution to create desktop apps (we love that)
- The Brave/Muon team and contributors on the great work on Muon
- The Aragon team and contributors on the awesome work to integrate with MetaMask + the transparency on sharing all the process
- The Electron Builder team and contributors on such a great documentation and solution to package and distribute desktop apps
Learn more about Swapy Network:
Website
Telegram (Announcements only)
Telegram (Open chat)
