Inspiration

For this hackathon we wanted to make the Brave browser a first class citizen of the blockchain ecosystem. MetaMask extension support allows us to natively handle a wide range of previously deployed ÐApps. We also wanted to build a proof of concept ÐApp to test our MetaMask integration.

What it does

We added support for the MetaMask extension into the Bave browser, allowing the Brave browser to run ÐApps.

We also added in independent detection for ÐApps when the extension is not installed, and we display UI which prompts the user for a one click install of the extension when visiting a ÐApps.

How we built it

To activate MetaMask, we implemented several missing Google Chrome extension APIs into the Brave browser in C++ and JavaScript.

After having these missing APIs, we were able to re-use the Chrome MetaMask extension.

We added functionality to the browser when the extension is not installed, to show an alert when a page contains the web3 javascript module. The goal of doing this is to increase the amount of users that opt into installing the extension. This detection was done in 2 ways: A web3 object exists on the page. A web3 object is assumed to exist as a global and is accessed.

We also attempted to build Android MetaMask support but were not successful. Android does not have support for extensions so we attempted to use a service worker method. We were able to webpack the code and inject it but it still had problems to work correctly.

We also built a proof of concept ÐApp to verify the MetaMask integration.

Challenges we ran into

The code that needed to be written was not immediately obvious to us. We had to trace many code paths to ultimately build out our solution.

Detection of when there was a ÐApp on the page was difficult because extensions in Chromium share a DOM but have 2 distinct JavaScript environments that can’t be shared. Some ÐApps include their own web3 object, and other ÐApps assume one exist, and both of those methods needed to be supported.

Integrating MetaMask into Android was not possible within the timeframe of the hackathon but a lot of progress was made for the future.

Accomplishments that we're proud of

We did a security audit on the code and we’re planning to ship this support to our entire user base on desktop platforms on our next hotfix.

We’re proud of asking the user to install MetaMask when a ÐApp is detected because it will mean a lot more users of MetaMask.

Shipping this feature to our user base will open up a wide set of applications previously not available to our users on the Brave browser.

What we learned

We learned the application lifecycle of the MetaMask extension, the workings of the web3.js module, and methods to retrieve information from the Ethereum blockchain, more about Solidity, service workers, JS proxy objects, and more.

What's next for MetaMask Brave Integration

We’re planning to release in our next hotfix release currently scheduled for the start of this week.

In the future we’ll work more on building mobile ÐApp support for our Android and iOS browsers. We may also look into supporting the mist API.

Built With

Share this project:
×

Updates