Building MetaMask into Brave

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!

Show your support

Clapping shows how much you appreciated Dan Finlay’s story.