Building MetaMask into Brave

This article is outdated! Brave now ships with the option to install MetaMask!

Furthermore, the process for building a custom MetaMask has also now changed and is detailed here instead!

The remaining article is for historical interest mostly!

The Brave Browser doesn’t have an official extension store yet, but they have provided a guide to building your own copy of Brave with custom extensions, so in this article we’re going to focus on one thing: How to build MetaMask into Brave. It’s going to be technical, and probably not interesting to everyone!

Braveness required. Requires a UNIX-style shell, like Mac or Linux. Illustration by Allentine.

You’ll need node.js 7 or later installed to start (Their guide says 6+, but I had my luck at 7+). Then, we’re going to clone Brave and install its dependencies (this can take a while):

git clone https://github.com/brave/browser-laptop.git
cd browser-laptop 
npm install

Then we’re going to enter Brave’s extensions folder, and use chrome-ext-downloader to install MetaMask from the Chrome store using its extension id. You can verify the extension ID to be safe on the Chrome store.

cd app/extensions
npm install -g chrome-ext-downloader
ced nkbihfbeogaeaoehlefnkodbefgpgknn

Next you’re going to open the file app/extensions.js in the browser-laptop folder, and find these lines:

// Manually install the braveExtension and torrentExtension
extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED)  
loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component')

Below them, paste these lines:

// Install MetaMask:
  extensionInfo.setState('nkbihfbeogaeaoehlefnkodbefgpgknn', extensionStates.REGISTERED)
  loadExtension('nkbihfbeogaeaoehlefnkodbefgpgknn', getExtensionsPath('nkbihfbeogaeaoehlefnkodbefgpgknn'))

Now open two terminals. One is going to watch & reload for changes: npm run watch. The other is going to start & launch your development browser: npm start.

Congrats, you should have Brave open now, and MetaMask already kinda works!

The Caveats

We have not done any custom Brave work yet, and Extensions are very new to Brave, so there’s some downsides, and rough edges. For one thing, we still need Brave to add an Extension inspector to even begin to debug these issues (issue on Github):

• When initiating a transaction, the transaction approval does not pop up automatically. (Github Issue)
• When a transaction is initiated, the number we label the badge with does not update. (Github Issue)

The Good News

Other than those issues, MetaMask seems to be working out of the box!

If you’re using Dapps where you know when they’re suggesting transactions, and don’t mind opening MetaMask manually, it seems to be mostly functional!

If you’d like to build yourself a local copy, follow the instructions here. Note this won’t benefit from auto-updates, so you’d be committing to re-pulling and re-building when you want updates.

We’ll be continuing to look at integration with Brave, because we think it’s a great browser, so keep your eyes peeled!